vue 高德地图搜索功能_VUE中使用高德地图做轨迹添加功能,帮助轨迹展示

准备工作

使用前准备 : 高德地图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;

}

效果图: