准备工作
使用前准备 : 高德地图key
使用插件: vue-amap
1.npm安装vue-amap
npm install vue-amap --save
import AMap from 'vue-amap';
Vue.use(AMap);
AMap.initAMapApiLoader({
key: "自己申请的key",
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 默认高德 sdk 版本为 1.4.4 v: '1.4.4', //这里是vue-amp 的版本号//这里是高德ui组件的版本号3 uiVersion: '1.0' //添加 uiVersion 的脚本版本号 这个很重要!必须要引入
});
3.在自己创建的组件页面使用(这里使用的是,地图 JS API v1.4.15 ;)
不多说上代码:
轨迹器
添加轨迹
起点: {{data.start_point}}
终点: {{data.end_point}}
距离: {{data.distance}}公里
行驶速度:
已添加的线路点:
删除
保 存
返 回
地址:
{{this.infoWindow.contents}}
经度:
纬度:
驾车距离:
{{this.distance}}
驾车时间:
{{this.driving_time}}
保存
import { isSuccess,setStorage,getStorage } from "@/assets/js/utils"
import emap from "@/components/map/emap-line.vue"
export default {
inject: ['reload'],
components:{
emap
},
data () {
return {
center: {},
i: 0,
index: '',
startPath: '',
endPath: '',
wayPath: [],
point: {
lat: '',
lng: ''
},
zoom: 15,
data: {},
search: {
lng: '',
lat: '',
create_time: ''
},
addData: {
pid: '',
points: []
},
infoWindow: {
show: true,
contents: ''
},
options:[1,2,3,4,5,6],
pointData:{
points:[],
// position_count:'',
speed:''
},
distance:'',
driving_time:'',
disabled:false,
end:[],
start:[],
maps:"",
markerNum:0,
marker1:"",
isMap:false
}
},
mounted () {
this.query = this.$route.query;
this.loadList(this.query.pid, this.query.type);
this.pointData.pid = this.query.pid
},
watch: {
// this.$refs.emp.waypoints:function(){
// }
},
methods: {
//初始化地图
init(){
let map = new AMap.Map('map-location', {//'map-location'是对应页面盒子的id
resizeEnable: true, //自适应大小
zoom: 15//初始视窗
});
this.maps =map
//调用驾车规划功能
AMap.plugin('AMap.Driving',()=> {
var driving = new AMap.Driving({
// 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
policy: AMap.DrivingPolicy.LEAST_TIME,
map:this.map //绑定地图组件
})
//构造路线导航类
var driving = new AMap.Driving({
map: map,
// panel: "map-location"
});
//创建搜索的路线 传入要规划的坐标点
driving.search(new AMap.LngLat(this.start[0],this.start[1]), new AMap.LngLat(this.end[0],this.end[1]),{
// waypoints:this.waypoints
}, function(status, result) {
// result 即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
// log.success('绘制驾车路线完成')
} else {
// log.error('获取驾车数据失败:' + result)
}
});
})
this.getPoint(map)
this.marker()
},
getMap(map) {
map.on("click", showInfoClick);
},
// 获取坐标点中文信息方法
Geocoder(lng,lat){
let _this = this
// 地理编码与逆地理编码服务,提供地址与坐标间的相互转换
//可以获取选址的坐标点及文字信息
AMap.plugin('AMap.Geocoder', function() {
var geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
city: '010'
})
var lnglat = [lng, lat] //将传入的坐标点整合成Arr
geocoder.getAddress(lnglat, (status, result)=> {
if (status === 'complete' && result.info === 'OK') {
// result为对应的地理位置详细信息
console.log(result)
// _this.waypoints.push({coord:lnglat,address:result.formattedAddress})
_this.infoWindow.contents=result.formattedAddress //将获取的坐标点记录下来
}
})
})
},
loadList (pid, type) {
api('trajectory.edit.trajectory', { pid: pid }).then(res => {
let data = isSuccess(res)
console.log(res)
this.data = data
this.addData.pid = data.pid
let a = this.data.interval_time
// this.data.interval_time = a.toFixed(2)
this.startPath = data.start_point
this.endPath = data.end_point
this.wayPath = data.points
this.start=[data.start_point_lng,data.start_point_lat]
this.end=[data.end_point_lng,data.end_point_lat]
data.points.forEach(item =>{
// item.address = `${item.province}${item.city}${item.street}`
this.addData.points.push(item)
})
this.addData.points.forEach(item =>{
item.address = `${item.province}${item.city}${item.street}`
})
this.pointData.speed = data.speed
this.init()
})
},
//创建坐标点方法
marker(lng,lat){
if(!lng){
this.addData.points.forEach((item,index)=>{
//点击保存后让地图重新更新,
let markers = new AMap.Marker({
position: [item.lng, item.lat],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
title:'序号: '+(index+1 ) +' '+item.province+item.city+item.district+item.street
});
//将坐标点添加到地图中
this.maps.add(markers)
})
}else{
//这里是如果已经有坐标点,那么直接显示以保存的坐标点
this.maps.remove(this.marker1)
// 点标记显示内容,HTML要素字符串
this.marker1 = new AMap.Marker({
position: [lng,lat],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
});
this.maps.add(this.marker1)
}
},
getPoint (map) {
let _this = this
//地图点击事件
map.on("click", (e) => {
this.distance = ''
this.driving_time = ''
this.infoWindow.contents = ''
this.isMap = true //点击后的数据展示,如果没有点击就显示
//将数据存储
this.search.lng = e.lnglat.getLng()
this.search.lat = e.lnglat.getLat()
this.point.lng = e.lnglat.getLng()
this.point.lat = e.lnglat.getLat()
this.infoWindow.show = true
let lng = e.lnglat.getLng(); //获取经度
let lat = e.lnglat.getLat(); //获取纬度
this.markerNum ++
this.marker(lng,lat) //调用创建左边点方法
_this.Geocoder(lng,lat) //调用获取坐标点中文信息方法
this.pointData.points = []
// if(this.infoWindow.contents){
this.pointData.points.push({
i: this.i,
lat: this.search.lat,
lng: this.search.lng,
address: this.infoWindow.contents
})
// }
api('trajectory.point.time', this.pointData).then(res => {
let data = isSuccess(res)
this.distance = data.points[0].distance
this.driving_time = data.driving_time
this.infoWindow.contents = data.end_address
})
})
},
//编辑
edit (index) {
this.i = index + 1
this.infoWindow.show = true
this.search.lng = this.addData.points[index].lng
this.search.lat = this.addData.points[index].lat
this.search.create_time = this.addData.points[index].create_time
this.point.lng = this.addData.points[index].lng
this.point.lat = this.addData.points[index].lat
this.infoWindow.contents = this.addData.points[index].address
this.distance = this.addData.points[index].distance
this.driving_time = this.addData.points[index].driving_time
console.log(this.addData.points[index])
},
//删除
del (index) {
if (confirm('确认删除?')) {
this.addData.points.splice(index,1)
this.wayPath.splice(index,1)
// this.marker()
this.init()
}
},
//改变经纬度 地址也变
chengeAddress () {
api('waybill.trajectory.address.query', this.search).then(res => {
let data = isSuccess(res)
this.infoWindow.contents = res.msg
})
},
//保存坐标点的方法
save () {
this.isMap =false
if(this.infoWindow.contents){
this.i++
let marker = new AMap.Marker({
position: [ this.search.lng,this.search.lat],
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
});
this.maps.add(marker)
this.addData.points.push({
i: this.i,
lat: this.search.lat,
lng: this.search.lng,
address: this.infoWindow.contents,
distance:this.distance,
driving_time:this.driving_time
})
this.wayPath.push(this.infoWindow.contents)
this.infoWindow.show = false
console.log(this.addData.points)
}
},
submit () {
this.addData.speed = this.pointData.speed
this.disabled = true
api('trajectory.trajectory.point.add', this.addData).then(res => {
let data
alert(res.msg)
if(data = isSuccess(res) ) {
this.$router.go(-1)
}else{
this.disabled = false
}
})
}
}
}
@import "src/assets/sass/mixin";
.bm-view {
width: 100%;
height: 500px;
}
#map-location{
width: 100%;
height: 700px;
}
.info{
position: absolute;
top: 65px;
left: 45px;
z-index: 999999999;
width: 200px;
// height: 270px;
background: #fff;
padding: 15px 10px;
box-sizing: border-box;
border-radius: 20px;
font-size: 15px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.pd5{
padding-bottom: 5px ;
display: flex;
flex-wrap: nowrap;
align-content: center;
}
.amap-icon img{
width: 25px;
height: 34px;
}
效果图: