老规矩,先看效果图
可以在地图上显示店铺位置,地址,联系方式
点击位置可以调起导航功能
第一步,获取经纬度
因为小程序内置的是腾讯地图,所以你需要到腾讯地图上查询经纬度。
首先,你要明确一个事情,任何位置都有它的 经纬度 ,所以你首先要获取到你想定位位置的经纬度。
腾讯地图经纬度查询:https://lbs.qq.com/tool/getpoint/index.html
如我这里的经纬度:30.353351,120.231010
要记住纬度在前,经度在后。所以我这里的纬度是30.353351,经度是120.231010
第二步,设置wxml页面
我先把代码截个图出来。
然后把代码贴出来给到大家
<map style="width:100%; height:700rpx;" longitude="{{longitude}}" latitude="{{latitude}}" scale="17"
markers="{{markers}}" bindmarkertap="navRoad" data-marker="{{markers[0]}}"
show-location />
<view class="phone" bindtap="Call">
地址:杭州市丁兰广场C座
</view>
<view class="phone" bindtap="Call">
电话:2501902696(可点击拨打)
</view>
这里我们用到了小程序的map组件来显示地图,可以直接设置经纬度和标记点。
第三步,编写js代码
我先把代码截图贴出来给到大家
然后把代码给到大家
Page({
data: {
//店铺经纬度
latitude: 30.353351,
longitude: 120.231010,
//标记点
markers: [{
id: 0,
name: "编程小石头",
address: "杭州市丁兰广场C座",
latitude: 30.353351,
longitude: 120.231010,
width: 50,
height: 50
}]
},
//拨打电话
Call() {
wx.makePhoneCall({
phoneNumber: '2501902696'
})
},
//导航
navRoad(event) {
console.log(event)
wx.getLocation({ //获取当前经纬度
type: 'wgs84', //返回可以用于wx.openLocation的经纬度,
success: function (res) {
wx.openLocation({ //使用微信内置地图查看位置。
latitude: event.currentTarget.dataset.marker.latitude, //要去的纬度-地址
longitude: event.currentTarget.dataset.marker.longitude, //要去的经度-地址
name: event.currentTarget.dataset.marker.name,
address: event.currentTarget.dataset.marker.address
})
}
})
}
})
这里其实就点击导航事件比较麻烦些,其他的都还好。注释里给大家标的很清楚了。
第四步,设置定位权限
到这里其实代码已经完成了,但是我们导航的时候需要用到用户的位置权限,所以我们要在app.json里设置用户授权
如果不设置,点击导航会有如下提示。
所以我们要在app.json里设置
"permission": {
"scope.userLocation": {
"desc": "导航需要"
}
},
到这里我们就可以很方便的让用户找到我们了。