vue-amap地图组件上的折线以及高德地图经纬度的引入
1.如何在项目中安装组件
首先在你的项目中打开控制台运行下面的代码
npm install vue-amap --save
然后在项目中的src文件夹里创建一个文件夹plugins，里面创建一个index.vue的文件，用来引入高德UI组件库
这个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-amap地图组件上的折线以及高德地图经纬度的引入 的全部内容， 来源链接： utcz.com/z/379711.html
