小程序不支持直接獲取到定位的地點信息，返回的是當前位置的經緯度，如果你需要用到 「逆地址解析」（將指定經緯度轉換為具體地址） 、「關鍵詞輸入提示」等功能，個人建議使用「騰訊位置服務微信小程序JavaScript SDK」，都是騰訊家的，在定位上的精准度要好得多，當然也可以使用百度、高德等小程序 API 服務。
如果你想做成類似 ofo 、mobike 和滴滴打車的效果，這篇文章是你的不二選擇。
先放上一張效果圖：開發工具的效果會差一點，真機上體驗還是不錯的，頂部的提示框的樣式在真機上顯示正常，在小程序開發工具上卻不居中，很傷。
效果圖.gif
因為是公司項目，stone 君只能小心翼翼剔除一些涉及公司隱私的代碼，不過主要的邏輯和思路都是在的，東西不多，但蒼蠅再小也是肉啊 😆。
先貼出 map 標簽 css 代碼，並對其中重要屬性進行說明
<map class='map' id='myMap' longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" show-location="true" markers="{{markers}}" bindmarkertap="bindMakertap" bindcontroltap='controlTap' bindregionchange='regionChange' controls='{{controls}}' bindtap='bindMapTap'> - id ：map 組件的 id，在 wx.createMapContext(mapId, this) 中需要用到
- longitude ：map 組件的中心經度
- latitude：map 組件的中心緯度
- scale：縮放級別，取值范圍為5-18，默認為16
- show-location：顯示帶有方向的當前定位點，即顯示代表當前位置的藍色定位點圖標，另外 mapContext 的 moveToLocation() 方法在官方文檔有着這樣的說明（將地圖中心移動到當前定位點，需要配合map組件的show-location使用）
- markers：標記點用於在地圖上顯示標記的位置，是一個數組對象
- bindmarkertap：點擊 marker 標記點時觸發
- bindcontroltap：點擊控件時觸發
- bindregionchange：拖動地圖觸發
- controls：在地圖上顯示控件，控件不隨着地圖移動，是一個數組對象
- bindtap： 點擊地圖時觸發（拖動地圖時不會觸發點擊）
下面給出我在項目中遇到的問題，以及一些功能的解決方案。
1、map 上無法顯示 view 等標簽
map 上放置常規標簽，在開發工具模擬器上能顯示，在真機卻顯示不出來。
原因：map 組件是由客戶端創建的原生組件，它的層級是最高的，不能通過 z-index 控制層級。
這里有兩個解決方案，為了方便，此處采用微信提供的 cover-view 控件：
//這里是演示圖中頂部提示視圖的部分代碼
<!--頂部提示--> <cover-view class='cover-tip-wrapper' wx:if='{{showTopTip}}' bindtap='showNewMarkerClick'> <cover-image class='tip-bg' src='../../img/tip-bg.png'> </cover-image> <cover-view class='cover-tip-content'> <cover-image class='trumpet-icon' src='../../img/notification.png'> </cover-image> <cover-view class='tip-text'>{{warningText}}</cover-view> <cover-image class='right-arrow' src='../../img/right-arrow.png'></cover-image> </cover-view> </cover-view> 2、怎么定位到某個坐標，並且讓這個經緯度地址處於地圖中心？
中心.png
map 的兩個屬性 longitude 和 latitude 表示當前地圖的中心經緯度，和當前用戶定位的經緯度是兩個概念，並無直接關系，如果我們一直改變此 longitude 和 latitude，地圖的中心是會一直變化的，所以只要利用好了這兩個屬性變量，實現上面的功能是很簡單的
that.setData({ latitude: res.latitude, longitude: res.longitude, }) 3、怎么實現拖動地圖，讓定位圖標一直在地圖中心，並實時獲取中心經緯度？（參考上方 GIF 效果）
//創建中心指針圖標(代碼中具體屬性請參考 demo) that.setData({ controls: [{ id: 1, iconPath: '../../img/center-location.png', position: { left: (windowWidth - controlsWidth) / 2, top: (windowHeight - bottomHeight) / 2 - controlsHeight * 3 / 4, width: controlsWidth, height: controlsHeight }, clickable: true }] }) /** * 拖動地圖回調 */ regionChange: function (res) { var that = this; // 改變中心點位置 if (res.type == "end") { that.getCenterLocation(); } }, /** * 得到中心點坐標 */ getCenterLocation: function () { var that = this; //mapId 就是你在 map 標簽中定義的 id var mapCtx = wx.createMapContext(mapId); mapCtx.getCenterLocation({ success: function (res) { console.log('getCenterLocation----------------------->'); console.log(res); that.updateCenterLocation(res.latitude, res.longitude); that.regeocodingAddress(); that.queryMarkerInfo(); } }) }, 4、如何准確回到當前定位點
//請求當前定位 wx.getLocation({ type: 'gcj02', success: function (res) { that.setData({ latitude: res.latitude, longitude: res.longitude, }) that.moveTolocation(); }, }) /** * 移動到中心點 */ moveTolocation: function () { //mapId 就是你在 map 標簽中定義的 id var mapCtx = wx.createMapContext(mapId); mapCtx.moveToLocation(); }, 5、如何創建 marker 點
markers 是包含一個至多個 marker 點的數組，一個 marker 標記點至少需要包含圖標 iconPath，出現的經度坐標點 longitude，出現的緯度坐標點 latitude，你可以自定義 marker 點的寬高（單位為 px），如果你有點擊 marker 進行邏輯操作的要求，那就一定要為每一個 marker 標記點設置一個唯一的 id，用於在點擊觸發時判斷點擊的是哪一個 marker 點。
//marker 點的格式是這樣的，需要一個 markers: [{ iconPath: "/resources/others.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50 }], //但是更多時候是請求服務器返回 marker 點集合，類似膜拜和 ofo，拖動地圖，改變中心點就會刷新改變周圍的 marker 點，這些點可能是客戶端上傳的，也有可能是膜拜這種車載GPS模塊發送給服務器記錄的。 //大致類似於以下這樣，但是代碼僅供參考 /**
markers: [{
iconPath: "/assets/images/tabbar/map.png",
id: 0,
latitude: 30.8432970000,
longitude: 106.1172390000,
width: 50,
height: 50,
name: "1",
title: "11",
callout: {
content: "呵呵",
fontSize: 14,
bgColor: "#FFF",
borderWidth: 1,
borderColor: "#CCC",
padding: 4,
display: "ALWAYS",
textAlign: "center"
},
// label: {
// x: 24,
// y: 26,
// content: "ooo"
// }
},
{
iconPath: "/assets/images/tabbar/map.png",
id: 1,
latitude: 30.2432960000,
longitude: 106.1172810000,
width: 50,
height: 50,
callout: "ppp"
},
{
// iconPath: "/assets/images/tabbar/map.png",
id: 2,
latitude: 30.4432950000,
longitude: 106.1272610000,
width: 50,
height: 50,
label: "123",
callout: "hhh"
},
],
controls: [{
id: 1,
iconPath: '/image/location-control.png',
position: {
left: 0,
top: 10,
width: 40,
height: 40
},
clickable: true
}],