微信小程序引用 map 地图，显示当前位置

1、定位用到 wx.getLocation 函数，地图使用 map组件，详细教程参照官网；注意事项：在给经度和纬度赋值时，千万不能赋错；

2、先看下效果图：

3、在wxml页面定义map组件，包含 longitude、latitude、markers、scale、

show-location属性，并设置了宽度和高度自适应（由于我设置了page是100%，所以我这里高度设置100%就是自适应容器高度了），代码如下：

wxml:

<view class="" hover-class="none" hover-stop-propagation="false" style="width: 100%; height: 100%;"><map id="map" longitude="{{longitude}}" latitude=" {{latitude}}" markers="{{markers}}" scale="13" show-location style="width: 100%; height: 100%;"></map>{{longitude}}</view>

wxss:

page{height: 100%;
}

js:

Page({data:{longitude: 113.324520,latitude: 23.099994,markers:[{id: 0,iconPath: "../../images/icon_cur_position.png",latitude: 23.099994,longitude: 113.324520,width: 50,height: 50}]},onLoad: function(){var that = this;wx.getLocation({type: "wgs84",success: function(res){var latitude = res.latitude;var longitude = res.longitude;//console.log(res.latitude);
         that.setData({latitude: res.latitude,longitude: res.longitude,markers:[{latitude: res.latitude,longitude: res.longitude}]})}})},onReady: function(){}})

转载于:https://www.cnblogs.com/siyecao2010/p/9476277.html

微信小程序引用 map 地图，显示当前位置相关推荐

微信小程序之map地图规划路线以及显示距离
有个问题:在选择公交路线(包含步行和公交)时,怎么才能让不同的路线显示不同的颜色? ps:有个方式,自己写坐标解压往后的存入新数组.把步行时的数据标注下,有什么简单的方法呢? 自定义函数文件 /*** ...
微信小程序自带地图_微信小程序之map地图
微信小程序地图操作比较简单,api也很少,使用map组件来展示.说到地图,那就先来看基础定位: 定位用到wx.getLocation(OBJECT)函数,代码如下: wx.getLocation({ ...
微信小程序之map地图
微信小程序地图操作比较简单,api也很少,使用map组件来展示.说到地图,那就先来看基础定位: 定位用到wx.getLocation(OBJECT)函数,代码如下: wx.getLocation({t ...
微信小程序，map地图中在底部添加半透明视图布局
最近在学习微信小程序,遇到一个问题,就是需求map上需要添加其他布局,但是map是由客户端创建的原生组件,层级是最高的,研究了好久,发现在map中可以使用cover-view组件,然后进行布局,有关c ...
微信小程序引用Echarts绘图显示模糊解决办法
因为毕设需要,这阵子我一直在研究小程序使用Echarts绘图. 偶然间发现了一个问题,小程序绘制出来的折线图显示非常的模糊(用我自己的话说就是2k显示器看720p电影的感觉). 经过查询找到了相应的解 ...
微信小程序中Map地图组件的使用
常用功能一:绘制地图标记点一个或多个 map.wxml <!-- longitude 经度 latitude 纬度 scale 缩放层级最小5,最大18 markers 地图标记 bindma ...
微信小程序：map地图自动缩放自适应大小
文档: https://developers.weixin.qq.com/miniprogram/dev/api/media/map/wx.createMapContext.html https:// ...
uniapp 微信小程序获取map地图中心的经纬度地理位置
在页面上放置一个map组件 <map id="mapId" ref="mapId" style="width: 750rpx; height:c ...
微信小程序自带地图_微信小程序开发之之地图功能（map）
本文将带你了解微信小程序开发之之地图功能(map),希望本文对大家学微信有所帮助. 主要介绍微信小程序中的地图模块相关功能.基本使用地图组件使用起来也很简单..wxml 1212参数列表及说明如下:除 ...

微信小程序引用 map 地图，显示当前位置

微信小程序引用 map 地图，显示当前位置相关推荐

最新文章

热门文章

微信小程序 引用 map 地图，显示当前位置

微信小程序 引用 map 地图，显示当前位置相关推荐

最新文章

热门文章

微信小程序引用 map 地图，显示当前位置

微信小程序引用 map 地图，显示当前位置相关推荐