> 本例采用高德地图，其他地图类型 [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