微信小程序 实现地图

跳转获取经纬度

wxml

<map id=myMap" 
bindtap="map"  
style="width: 100%; height: 300px;"
markers="{{markers}}" 
latitude="{{latitude}}" 
longitude="{{longitude}}">
</map>

js

// pages/map/map.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    latitude:"",
    longitude:"",
    markers: [],
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this
 
// 获取当前位置的经纬度
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        console.log(res)
        const latitude = res.latitude
        const longitude = res.longitude
        // 赋值当前位置的经纬度
         that.setData({
           latitude:latitude
         })
         that.setData({
          longitude:longitude
        })
// 查询到的周边五公里的信息
        wx.request({
          url: 'http://www.cs.com/admin/Map/index',
          data:{latitude,longitude},
          method:"POST",
          success:(r)=>{
            if(r.statusCode!=200){
              
              return false
            }
            var markers=[]
           console.log(r.data.data)
          //  循环赋值给markers,在地图上显示坐标
           for(var i=0;i<r.data.data.length;i++){
            markers[i]=r.data.data[i]
            markers[i].iconPath="/image/location.png"
          }
           that.setData({markers:[...markers]})
          
          }
        })
      }
     })
    // 把标点添加到 markers
    const normalCallout = {
      latitude:30.91803,
      longitude: 121.4741,
      iconPath: '/image/location.png',
    }
     var markers=[normalCallout]
     that.setData({ markers})
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  },
 
})

实现标点
也可这么写
可以选择标点 也可不选 默认小红点

  var markers=[]
     markers.push({
      latitude:31.03222,
       longitude: 121.22879,
       iconPath: '../../img/1.jpg',
})
      markers.push({
         latitude:30.91803,
         longitude: 121.4741,
         
})
     that.setData({ markers})
     console.log(markers)

效果如图