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

本文介绍了一个使用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闭包造成的; 
<think>嗯,用户想在UniAppAPP端集成高德地图,并实现地图加载功能。首先,我需要回忆一下之前看到的关于UniApp高德地图的引用内容。根据引用[2],用户需要先申请高德地图的Key,然后在项目中配置。可能需要修改manifest.json文件,添加高德地图的配置信息,比如AppKey和各个平台的设置。 接下来,创建地图页面。引用[1]提到使用原生的JavaScript,但UniApp有自己的组件,比如map组件。不过可能需要用renderjs来处理复杂的地图操作,特别是如果需要在H5APP端都适配的话,如引用[3]所述。不过用户这次只需要APP端,可能可以直接用UniApp的map组件。 然后,动态设置地图中心点可能需要用到定位功能。需要确认高德地图定位API在APP端如何调用,是否需要使用uni.getLocation或者其他插件。引用[1]也提到了定位功能,可能需要配置权限,比如在manifest里添加定位权限。 可能还需要在页面的onLoad生命周期中初始化地图,设置相应的参数,比如纬度、经度、标记点等。另外,地图的显示可能需要设置样式,比如宽度、高度,以及控件是否显示。 用户可能遇到的问题包括Key配置错误、地图不显示、定位失效等,需要提醒他们检查Key的绑定是否正确,包名是否匹配,以及权限是否开启。此外,高德地图的SDK版本可能需要更新,或者某些功能需要特定的配置。 最后,生成相关问题的时候,要围绕集成步骤、定位、自定义标记、不同平台的适配等问题展开,帮助用户进一步解决可能的需求。</think>以下是在 UniAppAPP 端集成高德地图并实现地图加载功能的步骤说明: ### 一、高德地图基础配置 1. **申请高德地图 Key** 访问[高德开放平台](https://lbs.amap.com/),创建应用并获取 Web 服务 Key 和 Web 端 JS API Key,需注意绑定应用的 Bundle ID(Android)或 Bundle Identifier(iOS)[^2]。 2. **修改 manifest.json** 在 UniApp 项目的配置文件中添加高德地图 SDK 声明: ```json "app-plus": { "modules": { "Maps": {} }, "distribute": { "android": { "permissions": ["ACCESS_COARSE_LOCATION","ACCESS_FINE_LOCATION"], "maps": { "AMap": "高德地图 Key" } }, "ios": { "maps": { "AMap": "高德地图 Key" } } } } ``` ### 二、地图加载实现 ```vue <template> <view class="map-container"> <!-- 使用原生地图组件 --> <map id="myMap" :latitude="latitude" :longitude="longitude" :markers="markers" style="width: 100%; height: 80vh" :show-location="true"> </map> </view> </template> <script> export default { data() { return { latitude: 39.90923, // 默认北京中心坐标 longitude: 116.397428, markers: [{ id: 1, latitude: 39.90923, longitude: 116.397428, title: '初始标记点' }] } }, onLoad() { this.initMap(); }, methods: { async initMap() { // 动态获取当前位置 const res = await uni.getLocation({ type: 'gcj02' // 高德坐标系 }); this.latitude = res.latitude; this.longitude = res.longitude; } } } </script> ``` ### 三、关键注意事项 1. **坐标系规范** 必须使用 `gcj02` 坐标系(高德地图专用),若使用 `wgs84` 会出现坐标偏移。 2. **权限配置** Android 需在 manifest 中声明定位权限,iOS 需在 Xcode 中配置 `NSLocationWhenInUseUsageDescription` 描述。 3. **真机调试** 地图功能仅支持真机调试,模拟器无法加载地图瓦片[^1]。 ### 四、常见问题排查 | 现象 | 解决方案 | |----------------------|---------------------------------| | 地图空白 | 检查 Key 是否绑定正确包名 | | 定位失败 | 确认设备开启 GPS 权限 | | 标记点不显示 | 验证 marker 坐标是否为 gcj02 格式|
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值