|
|
<!doctype html>
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-demo.html -->
|
|
|
<!-- <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" /> -->
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
|
<title>简单路径</title>
|
|
|
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.10&key=b91a08b248b7db3e15a28eb3926650de'></script>
|
|
|
<!-- UI组件库 1.0 -->
|
|
|
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
|
|
|
<script type="text/javascript" src="http://info/min/?f=/js/information-system3.min.js,/js/common.js&v=2018022601"></script>
|
|
|
|
|
|
|
|
|
<style>
|
|
|
html,
|
|
|
body,
|
|
|
#container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
margin: 0px;
|
|
|
}
|
|
|
.amap-marker-label{
|
|
|
border: 0;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
.markerInfo {
|
|
|
background: rgba(255, 255, 255, 0.7);
|
|
|
padding: 2px 5px;
|
|
|
border: 1px solid #ccc;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
<body>
|
|
|
<!--
|
|
|
根据行程生成地图，数据格式：
|
|
|
起点名称，起点坐标，终点名称，终点坐标，交通工具，交通工具备注（如航班号，车次等）
|
|
|
data['start']='Beijing';//出发地
|
|
|
data['start_lng']='116.41667';//经度
|
|
|
data['start_lat']='39.91667';//纬度
|
|
|
data['end']='Xian';
|
|
|
data['end_lng']='108.95000';//经度
|
|
|
data['end_lat']='34.26667';//纬度
|
|
|
data['traffic']='2';//交通类型 2火车 3飞机 4游船 5小车
|
|
|
data['memo']='G87';//备注，显示航班号，里程等等
|
|
|
|
|
|
-->
|
|
|
<?php
|
|
|
$tour=array();
|
|
|
$tour[]=array('start'=>'Beijing','start_lng'=>'116.41667','start_lat'=>'39.91667','end'=>'Xian','end_lng'=>'108.95000','end_lat'=>'34.26667','traffic'=>'2','memo'=>'G87');
|
|
|
$tour[]=array('start'=>'Xian','start_lng'=>'108.95000','start_lat'=>'34.26667','end'=>'Guilin','end_lng'=>'110.290247','end_lat'=>'25.273915','traffic'=>'3','memo'=>'CA1225');
|
|
|
$tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.273915','end'=>'Longsheng','end_lng'=>'110.648739','end_lat'=>'24.828426','traffic'=>'5','memo'=>'');
|
|
|
$tour[]=array('start'=>'Longsheng','start_lng'=>'110.648739','start_lat'=>'24.828426','end'=>'Guilin','end_lng'=>'110.290247','end_lat'=>'25.273915','traffic'=>'5','memo'=>'');
|
|
|
$tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.273915','end'=>'Yangshuo','end_lng'=>'110.496593','end_lat'=>'24.778481','traffic'=>'5','memo'=>'');
|
|
|
$tour[]=array('start'=>'Yangshuo','start_lng'=>'110.496593','start_lat'=>'24.778481','end'=>'Guilin','end_lng'=>'110.290247','end_lat'=>'25.273915','traffic'=>'5','memo'=>'');
|
|
|
$tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.273915','end'=>'Shanghai','end_lng'=>'121.473658','end_lat'=>'31.230378','traffic'=>'3','memo'=>'FM9350');
|
|
|
?>
|
|
|
<div id="container"></div>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
var tour_data='<?php echo json_encode($tour); ?>';
|
|
|
|
|
|
//创建地图
|
|
|
var map = new AMap.Map('container', {
|
|
|
zoom: 5,
|
|
|
center: [116.397428, 39.90923],
|
|
|
lang: "zh_en"
|
|
|
});
|
|
|
|
|
|
//标记出目的地
|
|
|
$.each(JSON.parse(tour_data), function (index, element) {
|
|
|
var marker_start = new AMap.Marker({
|
|
|
position:[element.start_lng,element.start_lat],
|
|
|
title: element.start,
|
|
|
label:{content:element.start,offset:new AMap.Pixel(15, 15)}
|
|
|
});
|
|
|
var marker_end = new AMap.Marker({
|
|
|
position:[element.end_lng,element.end_lat],
|
|
|
title: element.end,
|
|
|
label:{content:element.end,offset:new AMap.Pixel(15, 15)}
|
|
|
});
|
|
|
map.add([marker_start,marker_end]);
|
|
|
});
|
|
|
|
|
|
//画轨迹
|
|
|
|
|
|
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
|
|
|
|
|
|
if (!PathSimplifier.supportCanvas) {
|
|
|
alert('当前环境不支持 Canvas！');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var pathSimplifierIns = new PathSimplifier({
|
|
|
zIndex: 100,
|
|
|
//autoSetFitView:true,//自动调整地图视野以适合全部轨迹
|
|
|
map: map, //所属的地图实例
|
|
|
getPath: function(pathData, pathIndex) {
|
|
|
return pathData.path;
|
|
|
},
|
|
|
renderOptions: {
|
|
|
renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
|
|
|
}
|
|
|
});
|
|
|
|
|
|
window.pathSimplifierIns = pathSimplifierIns;
|
|
|
|
|
|
var path_data=new Array();
|
|
|
$.each(JSON.parse(tour_data), function (index, element) {
|
|
|
path_data.push({'name':index,'path':PathSimplifier.getGeodesicPath([element.start_lng, element.start_lat], [element.end_lng, element.end_lat], 30)});
|
|
|
});
|
|
|
|
|
|
//设置数据
|
|
|
pathSimplifierIns.setData(path_data);
|
|
|
|
|
|
$.each(JSON.parse(tour_data), function (index, element) {
|
|
|
//交通工具 plane car train ship
|
|
|
var tour_traffic='';
|
|
|
var tour_speed=500000;//巡航速度，单位千米/小时
|
|
|
var tour_memo=element.memo;
|
|
|
|
|
|
//2火车 3飞机 4游船 5小车
|
|
|
switch(element.traffic){
|
|
|
case '2':
|
|
|
tour_traffic='/css/images/train.png';
|
|
|
tour_speed=50000;
|
|
|
break;
|
|
|
case '3':
|
|
|
tour_traffic='/css/images/plane.png';
|
|
|
tour_speed=500000;
|
|
|
break;
|
|
|
case '4':
|
|
|
tour_traffic='/css/images/ship.png';
|
|
|
tour_speed=50000;
|
|
|
break;
|
|
|
case '5':
|
|
|
tour_traffic='/css/images/car.png';
|
|
|
tour_speed=5000;
|
|
|
break;
|
|
|
default:
|
|
|
tour_traffic='/css/images/car.png';
|
|
|
tour_speed=50000;
|
|
|
}
|
|
|
|
|
|
//创建一个巡航器
|
|
|
var navigator = pathSimplifierIns.createPathNavigator(index, {
|
|
|
loop: true, //循环播放
|
|
|
speed: tour_speed, //巡航速度，单位千米/小时
|
|
|
pathNavigatorStyle: {
|
|
|
width: 32,
|
|
|
height: 32,
|
|
|
//使用图片
|
|
|
content: PathSimplifier.Render.Canvas.getImageContent(tour_traffic, onload, onerror),
|
|
|
strokeStyle: null,
|
|
|
fillStyle: null,
|
|
|
//经过路径的样式
|
|
|
pathLinePassedStyle: {
|
|
|
lineWidth: 6,
|
|
|
//strokeStyle: 'black',
|
|
|
dirArrowStyle: {
|
|
|
stepSpace: 15,
|
|
|
strokeStyle: 'red'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
if(tour_memo!==''){
|
|
|
var $markerContent = $('<div class="markerInfo"></div>');
|
|
|
$markerContent.html(tour_memo);
|
|
|
navigator.marker = new AMap.Marker({
|
|
|
offset: new AMap.Pixel(15, -10),
|
|
|
content: $markerContent.get(0),
|
|
|
map: map
|
|
|
});
|
|
|
|
|
|
navigator.on('move', function() {
|
|
|
navigator.marker.setPosition(navigator.getPosition());
|
|
|
});
|
|
|
}
|
|
|
navigator.start();
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|