微信小程序–怎样在小程序中创建地图并渲染数据中的点标记

效果：

首先–创建地图

使用官方文档中的地图组件 map

<map class="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}">

其中的属性值：

longitude 经度

latitude 纬度

markers 点标记

wxml部分：

<van-tab wx:for="{{addressData}}" wx:key="id" name="{{item.id}}" title="{{item.name}}"><map class="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}">

js部分:

/** * 页面的初始数据 */data: {addressData: [],addressId: '',sencinData: [],longitude: '116.397963',latitude: '39.915119',markers: []},// 点击事件onClick(event) {console.log(event);this.addressId = event.detail.namewx.showToast({title: `点击标签 ${event.detail.title}`,icon: 'none',});let that = thiswx.request({url: 'https://xxxxxx.xxx', //接口请求method: 'POST',data: {xxx: event.detail.name},success: (res) => {console.log(res);that.setData({sencinData: res.data.data})console.log(that.data.sencinData);this.loadMarkers(); //点标记渲染}})},//渲染事件loadMarkers: function () {let markers = this.data.sencinData//生成 markers 列表，用于在地图上展示let markersData = markers.map(marker => {return {id: marker.id,longitude: marker.lng, //经度latitude: marker.lat, //纬度title: marker.name, //名称county: marker.address, iconPath: 'https://xxxxxx' + marker.imgs, //标点图片，接口数据如果没有可以用本地路径width: 40,height: 40,};});console.log('---------------------------');console.log(markersData);console.log('---------------------------');this.setData({markers: markersData});},

生命周期函数–监听页面初次渲染完成：

/** * 生命周期函数--监听页面初次渲染完成 */onReady: function () {wx.setNavigationBarTitle({title: '景区地图',})// 初始渲染let that = thiswx.request({url: 'https://xxxxxx.xxx',method: 'POST',data: {xxx: xxx},success: (res) => {console.log(res);that.setData({addressData: res.data.data})console.log(that.data.addressData);wx.request({url: 'https://xxxxxx.xxx',method: 'POST',data: {xxx: that.data.xxx[0].id},success: (res) => {console.log(res);that.setData({sencinData: res.data.data})console.log(that.data.sencinData);//加载点位数据this.loadMarkers();}})}})},

最终效果：

我这里的数据经纬度都是一样的（因为是练习的demo），所以呈现了上述效果

/ヾ(≧▽≦*)o