前段时间一直在结合高德地图的api进行数据可视化开发,这也是前端的一个趋势,网上关于这些的文章都比较少,最好还是去高德去看官方文档,然后去琢磨怎么玩。
先说下我这个应用场景吧,一般我们做地图可视化开发,边上会有些表格啊,或者点位表述,然后我们点击这个点的那个div或者表格的那行,然后就在地图上标记这个点显示出来,并展示跟这个点位一些数据。大概就是这样一个功能吧。看上去,更加专业,还知道位置在哪。
效果图
新建一个组件
id="map"
class="map"
>
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());
}
}
}
.dotclass{
background: rgba(121, 121, 121, 0.35);
color: #00FFD4;
}
.dotMap {
width: 100%;
height: 100%;
.map {
width: 100%;
height: 100%;
}
}
参考与:https://blog.csdn.net/qq_37131884/article/details/104547062