vue-amap地图组件上的折线以及高德地图经纬度的引入
作者：互联网
1.如何在项目中安装组件
首先在你的项目中打开控制台运行下面的代码
npm install vue-amap --save
然后在项目中的src文件夹里创建一个文件夹plugins，里面创建一个index.vue的文件，用来装vue-amap主键的方法
这个index.vue里面这样写:
import Vue from 'vue'
import VueAMap from 'vue-amap'
VueAMap.initAMapApiLoader({
key: 'ea5c57977d76a95e455c43266788****',//这个key是你在高德api中申请的key，其它的上下都一样
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.zoom'],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4',
})
Vue.use(VueAMap)
然后在main.js中引入组件: import '@/plugins'
2.高德api上的经纬度查询（可以根据自己想要的路线描绘，自己有高德的key和路线接口可以跳过）
1.首先登录认证获取key：
https://lbs.amap.com/api/webservice/guide/create-project/get-key
2.然后在官网首页右上角头像点击自定义地图平台
3.然后点击左侧数据中心，我的数据集，点击创建数据库
4.随便输入一个名字，确认创建，创建好了后点名称，进入到地图，
点击绘制线，然后就可以在上面绘制自己想要的路线，绘制好后，点击当前绘制的线，，右侧的侧边栏中点击GeoJSON,里面的经纬度就有了，把一对对的经纬度按顺序放进代码中的path数组
3.实现地图上折线的详细代码
<template>
<div class="gui-ji">
<a @click="$router.back()">调度单管理/轨迹管理</a>
<el-amap vid="amap"
:zoom="zoom"
:center="center"
class="amap-demo">
<el-amap-polyline v-for="prod in polyline"
:key="prod.id"
:editable="prod.editable"
:path="prod.path"
outlineColor='#fff000'
strokeWeight='8'
:events="prod.events"></el-amap-polyline>
</el-amap>
<div class="toolbar">
<button type="button"
name="button"
v-on:click="changeEditable">change editable</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
zoom: 14,
center: [104.065768, 30.657452],
polyline: [
{
id: '1',
path: [//第一条线的经纬度集合
[104.114026, 30.65119],
[104.086022, 30.66433],
[104.074141, 30.645897],
[104.061836, 30.647175],
[104.056745, 30.649365],
[104.054835, 30.69765],
[104.041258, 30.641882],
[104.041046, 30.651738],
[104.041046, 30.651738],
],
events: {//在地图上打点连线的方法
click(e) {
alert('click polyline')
},
end: (e) => {
const newPath = e.target
.getPath()
.map((point) => [point.lng, point.lat])
console.log(newPath)
},
},
editable: false,
},
{
id: '2',
path: [//第二条线的经纬度集合
[104.045351, 30.64361],
[104.044797, 30.643349],
[104.044502, 30.643254],
[104.044123, 30.64312],
[104.0439, 30.643059],
[104.043689, 30.642958],
[104.04346, 30.642849],
[104.043225, 30.642751],
[104.043023, 30.642652],
[104.042878, 30.642587],
[104.042688, 30.642507],
[104.042488, 30.642424],
[104.042131, 30.642265],
[104.041985, 30.642209],
[104.041877, 30.642151],
[104.041747, 30.642092],
[104.041643, 30.64204],
[104.041564, 30.641987],
[104.041464, 30.641938],
[104.04143, 30.641887],
[104.041356, 30.641841],
[104.041355, 30.641762],
[104.041368, 30.641623],
[104.041382, 30.641563],
[104.041399, 30.641477],
[104.041442, 30.641359],
[104.041463, 30.641295],
[104.041525, 30.641206],
[104.041557, 30.641104],
[104.041618, 30.641011],
[104.041723, 30.64086],
[104.04177, 30.640764],
[104.041854, 30.640668],
[104.041919, 30.640581],
[104.041966, 30.640546],
[104.042013, 30.640469],
[104.042078, 30.640399],
[104.042136, 30.640338],
[104.04218, 30.64029],
[104.042303, 30.640162],
[104.042357, 30.640101],
[104.042492, 30.639969],
[104.042579, 30.639895],
[104.042638, 30.639827],
[104.042718, 30.639759],
[104.042794, 30.639681],
[104.042871, 30.639595],
[104.042932, 30.639543],
[104.042991, 30.639488],
[104.043034, 30.639459],
[104.043131, 30.639527],
[104.043206, 30.639567],
[104.043269, 30.639601],
[104.043366, 30.639657],
[104.043508, 30.639791],
[104.043546, 30.639835],
[104.043587, 30.639847],
[104.043609, 30.639824],
[104.043681, 30.639753],
[104.043736, 30.639708],
[104.04379, 30.639662],
[104.043837, 30.639614],
[104.04388, 30.639572],
[104.043877, 30.639572],
],
events: {
click(e) {
alert('click polyline')
},
end: (e) => {
const newPath = e.target
.getPath()
.map((point) => [point.lng, point.lat])
console.log(newPath)
},
},
editable: false,
},
],
}
},
methods: {
changeEditable() {
this.polyline.editable = !this.polyline.editable
},
},
}
</script>
<style lang="less" scoped>
.amap-demo {
height: 500px;
width: 100%;
}
.amap-page-container {
position: relative;
}
#info-window {
width: 211px;
height: 146px;
margin-left: 30px;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.detail {
width: 80%;
height: 24px;
color: #fff;
background-color: #1a73e8;
position: absolute;
bottom: 0;
font-size: 12px;
line-height: 24px;
text-align: center;
cursor: pointer;
}
</style>
里面很多vue-amap的api指令，可以去官方文档看，好像vue-amap的官方文档没有实例，所以找了很久的例子自己才把想要的效果做出来。
放图：
标签：vue,经纬度,point,地图,amap,key,AMap 来源： https://www.cnblogs.com/zxhao/p/zhang_xin_hao.html