h5高德地图javascript调起app导航定位多个marker

最新推荐文章于 2024-03-26 09:01:53 发布

Xing菲菲

最新推荐文章于 2024-03-26 09:01:53 发布

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java web

本文链接：https://blog.youkuaiyun.com/XingZhaoQiang/article/details/70171744

java 同时被 2 个专栏收录

29 篇文章

订阅专栏

web

7 篇文章

订阅专栏

本文介绍了一个使用Ajax从服务器获取店铺位置数据，并将其显示在地图上的项目案例。通过解析返回的JSON数据，项目实现了在地图上添加标记并展示店铺名称的功能。然而，在尝试进行导航时遇到了问题：尽管地图上正确显示了所有标记，但导航功能只针对最后一个标记的位置工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做的一个项目, 一开始以为是做路线规划, 后来说是做导航

记录下代码

// 获取商品集合集合并且传回来的是名称和经纬度

getShop : function(){
$.ajax({
url : contextPath + '/service/mobile/pc/shop',
type : 'POST',
async : false,
dataType : 'JSON'
}).done(function(data, textStatus, jqXHR) {
var _html = '';
$.each(data.list, function(index, row){
lnglats2.push(row);
});
pc.getView();
});
},
getView : function(){
var lnglats = [];
$.each(lnglats2, function(index, row){
var lnglats3 = [];
lnglats3[0] = row[1];
lnglats3[1] = row[2];
lnglats.push(lnglats3);
});

for(var i = 0; i < lnglats.length; i++) {
var name = lnglats2[i][0];
var marker = new AMap.Marker({
position: lnglats[i], // 经纬度[21312312,34535435]
map: map
});
marker.setLabel({
offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
content: name // 店铺名称
});

(function(x){
marker.on("click", function(){
this.markOnAMAP({
name:''+this.getLabel().content+'',
position:this.getPosition() // 经纬度
})
});
})(i);
}
}
map.addControl(new AMap.ToolBar());
在最后的时候, 地图上同时出现了多个标记,但是导航后,导航的地址是最后一个marker的位置, 是由于js闭包造成的;