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

飞奔的屎壳郎

已于 2024-09-09 22:35:43 修改

阅读量7.3k

点赞数 2

分类专栏：小程序开发文章标签：微信小程序地图 map

于 2019-10-28 16:39:40 首次发布

本文链接：https://blog.csdn.net/qq_35349982/article/details/102783388

版权

小程序开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

先上效果图，总的来说就是在地图上加上自己需要的数据
在这里插入图片描述

注意事项：

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
        })

      }
    );

})