vue 使用天地图实现描点、信息窗口、历史轨迹回放以及地图自适应容器
<template>
<div id="app">
<div ref="mapContainer" style="width: 100%; height: 100vh;"></div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
map: null,
markerLayer: null,
infoWindow: null,
historyLayer: null,
};
},
mounted() {
this.initMap();
this.addMarker();
this.addInfoWindow();
this.addHistoryLayer();
},
methods: {
initMap() {
this.map = new T.Map(this.$refs.mapContainer);
this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);
},
addMarker() {
this.markerLayer = new T.Marker(this.map.getCenter());
this.map.addOverlay(this.markerLayer);
},
addInfoWindow() {
this.infoWindow = new T.InfoWindow({
content: "当前位置",
anchorPosition: { x: 0, y: 0 },
});
this.markerLayer.openInfoWindow(this.infoWindow);
},
addHistoryLayer() {
const path = [
new T.LngLat(116.35914, 39.90381),
new T.LngLat(116.397128, 39.900451),
];
this.historyLayer = new T.Polyline(path, {
color: "blue",
weight: 6,
opacity: 0.5,
lineStyle: "dashed",
});
this.map.addOverlay(this.historyLayer);
},
},
};
</script>
这个代码实例展示了如何在Vue应用中初始化天地图,添加标记、信息窗口以及历史轨迹。在mounted
生命周期钩子中,我们初始化了地图,并且添加了位置标记、信息窗口和历史轨迹。这个例子简洁明了,并且注重于核心功能的实现,而不是布局和样式的细节。
评论已关闭