uniapp 使用高德地图 做的一些demo (大杂烩)
vue文件
<template>
<div>
<div id="container" style="width: 100%; height: 300px;"></div>
<div id="panel"></div>
<button @click="Polyline">点击测试</button>
<button @click="graspRoad1">轨迹纠偏</button>
<button @click="polyEditorStart">录入路线开始</button>
<button @click="polyEditorEnd">录入路线结束</button>
<button @click="drivingSearch">搜索路线</button>
<button @click="polyEditorStart2">录入路线开始2</button>
<button @click="polyEditorEnd2">录入路线结束2</button>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
securityJsCode: ''
}
export default {
data() {
return {
map: null,
AMap:null,
graspRoad:null,
polylineEditor:null,
center:[112.5226,32.985824],
initial:[[112.5226,32.985824],[112.5226+0.02,32.985824+0.02]],
manual:[
],
automatic:[
],
spotList:[],
markerList:[]
}
},
mounted(){
this.init();
},
methods: {
init(){
AMapLoader.load({
"key": "", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": ["AMap.GraspRoad","AMap.PolyEditor","AMap.Driving","AMap.DrivingPolicy","AMap.Marker","AMap.LngLat"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map('container',{
zoom:10,
center:[...this.center]
});
this.AMap = AMap;
}).catch(e => {
console.log(e);
})
},
Polyline(){
var pathParam = [
{"x":116.478928,"y":39.997761,"sp":19,"ag":0, "tm":1478031031},
{"x":116.478907,"y":39.998422,"sp":10,"ag":0, "tm":2},
{"x":116.479384,"y":39.998546,"sp":10,"ag":110,"tm":3},
{"x":116.481053,"y":39.998204,"sp":10,"ag":120,"tm":4},
{"x":116.481793,"y":39.997868,"sp":10,"ag":120,"tm":5},
{"x":116.482898,"y":39.998217,"sp":10,"ag":30, "tm":6},
{"x":116.483789,"y":39.999063,"sp":10,"ag":30, "tm":7},
{"x":116.484674,"y":39.999844,"sp":10,"ag":30, "tm":8}]
var path1 = [];
for(var i=0;i<pathParam.length;i+=1){
path1.push([pathParam[i].x,pathParam[i].y])
}
var path2 =[[116.379742,39.865566],[116.380475,39.864787],[116.380475,39.864787],[116.381129,39.864798],[116.381129,39.864798],[116.387448,39.865125],[116.38762,39.865227],[116.387958,39.870554],[116.387958,39.870554],[116.39609,39.871369],[116.39609,39.871369],[116.444134,39.895144],[116.444134,39.895144],[116.440283,39.899366],[116.440283,39.899366],[116.419667,39.901158],[116.419667,39.901158],[116.420724,39.901791],[116.420724,39.901791],[116.427065,39.904977],[116.427236,39.904923],[116.428905,39.904907],[116.428905,39.904907],[116.428942,39.903293],[116.428942,39.903293],[116.427298,39.903233]];
let AMap = this.AMap;
var oldLine = new AMap.Polyline({
path:path2,
strokeWeight:8,
strokeOpacity:1,
strokeColor:'red'
})
oldLine.setMap(this.map);
},
graspRoad1(){
var pathParam = [
{"x":116.478928,"y":39.997761,"sp":0,"ag":0, "tm":1478031031},
{"x":116.478907,"y":39.998422,"sp":0,"ag":0, "tm":2},
{"x":116.479384,"y":39.998546,"sp":0,"ag":0,"tm":3},
{"x":116.481053,"y":39.998204,"sp":0,"ag":0,"tm":4},
{"x":116.481793,"y":39.997868,"sp":0,"ag":0,"tm":5},
{"x":116.482898,"y":39.998217,"sp":0,"ag":0, "tm":6},
{"x":116.483789,"y":39.999063,"sp":0,"ag":0, "tm":7},
{"x":116.484674,"y":39.999844,"sp":0,"ag":0, "tm":8}]
let AMap = this.AMap;
var thih = this;
this.graspRoad = new AMap.GraspRoad()
this.graspRoad.driving(pathParam,function(error,result){
if(!error){
var path2 = [];
var newPath = result.data.points;
for(var i =0;i<newPath.length;i+=1){
path2.push([newPath[i].x,newPath[i].y])
}
var newLine = new AMap.Polyline({
path:path2,
strokeWeight:8,
strokeOpacity:0.8,
strokeColor:'#0091ea',
showDir:true
})
newLine.setMap(thih.map);
}
})
},
polyEditorStart(){
let AMap = this.AMap;
var thih = this;
var polyline = new AMap.Polyline({
path:thih.initial,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 6,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
});
this.polylineEditor = new AMap.PolyEditor(thih.map,polyline);
this.polylineEditor.open();
this.polylineEditor.on("end", function (event) {
let pointArr = event.target.getPath();
console.log(pointArr)
for(var i=0;i<pointArr.length;i++){
if(i==0){
thih.manual.push({"x":pointArr[i].getLng(),"y":pointArr[i].getLat(),"sp":1,"ag":100, "tm": 1478031031});
}else{
thih.manual.push({"x":pointArr[i].getLng(),"y":pointArr[i].getLat(),"sp":1,"ag":100, "tm":i+1});
}
}
console.log(thih.manual)
var path1 = [];
for(var i=0;i<thih.manual.length;i+=1){
path1.push([thih.manual[i].x,thih.manual[i].y])
}
var oldLine = new AMap.Polyline({
path:path1,
strokeWeight:8,
strokeOpacity:1,
strokeColor:'red'
})
oldLine.setMap(thih.map);
var pathParam = [
{"x":112.510912,"y":32.977835,"sp":0,"ag":0, "tm":1478031031},
{"x":112.505111,"y":32.960961,"sp":0,"ag":0, "tm":2},
{"x":112.532081,"y":32.952524,"sp":0,"ag":0,"tm":3},
{"x":112.564245,"y":32.950625,"sp":0,"ag":0,"tm":4}
]
var pathParam1 = thih.sort(thih.manual);
this.graspRoad = new AMap.GraspRoad()
this.graspRoad.driving(pathParam1,function(error,result){
if(!error){
var path2 = [];
var newPath = result.data.points;
for(var i =0;i<newPath.length;i+=1){
path2.push([newPath[i].x,newPath[i].y])
}
var newLine = new AMap.Polyline({
path:path2,
strokeWeight:8,
strokeOpacity:0.8,
strokeColor:'#0091ea',
showDir:true
})
newLine.setMap(thih.map);
}
})
});
/* var thih = this;
var polyline = new AMap.Polyline({
map: thih.map,
path:thih.initial,
strokeWeight:8,
strokeOpacity:0.8,
strokeColor:'#0091ea',
showDir:true
});
this.editorObj = new AMap.PolylineEditor(thih.map,polyline)
this.editorObj.setTarget(this.flowRiver)
this.editorObj.open() */
},
polyEditorEnd(){
this.polylineEditor.close();
/* this.editorObj.close()
console.log(this.flowRiver)*/
},
drivingSearch(){
let AMap = this.AMap;
var thih = this;
var drivingOption = {
policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
ferry: 1, // 是否可以使用轮渡
province: '京', // 车牌省份的汉字缩写
map: thih.map,
panel: 'panel'
}
// 构造路线导航类
var driving = new AMap.Driving(drivingOption)
// 根据起终点经纬度规划驾车导航路线
driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {
// result 即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
var steps= result.routes[0].steps;
var dian=[];
for(var i =0;i<steps.length;i++){
var yijie=steps[i].path;
/* for(var j =0;j<yijie.length;j++){
var path=yijie[j];
dian.push([path.getLng(),path.getLat()]);
} */
dian.push([yijie[0].getLng(),yijie[0].getLat()]);
dian.push([yijie[yijie.length-1].getLng(),yijie[yijie.length-1].getLat()]);
}
console.log(result)
console.log(JSON.stringify(dian))
} else {
log.error('获取驾车数据失败:' + result)
}
});
},
sort(data){
//alert(data);
var x=[];
for (var i=0;i<data.length;i++) {
x.push(data[i]["x"]);
}
x.sort();
var rdate=[];
for (var i=0;i<x.length;i++) {
var xx=x[i];
for (var j=0;j<data.length;j++) {
if(data[j]["x"] ==xx ){
if(i==0){
data[j]['tm']=new Date().getTime();
}else{
data[j]['tm'] = i;
}
rdate.push(data[j]);
break;
}
}
}
console.log(JSON.stringify(rdate))
return rdate;
},
polyEditorStart2(){
var thih = this;
this.map.on('click', function(ev) {
var lnglat = ev.lnglat;
console.log(JSON.stringify(lnglat))
thih.spotList.push([lnglat.getLng(),lnglat.getLat()]);
var marker = new AMap.Marker({
position: [lnglat.getLng(),lnglat.getLat()], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: "无效"
});
marker.setExtData({num:thih.spotList.length});
marker.setContent(thih.spotList.length);
marker.setMap(thih.map);
marker.on('click', function(ev) {
//获取点击的点标记是几
var num=ev.target.getExtData().num;
//删除几以后的点,重新选择路线
var data=[];
var data1=[];
for (var i=0;i<thih.spotList.length;i++) {
//只保留逻辑未删除的
if(i < num-1){
data.push(thih.spotList[i]);
data1.push(thih.markerList[i]);
}else{
thih.markerList[i].remove(thih.map);
}
}
thih.spotList = data;
thih.markerList = data1;
});
thih.markerList.push(marker);
});
},
polyEditorEnd2(){
var thih = this;
var data=this.spotList;
let AMap = this.AMap;
var oldLine = new AMap.Polyline({
path:data,
strokeWeight:8,
strokeOpacity:1,
strokeColor:'red'
})
oldLine.setMap(this.map);
var data1=[];
for(var i=0;i<data.length;i++){
if(i==0){
data1.push({"x":data[i][0],"y":data[i][1],"sp":10,"ag":90, "tm": new Date().getTime()});
}else{
data1.push({"x":data[i][0],"y":data[i][1],"sp":10,"ag":90, "tm":i+1});
}
}
console.log(JSON.stringify(data1))
var path2=this.graspRoad2(data1);
},
graspRoad2(pdata){
var thih = this;
let AMap = this.AMap;
this.graspRoad = new AMap.GraspRoad()
this.graspRoad.driving(pdata,function(error,result){
if(!error){
var path2 = [];
var newPath = result.data.points;
for(var i =0;i<newPath.length;i+=1){
path2.push([newPath[i].x,newPath[i].y])
}
//return path2;
console.log(JSON.stringify(path2))
var newLine = new AMap.Polyline({
path:path2,
strokeWeight:8,
strokeOpacity:0.8,
strokeColor:'#0091ea',
showDir:true
})
newLine.setMap(thih.map);
}
})
}
}
}
</script>
<style>
</style>