微信小程序地图标记添加及经纬度获取示例
以下是一个用微信小程序编写的示例代码,可以实现点击按钮添加多个地图标记并输出标记对应的经纬度:
// index.js
Page({
data: {
markers: [],
},
addMarker: function() {
var that = this;
wx.chooseLocation({
success: function(res) {
var markers = that.data.markers;
markers.push({
id: markers.length,
latitude: res.latitude,
longitude: res.longitude,
title: res.name,
});
that.setData({
markers: markers,
});
console.log('经度:' + res.longitude + ',纬度:' + res.latitude);
}
});
}
})
<!-- index.wxml -->
<view>
<button bindtap='addMarker'>添加标记</button>
<map markers='{{ markers }}'></map>
</view>
在这个示例中,我们首先在 data 中定义了一个 markers 数组,用于存储地图标记的信息。然后在 addMarker 方法中,通过调用微信小程序的 chooseLocation 接口,让用户选择一个地点。选择成功后,将标记的经纬度、标题等信息添加到 markers 数组中,并更新页面的数据。同时,在控制台输出标记对应的经纬度。
在页面的 index.wxml 文件中,我们添加了一个按钮,绑定了 addMarker 方法。在页面上方使用 <map> 组件展示地图,并绑定了 markers 数组,以显示所有的标记。
请注意,使用地图相关的 API,需要在微信公众平台中进行相应的配置和授权操作。
原文地址: https://www.cveoy.top/t/topic/qBxQ 著作权归作者所有。请勿转载和采集!