在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制
1.第一步
vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）；
1）npminstallvue-amap--save
2）
importVueAMapfrom‘vue-amap'
Vue.use(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=newAMap.Map('themap',{
resizeEnable:true,
center:[121.716284,29.888144],//这是地图的中心点
zoom:18,//地图的层级
layers:[
newAMap.TileLayer,
this.imageLayer//这是我在地图上绘制自己的图层用的方法，可去掉。
]
});
//引入Marker,绘制点标记
this.marker=newAMap.Marker({
map:this.map,
position:this.firstArr,
icon:pic,//这里是我要的图片
});
//绘制轨迹
this.polyline=newAMap.Polyline({
map:this.map,
path:this.lineArr,//这里是轨迹的坐标拼成的数组
showDir:true,
strokeColor:"#28F",//线颜色
//strokeOpacity:1,//线透明度
strokeWeight:6//线宽
//strokeStyle:"solid"//线样式
});
varpassedPolyline=newAMap.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=newAMap.ImageLayer({
url:tupian,//这里是自己的图片
bounds:newAMap.Bounds(
[121.71105271149695,29.885719370176783],//左下角的坐标
[121.72236765648086,29.891597442759533],//右上角的坐标
),
zooms:[15,18]//这里是在15到18的范围内显示
});
这里要提示一下，放的图片一定要根据地图的方向。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。