关于uniapp 中的高德地图路线规划

uniapp 使用高德地图小程序API
1.需要将小程序js相关文件复制到项目中(amap-wx.js)

2. 修改amap-wx.js 文件
amap-wx.js 不适用于app开发 将文件名及内部代码修改，否则报错！！！
3.相关页面引入和创建地图
引入部分

import amapFile from '../../utils/amap-uni.js'

html部分

<map v-if="isShow"  style="width: 100vw;height: 1000rpx;z-index: 9;" id="navi_map"
:longitude="markers[0].longitude"
:latitude="markers[0].latitude" 
scale="18" :markers="markers" :polyline="polyline">
</map>

变量部分

// markers:[] 这个数组一定要有两个 代表起点和终点的样式和位置
markers: [{iconPath: "../../static/images/start.png", // 起点id: 0,latitude: '',longitude: '',width: 48,height: 48}, {iconPath: "../../static/images/stop.png", // 终点id: 0,latitude: '',longitude: '',width: 48,height: 48}],myAmapFun: '',locations: {} //这个是从其他页面获取的起点终点经纬度对象

方法部分

onLoad() {
// 这次用的只是驾车路线，公交和步行路线一样this.locations = uni.getStorageSync('goLoaction')this.markers[0].latitude = this.locations.upLocation.latitude,this.markers[0].longitude = this.locations.upLocation.longitude,this.markers[1].latitude = this.locations.downLocation.latitude,this.markers[1].longitude = this.locations.downLocation.longitude,
// 上面的所有代码，只有处理从外部获取的起点终点经纬度的作用 下面才是重点var that = this;this.myAmapFun = new amapFile.AMapWX({key: '8659a92a2787b499fb13bd8adb4d422c'});this.myAmapFun.getDrivingRoute({origin: that.locations.upDetail, // 起点经纬度destination: that.locations.downDetail, // 终点经纬度success: function(data) {var points = [];if (data.paths && data.paths[0] && data.paths[0].steps) {var steps = data.paths[0].steps;uni.setStorageSync('polyline', steps)for (var i = 0; i < steps.length; i++) {var poLen = steps[i].polyline.split(';');for (var j = 0; j < poLen.length; j++) {points.push({longitude: parseFloat(poLen[j].split(',')[0]),latitude: parseFloat(poLen[j].split(',')[1])})}}}that.$nextTick(() => {that.polyline = [{ // 绘制路线的样式points: points,color: "#45C677",width: 8,dottedLine: false,arrowLine: true,borderColor: "#fff",borderWidth: 2}]})that.isShow = true// 下面的代码非主要功能，看需求if (data.paths[0] && data.paths[0].distance) {that.distance = data.paths[0].distance + '米'}if (data.taxi_cost) {that.cost = '打车约：' + parseInt(data.taxi_cost) + '元'}},fail: function(info) {}})},

更新 amap-wx.js 修改内容 用时可直接复制

function AMapWX(a) {this.key = a.key, this.requestConfig = {key: a.key,s: "rsx",platform: "WXJS",appname: a.key,sdkversion: "1.2.0",logversion: "2.0"}
}
AMapWX.prototype.getWxLocation = function(a, b) {uni.getLocation({type: "gcj02",success: function(a) {var c = a.longitude + "," + a.latitude;uni.setStorage({key: "userLocation",data: c}), b(c)},fail: function(c) {uni.getStorage({key: "userLocation",success: function(a) {a.data && b(a.data)}}), a.fail({errCode: "0",errMsg: c.errMsg || ""})}})
}, AMapWX.prototype.getRegeo = function(a) {function c(c) {var d = b.requestConfig;uni.request({url: "https://restapi.amap.com/v3/geocode/regeo",data: {key: b.key,location: c,extensions: "all",s: d.s,platform: d.platform,appname: b.key,sdkversion: d.sdkversion,logversion: d.logversion},method: "GET",header: {"content-type": "application/json"},success: function(b) {var d, e, f, g, h, i, j, k, l;b.data.status && "1" == b.data.status ? (d = b.data.regeocode, e = d.addressComponent, f = [], g = "", d && d.roads[0] && d.roads[0].name && (g = d.roads[0].name + "附近"), h = c.split(",")[0], i = c.split(",")[1], d.pois && d.pois[0] && (g = d.pois[0].name + "附近", j = d.pois[0].location, j && (h = parseFloat(j.split(",")[0]), i =parseFloat(j.split(",")[1]))), e.provice && f.push(e.provice), e.city && f.push(e.city), e.district && f.push(e.district), e.streetNumber && e.streetNumber.street && e.streetNumber.number ? (f.push(e.streetNumber.street),f.push(e.streetNumber.number)) : (k = "", d && d.roads[0] && d.roads[0].name && (k = d.roads[0].name), f.push(k)), f = f.join(""), l = [{iconPath: a.iconPath,width: a.iconWidth,height: a.iconHeight,name: f,desc: g,longitude: h,latitude: i,id: 0,regeocodeData: d}], a.success(l)) : a.fail({errCode: b.data.infocode,errMsg: b.data.info})},fail: function(b) {a.fail({errCode: "0",errMsg: b.errMsg || ""})}})}var b = this;a.location ? c(a.location) : b.getWxLocation(a, function(a) {c(a)})
}, AMapWX.prototype.getWeather = function(a) {function d(d) {var e = "base";a.type && "forecast" == a.type && (e = "all"), uni.request({url: "https://restapi.amap.com/v3/weather/weatherInfo",data: {key: b.key,city: d,extensions: e,s: c.s,platform: c.platform,appname: b.key,sdkversion: c.sdkversion,logversion: c.logversion},method: "GET",header: {"content-type": "application/json"},success: function(b) {function c(a) {var b = {city: {text: "城市",data: a.city},weather: {text: "天气",data: a.weather},temperature: {text: "温度",data: a.temperature},winddirection: {text: "风向",data: a.winddirection + "风"},windpower: {text: "风力",data: a.windpower + "级"},humidity: {text: "湿度",data: a.humidity + "%"}};return b}var d, e;b.data.status && "1" == b.data.status ? b.data.lives ? (d = b.data.lives, d && d.length > 0 && (d = d[0], e = c(d), e["liveData"] = d, a.success(e))) : b.data.forecasts && b.data.forecasts[0] && a.success({forecast: b.data.forecasts[0]}) : a.fail({errCode: b.data.infocode,errMsg: b.data.info})},fail: function(b) {a.fail({errCode: "0",errMsg: b.errMsg || ""})}})}function e(e) {uni.request({url: "https://restapi.amap.com/v3/geocode/regeo",data: {key: b.key,location: e,extensions: "all",s: c.s,platform: c.platform,appname: b.key,sdkversion: c.sdkversion,logversion: c.logversion},method: "GET",header: {"content-type": "application/json"},success: function(b) {var c, e;b.data.status && "1" == b.data.status ? (e = b.data.regeocode, e.addressComponent ? c = e.addressComponent.adcode :e.aois && e.aois.length > 0 && (c = e.aois[0].adcode), d(c)) : a.fail({errCode: b.data.infocode,errMsg: b.data.info})},fail: function(b) {a.fail({errCode: "0",errMsg: b.errMsg || ""})}})}var b = this,c = b.requestConfig;a.city ? d(a.city) : b.getWxLocation(a, function(a) {e(a)})
}, AMapWX.prototype.getPoiAround = function(a) {function d(d) {var e = {key: b.key,location: d,s: c.s,platform: c.platform,appname: b.key,sdkversion: c.sdkversion,logversion: c.logversion};a.querytypes && (e["types"] = a.querytypes), a.querykeywords && (e["keywords"] = a.querykeywords), uni.request({url: "https://restapi.amap.com/v3/place/around",data: e,method: "GET",header: {"content-type": "application/json"},success: function(b) {var c, d, e, f;if (b.data.status && "1" == b.data.status) {if (b = b.data, b && b.pois) {for (c = [], d = 0; d < b.pois.length; d++) e = 0 == d ? a.iconPathSelected : a.iconPath, c.push({latitude: parseFloat(b.pois[d].location.split(",")[1]),longitude: parseFloat(b.pois[d].location.split(",")[0]),iconPath: e,width: 22,height: 32,id: d,name: b.pois[d].name,address: b.pois[d].address});f = {markers: c,poisData: b.pois}, a.success(f)}} else a.fail({errCode: b.data.infocode,errMsg: b.data.info})},fail: function(b) {a.fail({errCode: "0",errMsg: b.errMsg || ""})}})}var b = this,c = b.requestConfig;a.location ? d(a.location) : b.getWxLocation(a, function(a) {d(a)})
}, AMapWX.prototype.getStaticmap = function(a) {function f(b) {c.push("location=" + b), a.zoom && c.push("zoom=" + a.zoom), a.size && c.push("size=" + a.size), a.scale && c.push("scale=" + a.scale), a.markers && c.push("markers=" + a.markers), a.labels && c.push("labels=" + a.labels), a.paths &&c.push("paths=" + a.paths), a.traffic && c.push("traffic=" + a.traffic);var e = d + c.join("&");a.success({url: e})}var e, b = this,c = [],d = "https://restapi.amap.com/v3/staticmap?";c.push("key=" + b.key), e = b.requestConfig, c.push("s=" + e.s), c.push("platform=" + e.platform), c.push("appname=" +e.appname), c.push("sdkversion=" + e.sdkversion), c.push("logversion=" + e.logversion), a.location ? f(a.location) :b.getWxLocation(a, function(a) {f(a)})
}, AMapWX.prototype.getInputtips = function(a) {var b = this,c = b.requestConfig,d = {key: b.key,s: c.s,platform: c.platform,appname: b.key,sdkversion: c.sdkversion,logversion: c.logversion};a.location && (d["location"] = a.location), a.keywords && (d["keywords"] = a.keywords), a.type && (d["type"] = a.type),a.city && (d["city"] = a.city), a.citylimit && (d["citylimit"] = a.citylimit), uni.request({url: "https://restapi.amap.com/v3/assistant/inputtips",data: d,method: "GET",header: {"content-type": "application/json"},success: function(b) {b && b.data && b.data.tips && a.success({tips: b.data.tips})},fail: function(b) {a.fail({errCode: "0",errMsg: b.errMsg || ""})}})
}, AMapWX.prototype.getDrivingRoute = function(a) {var b = this,c = b.requestConfig,d = {key: b.key,s: c.s,platform: c.platform,appname: b.key,sdkversion: c.sdkversion,logversion: c.logversion};a.origin && (d["origin"] = a.origin),a.destination && (d["destination"] = a.destination),a.strategy && (d["strategy"] = a.strategy),a.waypoints && (d["waypoints"] = a.waypoints),a.avoidpolygons && (d["avoidpolygons"] = a.avoidpolygons),a.avoidroad && (d["avoidroad"] = a.avoidroad),uni.request({url: "https://restapi.amap.com/v3/direction/driving",data: d,method: "GET",header: {"content-type": "application/json"},success: function(b) {b && b.data && b.data.route && a.success({paths: b.data.route.paths,taxi_cost: b.data.route.taxi_cost || ""})},fail: function(b) {a.fail({errCode: "0",errMsg: b.errMsg || ""})}})
}, AMapWX.prototype.getWalkingRoute = function(a) {var b = this,c = b.requestConfig,d = {key: b.key,s: c.s,platform: c.platform,appname: b.key,sdkversion: c.sdkversion,logversion: c.logversion};a.origin && (d["origin"] = a.origin), a.destination && (d["destination"] = a.destination), uni.request({url: "https://restapi.amap.com/v3/direction/walking",data: d,method: "GET",header: {"content-type": "application/json"},success: function(b) {// console.log(b,'12')b && b.data && b.data.route && a.success({paths: b.data.route.paths})},fail: function(b) {// console.log(b,'24')a.fail({errCode: "0",errMsg: b.errMsg || ""})}})
}, AMapWX.prototype.getTransitRoute = function(a) {var b = this,c = b.requestConfig,d = {key: b.key,s: c.s,platform: c.platform,appname: b.key,sdkversion: c.sdkversion,logversion: c.logversion};a.origin && (d["origin"] = a.origin), a.destination && (d["destination"] = a.destination), a.strategy && (d["strategy"] = a.strategy), a.city && (d["city"] = a.city), a.cityd && (d["cityd"] = a.cityd), uni.request({url: "https://restapi.amap.com/v3/direction/transit/integrated",data: d,method: "GET",header: {"content-type": "application/json"},success: function(b) {if (b && b.data && b.data.route) {var c = b.data.route;a.success({distance: c.distance || "",taxi_cost: c.taxi_cost || "",transits: c.transits})}},fail: function(b) {a.fail({errCode: "0",errMsg: b.errMsg || ""})}})
}, AMapWX.prototype.getRidingRoute = function(a) {var b = this,c = b.requestConfig,d = {key: b.key,s: c.s,platform: c.platform,appname: b.key,sdkversion: c.sdkversion,logversion: c.logversion};a.origin && (d["origin"] = a.origin), a.destination && (d["destination"] = a.destination), uni.request({url: "https://restapi.amap.com/v4/direction/bicycling",data: d,method: "GET",header: {"content-type": "application/json"},success: function(b) {b && b.data && b.data.data && a.success({paths: b.data.data.paths})},fail: function(b) {a.fail({errCode: "0",errMsg: b.errMsg || ""})}})
}, module.exports.AMapWX = AMapWX;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！