地图是我们平时经常用到的组件，而且地图是显示在最高层的原生组件。任何组件都不能遮挡住map的显示，只有特殊的如cover-image等可以显示在地图的上层。

<map id="map" latitude="{{latitude}}" longitude="{{longitude}}" scale="14" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location class="{{map}}">
    <cover-image class="img-map" src="../../images/marker.png"></cover-image>
    <cover-image class="dingwei" src="../../images/dingwei.png" bindtap="clickcontrol"></cover-image>
  </map>

一点一点的来介绍

一.当前的位置

地图最重要的就是定位到我们当前的位置并且标记出来，而小程序的map也提供了对应的内容

latitude="{{latitude}}" longitude="{{longitude}}"

通过这个，将获取到的经纬度绑定到map组件中即可显示当前的位置。

如何获取当前的位置呢？接着介绍。

微信小程序获取经纬度非常简单，在小程序后台启动腾讯位置服务，然后在小程序页面的js文件中加入即可

wx.getLocation({
      type: 'gcj02',
      altitude: true, //高精度定位
      //定位成功，更新定位结果
      success: function(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy
       
        that.setData({
          longitude: longitude,
          latitude: latitude,
          speed: speed,
          accuracy: accuracy
        })
     }
})

下面这一长串是啥呢？是我当时需要用到的功能，调用了百度地图的api来获取当前的位置，为什么不用腾讯的呢？其实腾讯的用起来更简单，但是因为数据库内存储的经纬度信息都是百度的，所以就调用了百度的api

 wx.getLocation({
      type: 'gcj02',
      altitude: true, //高精度定位
      //定位成功，更新定位结果
      success: function(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy
        that.setData({
          longitude: longitude,
          latitude: latitude,
          speed: speed,
          accuracy: accuracy
        })
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            console.log(res);
            var add = res.result.address_reference.landmark_l2.title;
            console.log(add)
            that.setData({
              xuanzeweizhi: add,
              dangqianweizhi:add,
              longitude1: longitude,
              latitude1: latitude,
            })
          }
        })
        const url = 'https://api.map.baidu.com/geocoder/v2/';
        const ak = 'ak';
        //小程序的ajax请求需要在后台安全域名配置增加 开发测试中在详情里勾选-不校验合法域名即可
        wx.request({
          url,
          data: {
            ak,
            location: `${res.latitude},${res.longitude}`,
            output: 'json', //格式
          },
          success: function(res) {
            console.log(res);
            if (res.data.status == "0") {
              that.setData({

                city: res.data.result.addressComponent.city,
                region: ['', res.data.result.addressComponent.city, ''],
              });
              wx.hideLoading()
            } else {
              that.setData({
                city: '未知',

              });
              wx.hideLoading()
            }
          }
        })
        
       }，
      //定位失败回调
      fail: function() {
        wx.showToast({
          title: "定位失败",
          icon: "none"
        })
      },

这就是最后的效果，最里面的蓝色圆圈就是当前的位置

二.中心定位标，以及定位到当前位置标志。

对于一些业务需求，比如说选取地点，获取当前选点的位置，我们都需要一个标志在地图中心来指示当前滑动地图所到达的位置。同时也需要一个返回按钮来返回我们自己所处的位置。

<cover-image class="img-map" src="../../images/marker.png"></cover-image>
<cover-image class="dingwei" src="../../images/dingwei.png" bindtap="clickcontrol"></cover-image>

这个cover-image必须放在<map></map>中，cover顾名思义就是覆盖在组件上的image

向上面地图的两个标志其实就是两张图片，然后绑定了事件。

三.特殊标记点的显示

在一些业务需求中，我们也需要在地图上标注出我们业务自己的位置，比如说某个跟我们合作的商店我们需要着重标记出他的位置，又比如停车场的位置。

<map wx:if="{{suggestion.length==0}}" id="map" latitude="{{latitude}}" longitude="{{longitude}}" scale="14" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location class="{{map}}">
    <cover-image class="img-map" src="../../images/marker.png"></cover-image>
    <cover-image class="dingwei" src="../../images/dingwei.png" bindtap="clickcontrol"></cover-image>
  </map>

还是这个代码，注意第一行的makers，这就是显示我们自己标记的。我们需要在js文件中对makers赋值

赋值的数据为：

iconPath="/images/park.png";//标记图标的位置
width=20;
height=28;
longitude
latitude

效果图