投稿
  1. 凯小白的博客小站首页
  2. 微信小程序

微信小程序地图上显示图片，显示定位标记

程序员凯小白 • • 微信小程序 • 阅读 714

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

<map id="map" latitude="{{latitude}}" longitude="{{longitude}}" scale="14" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" bindregiοnchange="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" bindregiοnchange="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

微信小程序地图上显示图片，显示定位标记

 

原创文章，作者：程序员凯小白，如若转载，请注明出处：http://www.kaixiaobai.com/archives/624

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
程序员凯小白程序员凯小白
0 0
上一篇 2020年4月20日 pm6:46
下一篇 2020年5月7日 pm1:10

相关推荐

发表评论

登录后才能评论