前段时间一直在结合高德地图的api进行数据可视化开发,这也是前端的一个趋势,网上关于这些的文章都比较少,最好还是去高德去看官方文档,然后去琢磨怎么玩。
先说下我这个应用场景吧,一般我们做地图可视化开发,边上会有些表格啊,或者点位表述,然后我们点击这个点的那个div或者表格的那行,然后就在地图上标记这个点显示出来,并展示跟这个点位一些数据。大概就是这样一个功能吧。看上去,更加专业,还知道位置在哪。
效果图
新建一个组件
<template>
<div class="dotMap">
<div
id="map"
class="map"
>
</div>
</div>
</template>
<script>
var map
export default {
props: ['title','name','nameId','latLng'],
data() {
},
mounted() {
this.initMap()
this.addMarker()
},
watch: {
//监听数据变化
title: {
handler(newvalue, oldvalue) {
this.addMarker()
}
}
},
methods: {
//初始化地图
initMap() {
map = new AMap.Map('map', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始化地图层级
mapStyle: "amap://styles/darkblue",
center: [116.46 , 39.92] //初始化地图中心点
})
},
//初始化信息窗口
createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "dotclass";
info.style.padding = '5px';
// 定义顶部标题
var top = document.createElement("div");
var titleD = document.createElement("div");
top.style.fontSize = '15px';
titleD.innerHTML = title;
top.appendChild(titleD);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
// middle.className = "info-middle";
middle.style.fontSize = '12px';
middle.innerHTML = content;
info.appendChild(middle);
return info;
},
addMarker() {
map.clearMap();
var marker = new AMap.Marker({
map: map,
position: this.latLng
});
//实例化信息窗体
var title = this.title,
content = [];
var str = this.name + ' ' + this.nameId
content.push(str);
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: this.createInfoWindow(title, content),
offset: new AMap.Pixel(1, -35)
});
//如果想要点击打开的效果,可以在此处绑定给点标记绑定事件
infoWindow.open(map, marker.getPosition());
}
}
}
</script>
<style lang="scss">
.dotclass{
background: rgba(121, 121, 121, 0.35);
color: #00FFD4;
}
</style>
<style lang="scss" scoped>
.dotMap {
width: 100%;
height: 100%;
.map {
width: 100%;
height: 100%;
}
}
</style>
然后导入组件
import DotMap from '你的组件位置'
//注册下
components: {
DotMap
},
//使用
<DotMap :title="'我们都是好孩子嘟嘟嘟嘟嘟嘟嘟'" :name="'好孩子A'" :nameId="'好孩子编号'" :latLng="[116.46 , 39.92]"></DotMap>
可能我们的话表格用的比较多,在信息窗口里面,这个时候,你在信息窗口那创建一个表格。填入相信的数据就好了,我这是一个很简单的demo,而且思路跟官方文档是一样的,大家也可以研究一下。
https://lbs.amap.com/api/javascript-api/example/infowindow/custom-style-infowindow
个人水平有限,有问题欢迎大家留言指导,仅供学习和参考。
学海无涯!努力二字,共勉!