微信小程序把后台传过来的数组坐标展示在地图上

欢迎加入微信小程序开发交流qq群(173683895),里面有很多热心的大神会和你一起学习探讨开发中遇到的问题哦。

功能实现:

1. 根据后台传递过来的数据,包括地址名字,经纬度坐标等都展示在map组件上;

2. 点击相应地址实现用户当前位置导航至点击的目的地位置的功能。

3. 微信小程序内打开腾讯地图APP或者高德地图APP。

先上效果图


代码:

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100%;"></map>
// map.js
var markers = [];//地图标记点
var callout = [];//地图标记点的气泡
var app = getApp()
Page({
  data: {
    marker_latitude: '',
    marker_longitude: '',
  },
  onLoad() {
    var that = this;
    wx.request({
      url: '' + app.globalData.subDomain + '/storelist.php?classid=76',
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        that.setData({
          listData: res.data.result
        })
        var listData = res.data.result;
        for (var i = 0; i < listData.length; i++) {
          markers = markers.concat({
            iconPath: "/image/dizhi.png",
            id: listData[i].id,
            callout: {
              content: listData[i].title,
              fontSize: '32',
              padding: true,
              color:'#444',
              display: 'ALWAYS',
              textAlign: 'center',
              borderRadius: 15
            },
            latitude: listData[i].weidu,
            longitude: listData[i].jingdu,
            width: 20,
            height: 20
          });
        }
        console.log(markers)
        that.setData({
          markers: markers,
          latitude: listData[0].weidu,
          longitude: listData[0].jingdu
        })
        wx.getLocation({
          type: 'wgs84',
          success: function (res) {
            var latitude = res.latitude
            var longitude = res.longitude
            that.setData({
              // latitude: latitude,
              // longitude: longitude
            })
          }
        })
      }
    })

  },
  onShow() {
    
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    var that = this;
    console.log(e.markerId)
    for (var i = 0; i < this.data.listData.length; i++) {
      if (e.markerId == this.data.listData[i].id) {
        this.setData({
          marker_latitude: this.data.listData[i].weidu,
          marker_longitude: this.data.listData[i].jingdu,
          title: this.data.listData[i].title
        })
      }
    }
    wx.openLocation({
      latitude: Number(that.data.marker_latitude),
      longitude: Number(that.data.marker_longitude),
      name: that.data.title,
      scale: 28
    })
  },
  controltap(e) {
    console.log(e.controlId)
  }
})
map{
  height: 100%;
}
page{
  height: 100%;
}


猜你喜欢

转载自blog.csdn.net/qq_35713752/article/details/80077268