小程序地图实现+地图标点+获取实时定位

app.json声明

    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      }
    }

注意位置

index.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    longitude: [],
    latitude: [],
    markers: []

  },

  onLoad: function (options) {
    var that = this;

    // 获取当前地理位置
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude

        var markers = new Array();
        //数据库读取标记信息
        wx.request({
          url: 'https://xcx.liuqiaomin.cn/img/ml/dt/dt.json',//请求地址//json文件
          data: {},
          header: {//请求头
            "Content-Type": "applciation/json"
          },
          method: "get",
          success: function (res) {
            var data = res.data;
            console.log("data数据",data)

            for (var i = 0; i < data.length; i++) {
              var name = data[i].name; //名称
              var lat = data[i].latitude; //经度
              var lon = data[i].longitude;//纬度

              var info = {
                id: 0,
                iconPath: "/img/1.png",
                latitude: '',
                longitude: '',
                width: 20,
                height: 25,
                title: "",
              };
              info.id = i
              info.latitude = lat
              info.longitude = lon
              info.title = name

              markers.push(info);
            }

            var str = JSON.stringify(markers);
            console.log(markers);
             console.log("latitude",latitude);
            console.log("longitud",longitude);
            that.setData(
              {
                latitude: latitude,
                longitude: longitude,
                markers: markers
              }
            )

          },
          fail: function (err) { },//请求失败
          complete: function () { }//请求完成后执行的函数
        })
      }
    })
  }}
)

index.wxml

<map latitude="{{latitude}}" longitude="{{longitude}}" show-location="true" style="width: 100%; height: 550px;" scale="10"
  markers="{{markers}}" />

不用index.wxss

/
效果图

附件
test.json

[

  {
      "img": "https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-09-26/352f1d243122cf52462a2e6cdcb5ed6d.png",
      "nr": "大型商场",
      "dm": "卓悦汇购物中心",
      "dz": "广东省深圳市福田区上梅林地铁出口处",
      "sj": "2020年02月2日",
      "dh": "无",
      "id": 2,
      "latitude": "22.569690",
      "longitude": "114.060334",
      "name": "卓悦汇购物中心"
    },
    {
      "img": "https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-09-26/352f1d243122cf52462a2e6cdcb5ed6d.png",
      "nr": "大型商场",
      "dm": "卓悦汇购物中心",
      "dz": "广东省深圳市福田区梅林街道北环大道6098号",
      "sj": "2020年02月2日",
      "dh": "0755-83202213",
      "id": 3,
      "latitude": "22.560794",
      "longitude": "114.039468",
      "name": "佐阾虹湾购物中心"
    }
]

谢谢大家----------------------欢迎关注我的公众号

-------------------谢谢大家------------------------->>>>>>>欢迎打赏