官方示例：https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimplifier/navigators
【自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用】
移动过程中动态打点和显示移动的原始数据位置信息
完整示例：（填入你的key和安全密钥）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>Document</title>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥',
}
</script>
<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=e35b8d4ab5121cedce8efb3082b29882"></script> -->
<style>
#container {
width: 600px;
height: 680px;
}
.markerInfo {
background: rgba(255, 255, 255, 0.7);
padding: 2px 5px;
border: 1px solid #ccc;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="container"></div>
<button id="start">开始</button>
<button id="pause">暂停</button>
<button id="resume">恢复</button>
<!-- <button id="stop">停止</button> -->
<div>
地点：
<span id="address" style="font-weight: 700;color: red;"></span>
</div>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
datas = [
{
"address": "山西省晋城市陵川县,苏村北270米",
"lnglat": ["113.10855629405023", "35.81269943234685"]
},
{
"address": "山西省晋城市陵川县陵礼线,有明大酒店东北193米",
"lnglat": ["113.12345680410088", "35.80111703624581"]
},
{
"address": "山西省晋城市陵川县陵礼线,椅掌村西南345米",
"lnglat": ["113.14451056278224", "35.79194652608597"]
},
{
"address": "山西省晋城市陵川县陵礼线,申庄村西北68米",
"lnglat": ["113.14997744329868", "35.78614248055367"]
},
{
"address": "山西省晋城市陵川县陵礼线,香山汽贸西南177米",
"lnglat": ["113.25998005104937", "35.779381907209704"]
},
{
"address": "山西省晋城市陵川县古陵路辅路,亮景苑东北17米",
"lnglat": ["113.27251928376477", "35.766462457631754"]
},
{
"address": "山西省晋城市陵川县古陵路辅路,亮景苑西北17米",
"lnglat": ["113.27235281117208", "35.76643442785195"]
}
]
var map
AMapLoader.load({
"key": "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填
"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
"plugins": ['AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI，缺省不加载
"version": '1.1', // AMapUI 版本
"plugins": [], // 需要加载的 AMapUI ui插件
},
"Loca": { // 是否加载 Loca， 缺省不加载
"version": '2.0' // Loca 版本
},
}).then((AMap) => {
map = new AMap.Map('container', {
zoom: 13
});
map.addControl(new AMap.Scale());
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！');
return;
}
initPage(PathSimplifier, $);
});
}).catch((e) => {
console.error(e); //加载错误提示
});
function initPage(PathSimplifier, $) {
var emptyLineStyle = {
lineWidth: 0,
fillStyle: null,
strokeStyle: null,
borderStyle: null
};
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
//autoSetFitView:true,
map: map, //所属的地图实例
getPath: function (pathData, pathIndex) {
var points = pathData.path,
lnglatList = [];
for (var i = 0, len = points.length; i < len; i++) {
lnglatList.push(points[i].lnglat);
}
return lnglatList;
// return pathData.path;
},
getHoverTitle: function (pathData, pathIndex, pointIndex) {
return null;
},
renderOptions: {
//将点、线相关的style全部置emptyLineStyle
pathLineStyle: emptyLineStyle,
pathLineSelectedStyle: emptyLineStyle,
pathLineHoverStyle: emptyLineStyle,
keyPointStyle: emptyLineStyle,
startPointStyle: emptyLineStyle,
endPointStyle: emptyLineStyle,
keyPointHoverStyle: emptyLineStyle,
keyPointOnSelectedPathLineStyle: emptyLineStyle
}
});
window.pathSimplifierIns = pathSimplifierIns;
pathSimplifierIns.setData([{
name: '测试',
path: datas
}]);
function onload() {
pathSimplifierIns.renderLater();
}
function onerror(e) {
alert('图片加载失败！');
}
var navg1 = pathSimplifierIns.createPathNavigator(0, {
loop: false,
speed: 5000,
pathNavigatorStyle: {
width: 16,
height: 32,
//使用图片
content: PathSimplifier.Render.Canvas.getImageContent('https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png', onload, onerror),
strokeStyle: null,
fillStyle: null,
//经过路径的样式
pathLinePassedStyle: {
lineWidth: 6,
strokeStyle: 'black',
dirArrowStyle: {
stepSpace: 15,
strokeStyle: 'red'
}
}
}
});
document.querySelector('#start').onclick = function () {
clearMarker()
navg1.start();
}
document.querySelector('#pause').onclick = function () {
navg1.pause();
}
document.querySelector('#resume').onclick = function () {
navg1.resume();
}
// document.querySelector('#stop').onclick = function () {
// navg1.stop();
// }
navg1.marker = new AMap.Marker({
offset: new AMap.Pixel(12, -10),
content: '<div class="markerInfo">北京南-->南京</div> ',
position:datas[0].lnglat,
map: map
});
var markers = []
//移动过程中
navg1.on('move', function (e) {
navg1.marker.setPosition(navg1.getPosition());
let idx = e.target.getCursor().idx //经过的原始点索引
// console.log(e.target.getPosition());
// console.log(e.target.getCursor());// 当前的原始数据点
if (!datas[idx].address) {
document.querySelector('#address').innerHTML = '无位置信息'
} else {
document.querySelector('#address').innerHTML = datas[idx].address
}
var marker = new AMap.Marker({
position: datas[idx].lnglat, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: datas[idx].address
});
map.add(marker);
markers.push(marker)
map.setCenter(e.target.getPosition(), true) //跟随视角()
// pathSimplifierIns.setFitView(this.getPathIndex()) //在视图里播放
console.log(this.getPathIndex());
console.log(idx);
if (idx === datas.length - 1) {
pathSimplifierIns.setFitView()
}
})
function clearMarker() {
if (markers) {
for (let i = 0; i < markers.length; i++) {
const item = markers[i];
item.setMap(null);
marker = null;
}
}
markers = []
}
}
</script>
</body>
</html>
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
