微信小程序map组件 markers 展示当前位置修改标记点图标

当前位置展示：

<view><map id="myMap" show-location class="container"  style="width: 100%; height: 800rpx;" />
</view>

onShow: function() {this.mapCtx = wx.createMapContext('myMap')this.mapCtx.moveToLocation()
}

改个标记点的默认样式：

方法一

<view><map id="myMap"  scale="16"  markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location style="width: 100%; height: 400px;"></map>
</view>

Page({data: {markers: [{iconPath: "../../static/images/home/icon.png",longitude:121.45088,latitude:31.25145,id: 0,width: 34,height: 49}]},regionchange(e) {console.log(e)},markertap(e) {console.log(e)},onShow: function () {this.mapCtx = wx.createMapContext('myMap')this.mapCtx.moveToLocation()const lat= "markers[0].latitude";const log= "markers[0].longitude";var that = this;wx.getLocation({type: "wgs84",success: function(res){that.setData({[lat]:res.latitude,[log]:res.longitude})}})}
})

方法二

<view><map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16"  markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location style="width: 100%; height: 400px;"></map>
</view>

Page({data: {longitude:121.45088,latitude:31.25145,markers: [{iconPath: "../../static/images/home/icon.png",longitude:121.45088,latitude:31.25145,id: 0,width: 34,height: 49}]},regionchange(e) {console.log(e)},markertap(e) {console.log(e)},onShow: function () {const lat= "markers[0].latitude";const log= "markers[0].longitude";var that = this;wx.getLocation({type: "wgs84",success: function(res){that.setData({latitude: res.latitude,longitude: res.longitude,[lat]:res.latitude,[log]:res.longitude})}})}
})

微信小程序map组件 markers 展示当前位置修改标记点图标相关推荐

微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
微信小程序--map组件视图无法更新的问题
在使用微信小程序 map组件的时候,会有一个小问题.当出现markers是一个数组,在切换数据的时候,页面会残留上次留下来的markers. 在js中使用setData更新markers数据后,地图上 ...
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
微信小程序----map组件实现检索【定位位置】周边的POI
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显 ...
微信小程序map组件查找周围各种场所(通过腾讯位置服务)
废话不多说,直接写咋实现主要用到了腾讯位置服务里面的微信小程序JavaScript SDK,你得先申请一个开发者密钥,这里就不多说了实现效果如下,这里面是搜索周围的餐厅首先wxml代码 < ...
微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）
效果图实现原理采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city ...
微信小程序map组件点聚合初次使用的坑
有个项目一直有个功能,地图上标注车站,但是点过多时需要点聚合功能,map组件和腾讯地图小程序端并不能实现这个功能,除了webview,好像没有别的办法.终于9月份官方更新了聚合功能,,, 看文档使用方 ...
微信小程序map组件点击不同的marker跳转到不同的页面
"wxml页面" 在map组件中添加触发事件:bindmarkertap="markertap" "js页面" 在data中,为marker ...
微信小程序map组件展示当前位置修改标记点图标
当前位置展示: <view><map id="myMap" show-location class="container" style=&qu ...

微信小程序map组件 markers 展示当前位置修改标记点图标

微信小程序map组件 markers 展示当前位置修改标记点图标相关推荐

最新文章

热门文章