微信小程序 map 自定义地图数据,实现方式+思路+代码(最简易的实现方式)

先上效果图,总的来说就是在地图上加上自己需要的数据
微信小程序 map 自定义地图数据,实现方式+思路+代码(最简易的实现方式)_第1张图片

注意事项:

requestSimple是我封装的提交函数,我的其他帖子有。

重点掌握.(重点)

1.官方map组件,提供了自定义标记(markers)的方式。详细去看下文档https://developers.weixin.qq.com/miniprogram/dev/component/map.html
2.一个点就是一个标记,多个点就是 markers的List集合,每个marker的id很重要,数据传输要用的,说白了就是拼接多个markers,然后地图显示
3.(重点)代码中我定义了 hasMaekers首页加载默认不加载,这是因为,这块是异步执行的,还没有在数据库拼接好数据,就已经显示地图了,这时 hasMaekers的list是空的,地图就是无效,所以定义一个变量,当数据渲染好了,在现实
4.xwml中的 map控件的id 也很重要,可以用来实现快速回到自己的位置,我的其他帖子有说,这里要重点知道一下
5.有任何问题,下方留言哈。目前来说没有遇到任何问题

项目中的代码段

xwml中

 <map id="myMap" style="width: 100%; height: 100vh;" latitude="{{latitude}}"   longitude="{{longitude}}" markers="{{markers}}" show-location="true" scale="{{scale}}" show-compass="true" bindmarkertap="getMarkers" wx:if="{{hasMaekers}}" bindcallouttap="getCallOut"></map>

js中

Page({


  /**
   * 页面的初始数据
   */
  data: {
    hasMaekers: false,//首页刚加载,地图默认不渲染
    scale: 15, //缩放比例
    latitude: pageParams.pageParams.userLatitude,
    longitude: pageParams.pageParams.userLongitude,
    //音频的list集合
    markers: [],
    //具体一条音频
    urlBase: url.urlBase,//图片路径
    mapId: "myMap",//map地图的Id
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this
    requestSimple(
      url.url.getAudioToMap,
      {
        "tourist_id": app.globalData.touristId,
        "scheme": "1",
        "city": app.globalData.defaultCity
      },
      function (res) {
        //拼接音频集合,页面数据
        var lists = [];
        for (var i = 0; i < res.length; i++) {
          var iconPath = "../images/audio_1.png"
          //0未购买 1已购买
          if (res[i].isBuy == "1") {
            iconPath = "../images/audio_2.png"
          }
          var temp = {
            id: res[i].viewspot_id,
            latitude: res[i].viewspot_lat,
            longitude: res[i].viewspot_long,
            width: 35,
            height: 40,
            border: '#000',
            title: res[i].viewspot_name,
            iconPath: iconPath,
            callout: {
              content: res[i].viewspot_name,
              color: "#333",
              fontSize: "14",
              borderColor: "#cecece",
              borderRadius: "24",
              borderWidth: "1",
              display: "ALWAYS",
              bgColor: "#ffffff",
              padding: "10",
              display: "ALWAYS"
            }
          }
          lists.push(temp);
        }
        that.setData({
          "markers": lists,
          hasMaekers: true
        })

      }
    );

})

你可能感兴趣的:(小程序开发)