博客概要
就,利用html" title=小程序>小程序的地图map组件实现单点定位并获取当前经纬度,做一个简单的分享~
文章目录
- 博客概要
- 组件map
- 1.运行结果
- 2.代码示例
- 3.元素说明
- 总结
组件map
1.运行结果
![](https://img-blog.csdnimg.cn/20191212221802745.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzg2MzMy,size_16,color_FFFFFF,t_70)
2.代码示例
没给样式代码噢,自己敲~希望读者务必别太懒哈= =
html" title=javascript>javascript"><!-- wxml -->
<map id="map"
latitude="{{latitude}}"
longitude="{{longitude}}"
scale="13"
show-location
>
<cover-view>
<cover-view>
经度:{{longitude}}
</cover-view>
<cover-view>
纬度:{{latitude}}
</cover-view>
</cover-view>
</map>
html" title=javascript>javascript">// js
Page({
data: {
},
onLoad: function () {
var that = this;
wx.getLocation({
type: 'gcj02',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
that.setData({
latitude: latitude,
longitude: longitude,
})
},
})
}
})
3.元素说明
map组件属性
属性 | 说明 |
---|---|
longitude | 中心经度 |
latitude | 中心纬度 |
scale | 缩放级别,取值范围为3-20 |
show-location | 显示带有方向的当前定位点 |
… | … |
- 更多内容点击跳转至官方文档:组件-地图-map
wx.getLocation接口
属性 | 说明 |
---|---|
type | wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 |
success | 接口调用成功的回调函数 |
… | … |
Object res
属性 | 说明 |
---|---|
latitude | 纬度,范围为 -90~90,负数表示南纬 |
longitude | 经度,范围为 -180~180,负数表示西经 |
… | … |
- 更多内容点击跳转至官方文档:API-位置-wx.getLocation
总结
更多细节请务必按照给的链接前去查阅官方文档进一步的学习,本文内容只给出了可以直接实现功能的代码,里面涉及的语法、标签等需要读者自己花点时间去理解,仅供参考噢~