> 本例采用高德地圖，其他地圖類型 [TOC] ## 獲取高德應用key > key 綁定的服務類型選擇：微信小程序 > 注冊、登錄入口：https://lbs.amap.com/  ## 下載高德微信小程序sdk > 微信小程序sdk，可兼容APP端 > 下載地址：https://lbs.amap.com/api/wx/download  ## 示例代碼 ~~~ <template> <view> <map :latitude="latitude" :longitude="longitude" style="width: 100%;height: 1500rpx;" scale="11" :markers="markers" :show-location="true" @markertap="markertap" @updated="mapUpdated" @tap="closeMapMarker"></map> </view> </template> <script> import amap from "../../static/js/amap-wx.js"; export default { data() { return { // longitude: 104.063402, latitude: 30.568744, mapInfo: [], markers: [], mapKey: "a5e74ea2902fe2ea2eb45vd8798c27cb" } }, created() { console.log("created=============map") }, onLoad() { console.log("onLoad---"); // this.amapPlugin = new amap.AMapWX({ key: this.mapKey //該key 是在高德中申請的微信小程序key }); // 例子1：調用高德API獲取當前地理位置 // 參考API：https://lbs.amap.com/api/wx/reference/core const that = this that.amapPlugin.getRegeo({ type: "gcj02", //map 組件使用的經緯度是國測局坐標， type 為 gcj02 success: function(res) { console.log("map 組件使用的經緯度是國測局坐標， type 為 gcj02") console.log("當前用戶位置："+res[0].name+"，坐標："+res[0].longitude+","+res[0].latitude); console.log(res[0]) const latitude = res[0].latitude; const longitude = res[0].longitude; that.longitude = longitude; that.latitude = latitude; that.mapInfo=res[0]; }, fail: (res) => { console.log(JSON.stringify(res)); } }); // 例子2：調用高德API獲取當前地理位置 // 參考API：https://lbs.amap.com/api/wx/reference/core uni.getLocation({ type: 'wgs84', success: (res) => { that.latitude = res.latitude; that.longitude = res.longitude; }, fail: (err) => { uni.showToast({title: "獲取失敗"}) }, }) that.amapPlugin.getRegeo({ location: '' + that.longitude + ',' + that.latitude + '', //location的格式為'經度,緯度' success: function (e) { let city= e[0].regeocodeData.addressComponent.city; //城市 let province= e[0].regeocodeData.addressComponent.province; //省份 console.log(e[0].regeocodeData.addressComponent); console.log("根據坐標（"+that.longitude+","+that.latitude+"）獲取到相關信息：province"+province+"，city"+city) }, fail: function (info) { console.log("失敗"); }, }); // 增加地圖標注 this.mapMarkers() }, onShow() { console.log("show") }, methods:{ mapMarkers(){ console.log("markers") this.markers = [ { id:1001, longitude: '104.063402', latitude: "30.568744", title: "車享匯加油站", // iconPath: "http://api.myphp.vip/logo.png", iconPath: "/static/logo.png", width: "73rpx", height: "87rpx", callout: { content: "中國石化加油站 686m", color: "#9bf", fontSize: "30rpx", bgColor: "red", padding: "30rpx", }, label: { content: "中國石化加油站 686m", color:"#fff", padding: "10", textAlign: "center", borderColor: "red", bgColor: "#ccc", x: "350px", y: "0", opacity:"0.4" } } ] }, // 點擊標記時觸發 markertap(){ console.log("markertap點擊標記時觸發") }, //mapUpdated mapUpdated(){ console.log("mapUpdated----------在地圖渲染更新完成時觸發") }, // 點擊非marker的地圖部位，會隱藏之前彈出的marker信息 closeMapMarker(){ console.log("closeMapMarker----------點擊地圖時觸發; App-nuve、微信小程序2.9支持返回經緯度") } } } </script> ~~~ 相關文檔： > https://uniapp.dcloud.io/component/map > https://uniapp.dcloud.io/api/location/map?id=createmapcontext