概述
功能介绍(历史轨迹,一键导航,显示附近医院,公安局)
这篇相对于之前发的比较完整,思路比较清晰.
代码如下
<template>
<div class="content">
<div class="amap-wrapper">
<el-amap class="amap-box" vid="amap" :zoom="zoom" :center="center" :mapStyle="mapStyle">
<el-amap-marker
v-for="marker in markers"
:position="marker.position"
:key="marker.icon"
:events="marker.events"
:icon="marker.image"
></el-amap-marker>
<el-amap-marker
v-for="marker in peripherals"
:position="marker.position"
:key="marker.id"
:events="marker.events"
:icon="marker.image"
></el-amap-marker>
<el-amap-info-window
v-if="window"
:position="window.position"
:visible="visible"
:content="window.content"
:offset="window.offset"
></el-amap-info-window>
<el-amap-info-window
v-if="aabb"
:position="aabb.position"
:visible="visibles"
:content="aabb.content"
:offset="aabb.offset"
></el-amap-info-window>
<el-amap-polyline :path="path" :visible="hide"></el-amap-polyline>
</el-amap>
</div>
</div>
</template>
<script>
export default {
data() {
return {
count: 1, //计数器
peripherals: [],
obj: [], //存储查询周边的经纬度
placeSearch: null,
amap: null,
hospital: [], //医院数据
nearbyType: "综合医院|卫生院|公安警察",
police: null,
hospital: null,
visible: false,
visibles: false,
hide: false,
path: [],
miter: "miter",
center: [121.5273285, 31.25515044],
zoom: 12,
mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
markers: [],
windows: [],
wind: [],
aabb: "",
window: "",
count:0,
pointMarker: [
{
lng: 121.5273285,
lat: 31.25515044,
url: "../assets/img/student.png",
title: "测试啊",
name: "李逍遥",
tel: "13762155556",
id: "1",
path: [
[121.5389385, 31.21515044],
[121.5389385, 31.29615044],
[121.5273285, 31.21515044],
[121.5273285, 31.25515044]
]
},
{
lng: 121.536488,
lat: 31.226337,
url: "../assets/img/student.png",
name: "景天",
tel: "1376215555",
id: "2",
path: [
[121.536488, 31.226337],
[121.5389385, 31.21515044],
[121.5389385, 31.29615044],
[121.5273285, 31.21515044],
[121.5273285, 31.25515044]
]
}
]
};
},
methods: {
point() {
let that = this;
this.pointMarker.forEach((item, index) => {
this.markers.push({
position: [item.lng, item.lat],
image: require("../assets/img/student.png"),
events: {
click(e) {
that.wind = [];
that.zoom = 14;
that.windows.forEach(window => {
that.visible = false; //关闭窗体
});
that.window = that.windows[index];
that.$nextTick(() => {
that.visible = true; //点击点坐标,出现信息窗体
let J = e.target.B.position.lng; //保存经纬地址
let W = e.target.B.position.lat;
that.obj = [J, W];
that.center=[J,W]
that.placeSearchs();
});
}
}
});
this.windows.push({
position: [item.lng, item.lat],
content: `<div>${item.text}</div>
<div>姓名:${item.name}</div>
<div>手机号:${item.tel}</div>
<p style="color:blue" id='${item.id}'>历史轨迹</p>
<a href="https://uri.amap.com/search">一键导航</a>
`, //内容
offset: [5, -15] //窗体偏移
});
this.markerClick(item);
});
},
//信息窗体里面的点击事件
markerClick(item) {
var that = this;
let id;
window.addEventListener("click", e => {
console.log(item)
if (e.target.id==item.id) {
id = e.target.id;
that.visible = false; //关闭窗体
//find 点击的那一项的所有数据
let arr = this.pointMarker.find(ele => {
if (ele.id == id) {
return ele;
}
});
this.path = arr.path;
this.hide = true;
}else if(e.target.tel==item.tel){
}
});
},
//一键导航
navigartion(){
},
// 搜索周边
placeSearchs() {
var that = this;
AMap.service(["AMap.PlaceSearch"], () => {
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({
type: "综合医院|卫生院|公安警察", // 兴趣点类别
pageSize: 20, // 单页显示结果条数
pageIndex: 1, // 页码
radius: 500, //范围,默认:500
citylimit: true, //是否强制限制在设置的城市内搜索
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
console.log(that.obj);
var cpoint = that.obj; //中心点坐标
placeSearch.searchNearBy("", cpoint, 2000, (status, result) => {
this.hospital = result.poiList.pois;
console.log(this.hospital);
let marker = [];
this.hospital.forEach((item, index) => {
marker.push({
position: [item.location.lng, item.location.lat],
address: item.address,
id: item.id,
name: item.name,
image:
item.type.indexOf("政府机构及社会团体") >= 0 ||
item.type.indexOf("公安警察") >= 0 ||
item.type.indexOf("警察") >= 0
? require("../assets/img/police.png")
: require("../assets/img/hospital.png"),
events: {
click(e) {
that.wind.forEach(window => {
that.visibles = false; //关闭窗体
});
that.aabb = that.wind[index];
that.$nextTick(() => {
that.visibles = true; //点击点坐标,出现信息窗体
});
}
}
});
that.wind.push({
position: [item.location.lng, item.location.lat],
content: `<div>地址"${item.address}</div>
<div>名称:${item.name}</div>
<div>手机号:${item.tel ? item.tel : ""}</div>
`, //内容
offset: [5, -15] //窗体偏移
});
});
this.peripherals = marker;
});
});
}
},
mounted() {
this.point();
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
html body {
width: 100%;
height: 100%;
overflow: hidden;
}
.amap-wrapper {
width: 100%;
height: 700px;
}
/deep/ .amap-icon img {
width: 20px;
height: 20px;
}
</style>
最后
以上就是寂寞超短裙为你收集整理的vue-amap高德地图的全部内容,希望文章能够帮你解决vue-amap高德地图所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复