老規(guī)矩，先看效果圖

可以在地圖上顯示店鋪位置，地址，聯(lián)系方式

點擊位置可以調(diào)起導(dǎo)航功能

第一步，獲取經(jīng)緯度

因為小程序內(nèi)置的是騰訊地圖，所以你需要到騰訊地圖上查詢經(jīng)緯度。 首先，你要明確一個事情，任何位置都有它的 經(jīng)緯度 ，所以你首先要獲取到你想定位位置的經(jīng)緯度。

騰訊地圖經(jīng)緯度查詢：https://lbs.qq.com/tool/getpoint/index.html

如我這里的經(jīng)緯度：30.353351,120.231010 要記住緯度在前，經(jīng)度在后。所以我這里的緯度是30.353351，經(jīng)度是120.231010

第二步，設(shè)置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"> ?電話：****(可點擊撥打) </view>

這里我們用到了小程序的map組件來顯示地圖，可以直接設(shè)置經(jīng)緯度和標記點。

第三步，編寫js代碼

我先把代碼截圖貼出來給到大家

然后把代碼給到大家

Page({ ?data: { ? ?//店鋪經(jīng)緯度 ? ?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' ? ?}) ?}, ?//導(dǎo)航 ?navRoad(event) { ? ?console.log(event) ? ?wx.getLocation({ //獲取當(dāng)前經(jīng)緯度 ? ? ?type: 'wgs84', //返回可以用于wx.openLocation的經(jīng)緯度， ? ? ?success: function (res) { ? ? ? ?wx.openLocation({ //使用微信內(nèi)置地圖查看位置。 ? ? ? ? ?latitude: event.currentTarget.dataset.marker.latitude, //要去的緯度-地址 ? ? ? ? ?longitude: event.currentTarget.dataset.marker.longitude, //要去的經(jīng)度-地址 ? ? ? ? ?name: event.currentTarget.dataset.marker.name, ? ? ? ? ?address: event.currentTarget.dataset.marker.address ? ? ? ?}) ? ? ?} ? ?}) ?} })

這里其實就點擊導(dǎo)航事件比較麻煩些，其他的都還好。注釋里給大家標的很清楚了。

第四步，設(shè)置定位權(quán)限

到這里其實代碼已經(jīng)完成了，但是我們導(dǎo)航的時候需要用到用戶的位置權(quán)限，所以我們要在app.json里設(shè)置用戶授權(quán)

如果不設(shè)置，點擊導(dǎo)航會有如下提示。

所以我們要在app.json里設(shè)置

"permission": { ? ?"scope.userLocation": { ? ? ?"desc": "導(dǎo)航需要" ? ?} ?},

到這里我們就可以很方便的讓用戶找到我們了。