先上效果图：

原由(必看)：

本来微信小程序的map 里面的 controls控件可以轻松实现，但是官方说要废弃了，说采用 cover-view代替，其实就是一个点击事件。用不用cover-view 都可以的。被误导了一个多小时。

用的是就是这一个函数

  moveTolocation: function () {var mapCtx = wx.createMapContext(mapId); //wxml中map标签的id值mapCtx.moveToLocation();}

下面是全部的代码

xwml中

 /** map  注意： 这里map的Id 特别重要 **/<map id="myMap" style="width: 100%; height: 800px;" latitude="{{latitude}}"   longitude="{{longitude}}" markers="{{markers}}" show-location="true" show-compass="true" bindmarkertap="getMarkers" wx:if="{{hasMaekers}}" bindcallouttap="getCallOut"></map>/** 这个就是地图上图标的代码 用不用 cover-view  都行的   设置了一个绑定事件 moveTolocation **/<view class="viewlistd"  bindtap="moveTolocation"><view class="viewlistblock" style="background:none;"><view class="viewlittle" style="padding:0;"><image src="../images/mb@2x.png" mode="" class="" id="" style="width:120rpx;height:120rpx;"></image></view></view>
</view>

js中

Page({/*** 页面的初始数据*/data: {mapId: "myMap" //wxml中的map的Id值},/*** 跳转到当前的位置*/moveTolocation: function () {//mapId 就是你在 map 标签中定义的 idlet Id = this.data.mapIdvar mapCtx = wx.createMapContext(Id);mapCtx.moveToLocation();}})

这个文章map总结很好很受教，总结帖出来

https://www.jianshu.com/p/5b2f95a16fce

微信小程序 map 点击图标回到自己的位置（不使用controls控件）相关推荐

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
iconpath 微信小程序_【报Bug】微信小程序 map 标记点iconPath图标苹果手机不能单个设置了。以前没有问题。现在不知道为啥不行了...
产品分类: uniapp/小程序/微信 PC开发环境操作系统: Windows PC开发环境操作系统版本号: win7 HBuilderX类型: 正式 HBuilderX版本号: 3.0.3 第三方开 ...
【微信小程序】点击图标跳转页面
点击图标跳转页面 wxml文件 <view class="flex-row list-item"><image bindtap="gotoxinlv&q ...
微信小程序 uniapp 点击获取用户实时当前位置进行定位
步骤一:该函数(authorization)是用来触发获取为信用户当前位置(getWxLocation)和用户位置授权(toSetting)的: async authorization() {let ...
使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
基于微信小程序Map标签及高德地图开源方法实现路径导航
微信小程序自带地图map标签,他是基于canvas画图功能进行的地图渲染,同时依赖微信的getlocation获取经纬度,绘制周边地图.地图上可以标点,画线,查看当地地理信息.但是自带的导航功能模块不 ...
微信小程序—map地图实现标记多个位置
前言: 在这里给大家介绍一个地标搜索网站(可精准获取经纬度,备注有介绍): 中国城市列表-卫星地图-地球在线小程序官方地图 map 文档参考小程序官方地图 map 相关 API (地图组件控制) ...
微信小程序----map组件实现检索【定位位置】周边的POI
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显 ...
微信小程序-如何使用icon图标
原微信小程序使用字体图标 2017年07月03日 19:29:09 阅读数:24209 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图 ...

微信小程序 map 点击图标回到自己的位置（不使用controls控件）

原由(必看)：

用的是就是这一个函数

下面是全部的代码

微信小程序 map 点击图标回到自己的位置（不使用controls控件）相关推荐

最新文章

热门文章