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

效果：

首先--创建地图

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

<map id="mapId" class="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"></map>

其中的属性值：

longitude  经度

latitude  纬度

markers  点标记

wxml部分：

<view>
  <view class="top">
    <view class="topLeft">
      <van-tabs bind:click="onClick">
        <van-tab wx:for="{{addressData}}" wx:key="id" name="{{item.id}}" title="{{item.name}}">
        </van-tab>
      </van-tabs>
    </view>
    <view class="topRight">
      <image src="img/mapbtn.png" mode="" />
    </view>
  </view>
  <map id="mapId" class="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"></map>
</view>

js部分:

/**
   * 页面的初始数据
   */
  data: {
    addressData: [],
    addressId: '',
    sencinData: [],
    longitude: '116.397963',
    latitude: '39.915119',
    markers: []
  },
// 点击事件
  onClick(event) {
    console.log(event);
    this.addressId = event.detail.name
    wx.showToast({
      title: `点击标签 ${event.detail.title}`,
      icon: 'none',
    });
    let that = this
    wx.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 = this
    wx.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