微信小程序 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 = thisconst 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地图使用相关推荐

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
微信小程序—map地图实现标记多个位置
前言: 在这里给大家介绍一个地标搜索网站(可精准获取经纬度,备注有介绍): 中国城市列表-卫星地图-地球在线小程序官方地图 map 文档参考小程序官方地图 map 相关 API (地图组件控制) ...
微信小程序map 地图引入配置+腾讯地图地址坐标解析
最终效果一.要实现的功能展示地图. 参考map组件在地图上展示多个店铺. marker标记点用于在地图上显示标记的位置. 点击店铺放大图标,展示选择的店铺信息. 更改选择店铺的标记尺寸大小. 在 ...
微信小程序map地图调用（速学）
目录 wxml文件 js文件 lib下引入qqmap-wx-jssdkjs文件 json文件编译后点击选择地图也可点击真机测试,微信扫码查看 wxml文件 <view><text ...
微信小程序map地图
使用微信小程序实现地图功能 wxml <mapid="myMap"style="width: 100%; height: 300px;"latitude= ...
微信小程序map地图轨迹回放的问题
map地图轨迹回放报FaceTo的错误如果你的轨迹回放报出这个错误,那么你可能和我一样,是在轨迹回放还未结束的时候或者说是还没有到一个点停止的时候就更新了新的位置信息,想让地图重新的渲染并执行. 这 ...
微信小程序map地图的使用
<view><button bindtap="tapLocaltion" wx:if="{{!isShow}}">获取地理定位</ ...
微信小程序map地图白屏不显示标记marker-填坑日记
微信小程序map地图的标记markers好好的,几个月后打开一片空白,真是无语,各种百度,后来发现是height:100%不支持!!!!!改成 height: 1200rpx;就可以了,非常无语 &l ...
基于微信小程序Map标签及高德地图开源方法实现路径导航
微信小程序自带地图map标签,他是基于canvas画图功能进行的地图渲染,同时依赖微信的getlocation获取经纬度,绘制周边地图.地图上可以标点,画线,查看当地地理信息.但是自带的导航功能模块不 ...

微信小程序 map地图使用

以下代码是主要的代码片段

微信小程序 map地图使用相关推荐

最新文章

热门文章