amap高德地图应用(el-amap-marker坐标点；el-amap-info-window信息窗体；el-amap-polyline折线、折线颜色，宽度、实虚线等)
amap高德地图应用(el-amap-marker坐标点；el-amap-info-window信息窗体；el-amap-polyline折线、折线颜色，宽度、实虚线等)
·
amap高德地图应用(el-amap-marker坐标点；el-amap-info-window信息窗体；el-amap-polyline折线、折线颜色，宽度、实虚线等)
废话不多说，直接看amap组件代码
前提：你已经下载好vue-amap
npm install vue-amap --save
高德地图开发者平台申请好你的key，类似于以下：
在index.html下添加好script标签
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 引入高德地图 -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.Geocoder,AMap.Geolocation,AMap.PolyEditor"></script>
</body>
在main.js里面对amap做好引入
//引入高德地图相关
import AMap from 'vue-amap'//引入高德地图并初始化
Vue.use(AMap)
AMap.initAMapApiLoader({
//集合秘钥key
key:'9dda7871b127d833afdc75274e12ae44',//用你自己的key
//插件集合
plugin:[
"AMap.Autocomplete", //输入提示插件
"AMap.PlaceSearch", //POI搜索插件
"AMap.Scale", //右下角缩略图插件 比例尺
"AMap.OverView", //地图鹰眼插件
"AMap.ToolBar", //地图工具条
"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
"AMap.PolyEditor", //编辑 折线多，边形
"AMap.CircleEditor", //圆形编辑器插件
"AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
]
})
import aMap from './views/components/aMap/index'
Vue.use(aMap);
Vue.component('aMap',aMap)
以上有问题的可自行百度
废话不多说，直接看amap组件代码
<template>
<div class="content">
<div class="aMap-wrapper">
<el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
<!--坐标点-->
<el-amap-marker
v-for="marker in markers"
:position="marker.position"
:key="marker.id"
:events="marker.events"
:icon="marker.icon"
></el-amap-marker>
<!--信息窗体-->
<el-amap-info-window
v-if="window"
:position="window.position"
:visible="window.visible"
:content="window.content"
:offset="window.offset"
></el-amap-info-window>
<!-- 划线-->
<el-amap-polyline
:path="polyline.path"
strokeColor="red"
strokeStyle="solid"
strokeWeight="6"
></el-amap-polyline>
</el-amap>
</div>
</div>
</template>
<script>
import location from '../../../assets/image/subway.png'
//起点标
import subwaybegin from '../../../assets/image/subwaybegin.png'
//终点标
import subwayend from '../../../assets/image/subwayend.png'
// import dateFunc from '../../../assets/image/exit.svg'
export default {
data() {
return {
center: [121.63081,31.233768],
zoom:12,
viewMode:'3D',//使用3D视图
mapStyle: "amap://styles/blue", //修改地图的背景颜色
//mapStyle: 'amap://styles/25229f7c1d46f0392397b7dcbf13ab7e',
markers: [],
windows:[],
window:'',
pointMarkerTemp:[],
pointMarker:[],//存放gis站点信息
//划线
//静态数据
// polyline:{
// path:[
// //唐镇
// [121.656269, 31.214107],
// //广兰路
// [121.621072,31.21105],
// //金科路
// [121.601989,31.204213],
// //张江高科
// [121.557634,31.203575],
// //世纪大道
// [121.527213, 31.228682],
// //外高桥保税区北站
// [121.586926, 31.347802]
// ]
// }
polyline:{
path:[]
}
}
},
created() {
/*this.getStationInfo();*/
//获取站点信息
this.point();
},
methods:{
point(){
//自定义map点坐标图标
let icon = new AMap.Icon({
image: location,
size: new AMap.Size(2, 2),
imageSize: new AMap.Size(2, 2)
});
let markers = [];
let windows=[];
let that=this;
//静态数据
// let pointMarker=[
// {
// lng:121.656269,
// lat:31.214107,
// stationName: "唐镇地铁站",
// earlyTime:'07:00',//出行时间
// stationAddress:'上海市浦东新区张江高科地铁站',
// subway:"2号线"
// },{
// lng:121.586926,
// lat:31.347802,
// stationName: "外高桥保税区地铁站",
// earlyTime:'08:00',//到达时间
// stationAddress:'上海市浦东新区外高桥保税区北站',
// subway:"2号线,4号线，6号线"
// }
// ]
// pointMarker.forEach((item,index)=>{
// markers.push({
// position: [item.lng,item.lat],
// icon:location, //不设置默认蓝色水滴
// events: {
// click() {
// that.windows.forEach(window => {
// window.visible = false; //关闭窗体
// });
// that.window = that.windows[index];
// that.$nextTick(() => {
// that.window.visible = true;//点击点坐标，出现信息窗体
// });
// }
// }
// })
// windows.push({
// position: [item.lng,item.lat],
// content:"" +
// "<div>"+"地铁站名称："+item.stationName+"</div>" +
// "<div>"+"运行时间："+item.earlyTime+"</div>" +
// "<div>"+"地 址："+item.stationAddress+"</div>" +
// "<div>"+"线路名称："+"<span style='color: #66A0FF'>"+item.subway+"</span>"+"</div>",
// offset:[5,-15],//窗体偏移
// visible: false//初始是否显示
// })
// })
//mock接口数据
this.$fetchGet('/api/des').then(res=>{
this.pointMarker = res.data
this.pointMarker.forEach((item,index)=>{
if (index===this.pointMarker.length-1){
markers.push({
position: [item.lng,item.lat],
icon:subwayend, //不设置默认蓝色水滴
events: {
click() {
that.windows.forEach(window => {
window.visible = false; //关闭窗体
});
that.window = that.windows[index];
that.$nextTick(() => {
that.window.visible = true;//点击点坐标，出现信息窗体
});
}
}
})
}else if(index===0){
markers.push({
position: [item.lng,item.lat],
icon:subwaybegin, //不设置默认蓝色水滴
events: {
click() {
that.windows.forEach(window => {
window.visible = false; //关闭窗体
});
that.window = that.windows[index];
that.$nextTick(() => {
that.window.visible = true;//点击点坐标，出现信息窗体
});
}
}
})
}else {
{
markers.push({
position: [item.lng,item.lat],
icon:location, //不设置默认蓝色水滴
events: {
click() {
that.windows.forEach(window => {
window.visible = false; //关闭窗体
});
that.window = that.windows[index];
that.$nextTick(() => {
that.window.visible = true;//点击点坐标，出现信息窗体
});
}
}
})
}
}
//窗体信息显示
windows.push({
position: [item.lng,item.lat],
content:'' +
"<div>"+"地铁站名称："+item.stationName+"</div>" +
"<div>"+"运行时间："+item.earlyTime+"</div>" +
"<div>"+"地 址："+item.stationAddress+"</div>" +
"<div>"+"线路名称："+"<span style='color: #66A0FF'>"+item.subway+"</span>"+"</div>",
offset:[5,-15],//窗体偏移
visible: false//初始是否显示
})
})
//划线
console.log(this.pointMarker,'点位获取')
this.pointMarker.forEach((items,index)=>{
var arrTemp = []
arrTemp.push(items.lng)
arrTemp.push(items.lat)
this.polyline.path.push(arrTemp)
})
console.log( this.polyline.path,'划线')
});
//添加点标注
this.markers = markers;
//生成弹窗
this.windows=windows
},
},
}
</script>
<style scoped>
.aMap-wrapper {
width: 100%;
height: 960px;
}
</style>
在其他组件内使用该组件
<template>
<div>
<div class="warp-amap">
<aMap></aMap>
</div>
</div>
</template>
效果展示：
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
6
0- 0
已为社区贡献3条内容
所有评论(0)