一、准备工作
1.创建高德地图所必须的key
首先,你需要在高德开放平台注册你的key,在你注册完账号后,点击控制台
点击管理key
选择微信小程序,名称按要求来
完成后出现一条微信小程序的key,这个后续需要用到
2.下载并安装进uniapp项目并设置域名
可根据官方网站下载微信小程序插件
在你的小程序域名配置中加入高德地图的安全域名
可根据官网第五步进行设置
二、代码内容
<template> <view class="map"> <map id="map_container" :latitude="latitude" :longitude="longitude" scale="11" :markers="markers" :polyline="polyline" :show-location="true" @markertap="markertap" @updated='mapUpdated' @tap='closeMapMarker'></map> </view></template><script>import amap from "../../libs/amap-wx.130.js";export default { data() { return { key: "c87827f15aec3e5d2c63cd41951d88c1", amapPlugin: null, latitude: 23.130061, longitude: 113.264499, mapInfo: [], markers: [ { iconPath: "../../static/c1.png", id: 0, latitude: 39.989643, longitude: 116.481028, width: 23, height: 33 }, { iconPath: "../../static/c2.png", id: 0, latitude: 39.90816, longitude: 116.434446, width: 24, height: 34 } ], distance: "", cost: "", polyline: [] }; }, onLoad() { this.amapPlugin = new amap.AMapWX({ key: this.key //该key 是在高德中申请的微信小程序key }); this.amapPlugin.getRegeo({ type: "gcj02", //map 组件使用的经纬度是国测局坐标, type 为 gcj02 success: function(res) { console.log(res); const latitude = res[0].latitude; const longitude = res[0].longitude; this.longitude = longitude; this.latitude = latitude; this.mapInfo = res[0]; }, fail: res => { console.log(res); } }); this.amapPlugin.getDrivingRoute({ origin: "116.481028,39.989643", destination: "116.434446,39.90816", success: data => { console.log(data); const points = []; if (data.paths && data.paths[0] && data.paths[0].steps) { const steps = data.paths[0].steps; for (let i = 0; i < steps.length; i++) { const poLen = steps[i].polyline.split(";"); for (let j = 0; j < poLen.length; j++) { points.push({ longitude: parseFloat(poLen[j].split(",")[0]), latitude: parseFloat(poLen[j].split(",")[1]) }); } } } this.polyline = [ { points, color: "#0091ff", width: 6 } ]; if (data.paths[0] && data.paths[0].distance) { this.distance = data.paths[0].distance + "米"; } if (data.taxi_cost) { this.cost = "打车约" + parseInt(data.taxi_cost) + "元"; } // 添加路线信息到 markers 数组中 this.markers.push({ id: 1, latitude: points[0].latitude, longitude: points[0].longitude, width: 23, height: 33, iconPath: "../../static/c1.png", type: "polyline", polyline: { points: points, color: "#0091ff", width: 6 } }); this.markers.push({ id: 2, latitude: points[points.length - 1].latitude, longitude: points[points.length - 1].longitude, width: 23, height: 33, iconPath: "../../static/c2.png" }); }, fail: info => { // 失败处理 } }); }, methods: { markertap() {}, mapUpdated() {}, closeMapMarker() {} }};</script><style lang="scss">.map { position: absolute; top: 0; bottom: 0; left: 0; right: 0;}#map_container { width: 100%; height: 100%;}</style>
此内容可获取到当前手机定位信息,以及上述固定两个经纬度地点的一个路线绘制,在返回的信息中有详细信息可供使用,还需其他方法可前往高德开放平台查询相关API