小程序地图多个坐标点击获取当前信息，并点击地图任意地方获取信息

第一个效果：默认显示自身位置以及多个坐标的分布

第二个效果：点击地图任意地方，获取当前信息

点击任意地方获取到的信息： 

 WXML:

<view class="map">
    <map 
        latitude="{{covers[0].latitude}}" 
        longitude="{{covers[0].longitude}}" 
        scale="{{scale}}" 
        markers="{{markers}}"
        covers="{{covers}}"
        bindtap="translateMarker"
        bindmarkertap="showModal">
       
    </map>
</view>

JS：（也有气泡效果，目前注释了）

Page({

  /**
   * 页面的初始数据
   */
  data: {
    covers: [{//定义当前所在位置
        latitude: '34.35023911062779',
        longitude: '108.93218994140625',
        iconPath: '../../icons/comment-on.png'
      }],
    showModalStatus:true,
    // latitude: '35.08747',
    // longitude: '108.32119',
    scale:12,//缩放级别，取值范围为3-20
    iconPath:"https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel1.png",
    markers:[
        {
            id:'001',
            iconPath:"https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel1.png",
            latitude: '34.35845871671969',
            longitude: '108.95244598388672',
            name:'测试地图111',
            width:30,
            height:30
            // callout:{
            //     content:'我是气泡',color:'#333',fontSize:14,borderRadius:10,bgColor:'red',display:'ALWAYS',padding:5,anchorX:15,anchorY:-27,
            // },
            // label:{
            //     content:'刀削面',color:'#fff',anchorX:3,anchorY:2,borderWidth:1,borderColor:'#000',borderRadius:5,bgColor:'#c20007',padding:4,textAlign:'center'
            // }
        },
        {
            id:'002',
            iconPath:"https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel2.png",
            latitude: '34.347971491244955',
            longitude: '108.94351959228516',
            width:30,
            height:30
            // name:'测试地图222',
            // callout:{
            //     content:'我是气泡',color:'#666',fontSize:14,borderRadius:10,bgColor:'red',display:'ALWAYS',padding:5,anchorX:15,anchorY:-27,
            // },
            // label:{
            //     content:'兰州拉面',color:'#fff',anchorX:3,anchorY:2,anchorX:3,anchorY:2,borderWidth:1,borderColor:'#000',borderRadius:5,bgColor:'#c20007',padding:4,textAlign:'center'
            // }
        },
        {
            id:'003',
            iconPath:"https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel3.png",
            latitude: '34.339183886846556',
            longitude: '108.92498016357422',
            name:'测试地图333',
            width:30,
            height:30
            // callout:{
            //     content:'我是气泡',color:'#666',fontSize:14,borderRadius:10,bgColor:'red',display:'ALWAYS',padding:5,anchorX:15,anchorY:-27,
            // },
            // label:{
            //     content:'兰州拉面',color:'#fff',anchorX:3,anchorY:2,anchorX:3,anchorY:2,borderWidth:1,borderColor:'#000',borderRadius:5,bgColor:'#c20007',padding:4,textAlign:'center'
            // }
        },
        {
            id:'004',
            iconPath:"https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel4.png",
            latitude: '34.34060130468122',
            longitude: '108.9019775390625',
            name:'测试地图444',
            width:30,
            height:30
            // callout:{
            //     content:'我是气泡',color:'#666',fontSize:14,borderRadius:10,bgColor:'red',display:'ALWAYS',padding:5,anchorX:15,anchorY:-27,
            // },
            // label:{
            //     content:'兰州拉面',color:'#fff',anchorX:3,anchorY:2,anchorX:3,anchorY:2,borderWidth:1,borderColor:'#000',borderRadius:5,bgColor:'#c20007',padding:4,textAlign:'center'
            // }
        },
        {
            id:'005',
            iconPath:"https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel5.png",
            latitude: '34.35930897479356',
            longitude: '108.88137817382812',
            name:'测试地图005',
            width:30,
            height:30
            // callout:{
            //     content:'我是气泡',color:'#666',fontSize:14,borderRadius:10,bgColor:'red',display:'ALWAYS',padding:5,anchorX:15,anchorY:-27,
            // },
            // label:{
            //     content:'兰州拉面',color:'#fff',anchorX:3,anchorY:2,anchorX:3,anchorY:2,borderWidth:1,borderColor:'#000',borderRadius:5,bgColor:'#c20007',padding:4,textAlign:'center'
            // }
        }
    ]
    // 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  },
  translateMarker(e){//点击地图任意一个地方
    console.log(e)
    var addersArr=[//定义一个用来存储选中位置的数组，也是用来获取当前位置的
        {
            latitude:'',
            longitude:'',
            iconPath: '../../icons/comment-on.png'
        }
    ]
    //赋值
    addersArr[0].latitude=e.detail.latitude
    addersArr[0].longitude=e.detail.longitude
    //改变默认的坐标值
    this.setData({
        covers:addersArr,
    })
  },
  showModal: function (res) {//点击每个坐标获取其信息
      console.log(res)
  },
})

css： 

page{height:100%;}
.map{height:100%;}
map{width:100%;height:100%;}

json：

{
  "usingComponents": {},
  "navigationBarTitleText": "网站地图"
}