Some time ago, I have been developing data visualization in combination with the API of AutoNavi Maps. This is also a trend in the front end. There are relatively few articles about these on the Internet. It is best to go to AutoNavi to read the official documents and then figure out how to play.
Let me talk about my application scenario first. Generally, when we do map visualization development, there will be some tables on the side, or point representations, and then we click on the div or row of the table at this point, and then mark this point on the map. Display it and show some data related to this point. Probably such a function. It looks more professional and knows where the location is.
renderings
Create a new component
<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>
Then import the component
import DotMap from '你的组件位置'
//注册下
components: {
DotMap
},
//使用
<DotMap :title="'我们都是好孩子嘟嘟嘟嘟嘟嘟嘟'" :name="'好孩子A'" :nameId="'好孩子编号'" :latLng="[116.46 , 39.92]"></DotMap>
Maybe we use tables a lot, in the information window, at this time, you create a table in the information window. Just fill in the data you believe. This is a very simple demo, and the idea is the same as the official document. You can also study it.
https://lbs.amap.com/api/javascript-api/example/infowindow/custom-style-infowindow
The personal level is limited. If you have any questions, please leave a message for guidance. It is only for learning and reference.
There is no limit to learning! Work hard, encourage each other!