本文实例为大家分享了微信小程序map地图使用的具体实现代码,供大家参考,具体内容如下
以下代码是主要的代码片段
<!-- 地图部分 --> <!-- enable-traffic 显示路况 --> <view class="map_container"> <map id='customerMap' class="map" :longitude='longitude' :latitude='latitude' :scale='scale' :markers='markers' :controls="controls" show-location @markertap="markertap" @updated="updatedmap" @controltap='bindcontroltap'></map> </view>
data(){ return{ latitude:23.140962248, longitude:113.305301124, scale:12, markers:[ {id: '', latitude: 23.140962248, longitude: 113.305301124, iconPath: '../static/select-dw.png',//当前位置图标路径 width: 25, height: 39, }, { latitude: 23.129742, longitude: 113.26754, iconPath: '../static/mark.png',//客户图标路径 width: 28, height: 28, label: { content: '詹俊俊', textAlign: 'center', fontSize: 12 } }] } }, onReady() { this.mapCtx = wx.createMapContext('customerMap') }, methods:{ // 点击标记点 markertap(e) { let { markerId } = e.detail; let item = this.markers.find(v => v.id === markerId); console.log('item', item) uni.openLocation({ latitude: Number(item.latitude), longitude: Number(item.longitude), name: item.label.content, address: item.address, success: function() { console.log('success'); } }); }, // 当地图加载完成后触发 updatedmap() { this.mapUpdated = true; console.log('执行') this.includePoints(); //所有客户显示在视图内 }, // 让标记点在地图可视视野内 includePoints() { const that = this const points = [{ latitude: that.latitude, longitude: that.longitude }]; this.markers.forEach(item => { const obi = { latitude: item.latitude, longitude: item.longitude } points.push(obi) }) this.mapCtx.includePoints({ padding: [80, 50, 80, 50], points }) }, }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- 微信小程序 地图定位简单实例
- 微信小程序 地图(map)实例详解
- 微信小程序中进行地图导航功能的实现方法
- 微信小程序 使用腾讯地图SDK详解及实现步骤
- 微信小程序 高德地图SDK详解及简单实例(源码下载)
- 微信小程序 地图map详解及简单实例
- 微信小程序开发之map地图实现教程
- 微信小程序之获取当前位置经纬度以及地图显示详解
- 微信小程序教程之本地图片上传(leancloud)实例详解
- 微信小程序地图(map)组件点击(tap)获取经纬度的方法
本文由 华域联盟 原创撰写:华域联盟 » 微信小程序map地图使用方法详解
转载请保留出处和原文链接:https://www.cnhackhy.com/83072.htm