在vue中高德地图引入和轨迹的绘制的实现

在vue中⾼德地图引⼊和轨迹的绘制的实现
⾼德地图引⼊和轨迹的绘制
1.第⼀步
vue中使⽤cdn引⼊⾼德地图，并在main.js中进⾏全局配置。

（百度上有⾼德地图引⼊与配置⽅法，这⾥就不详细介绍）；
1） npm install vue-amap --save
2）
import VueAMap from ‘vue-amap'
e(VueAMap);
VueAMap.initAMapApiLoader({
key: ‘********************',//⾃⼰在⾼德地图平台上的key值
plugin: [‘AMap.Autocomplete', ‘AMap.PlaceSearch', ‘AMap.Scale', ‘AMap.OverView', ‘AMap.ToolBar', ‘AMap.MapType', ‘AMap.PolyEditor', ‘AMap.CircleEditor',‘AMap.ControlBar',‘AMap.MouseTool',‘AMap.GeometryUtil',‘AMap.DistrictSearch'],//需要的⾼德地图插// 默认⾼德 sdk 版本为 1.4.4
v: ‘1.4.4',
uiVersion:‘1.0.11'
});
2.第⼆步
//引⼊地图，这时地图已经可以在页⾯上显⽰了。

this.map = new AMap.Map('themap', {
resizeEnable: true,
center:[121.716284,29.888144],//这是地图的中⼼点
zoom: 18,//地图的层级
layers: [
new AMap.TileLayer,
this.imageLayer //这是我在地图上绘制⾃⼰的图层⽤的⽅法，可去掉。

]
});
//引⼊Marker,绘制点标记
this.marker = new AMap.Marker({
map: this.map,
position: this.firstArr,
icon: pic,//这⾥是我要的图⽚
});
//绘制轨迹
this.polyline = new AMap.Polyline({
map: this.map,
path: this.lineArr, // 这⾥是轨迹的坐标拼成的数组
showDir: true,
strokeColor: "#28F", //线颜⾊
// strokeOpacity: 1, //线透明度
strokeWeight: 6 //线宽
// strokeStyle: "solid" //线样式
});
var passedPolyline = new AMap.Polyline({
map: this.map,
strokeColor: "#AF5", //线颜⾊
//path: this.lineArr,
// strokeOpacity: 1, //线透明度
strokeWeight: 6 //线宽
// strokeStyle: "solid" //线样式
});
this.marker.on("moving", function(e) {
passedPolyline.setPath(e.passedPath);
});
this.map.setFitView();//⾃动调整到合适的位置
以上就是轨迹绘制的整个过程
扩展
要想在⾃⼰的地图上绘制图层，可以⽤上⾯⽤到的imageLayer
this.imageLayer = new AMap.ImageLayer({
url:tupian , //这⾥是⾃⼰的图⽚
bounds: new AMap.Bounds(
[121.71105271149695,29.885719370176783],//左下⾓的坐标
[121.72236765648086,29.891597442759533],//右上⾓的坐标
),
zooms: [15, 18] //这⾥是在15到18的范围内显⽰
});
这⾥要提⽰⼀下，放的图⽚⼀定要根据地图的⽅向。

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。