前言
本文中描述某一页面的文档用 page.js/json/wxml/wxss 表示。
地图全屏显示
-
地图横版显示
在map_page.wxml 中写入:
<view>
<map id="map" longitude='113.324520' latitude='23.099994' scale="14" style="height: 100%;width: {{width}}px;"></map>
</view>
-
地图竖版(全屏)显示
在map_page.wxml 中写入:
<view>
<map id="map" longitude='113.324520' latitude='23.099994' scale="14" markers='{{markers}}' bindmarkertap="markertap" bindregi"regionchange" show-location style="width: 100%;height: {{height}}px;" show-compass="false"></map>
</view>
在page.js 中写入:
onLoad: function(options) {
var that = this
wx.getSystemInfo({
success: function(res) {
that.setData({
height: res.windowHeight
})
},
})
},
获得用户当前的位置
这里得到的位置,指的是用户当前的latitude 和 longitude 。
这里使用的API是wx.getLocation()
在page.js 中写入:
onLoad: function(options) {
let that = this
wx.getLocation({
type: 'wgs84',
success(res) {
const latitude = res.latitude
const longitude = res.longitude
that.setData({
latitude:res.latitude,
longitude:res.longitude
})
},
})
},
这之后即可以在page.wxml 文件中直接使用 {{longitude}} 和 {{latitude}} 了。
譬如,
<text>{{longitude}}</text>
或者直接传到map中,反馈到之前的地图上,
<view>
<map id="map" longitude='{{longitude}}' latitude='{{latitude}}' scale="14" markers='{{markers}}' bindmarkertap="markertap" bindregi"regionchange" show-location style="width: 100%;height: {{height}}px;" show-compass="false"></map>
</view>
结果展示
|
请发表评论