地图是我们平时经常用到的组件,而且地图是显示在最高层的原生组件。任何组件都不能遮挡住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