以前から、AutoNavi Maps の API と組み合わせてデータの可視化を開発しています.これもフロント エンドの傾向です.これらに関するインターネット上の記事は比較的少ないです.AutoNavi に行って読むのが最善です.公式文書を読んでから、遊び方を見つけてください。
最初に私のアプリケーション シナリオについて話しましょう. 通常、マップ ビジュアライゼーションの開発を行う場合、横にいくつかのテーブルまたはポイント表現があり、このポイントの 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>
情報ウィンドウでテーブルをよく使用するかもしれませんが、このとき、情報ウィンドウでテーブルを作成します。信じられるデータを入力するだけの非常にシンプルなデモで、考え方は公式ドキュメントと同じですので、勉強することもできます。
https://lbs.amap.com/api/javascript-api/example/infowindow/custom-style-infowindow
個人的なレベルは限られています. ご不明な点がございましたら, 指導のためにメッセージを残してください. それは学習と参考のためだけです.
学びに制限はありません!お互いに励まし合い、がんばりましょう!