我正在制作一个vue项目,我想在我的组件中使用传单 . 我看到 Map 显示但是当我尝试添加标记时遇到错误 . 我明白了
Uncaught TypeError:无法读取未定义的属性'lat'
和
TypeError:无法读取未定义的属性'latlng'
我想是因为我没有正确设置我的 Map 边界?
<template>
<div id="app" class="container">
<div class="row">
<div class="col-md-9">
<div id="map" @click="onClick" class="map" style="height: 781px;">
</div>
</div>
<div class="col-md-3">
<!-- The layer checkboxes go here -->
</div>
</div>
<router-view/>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
map: null,
marker: null,
mapSW: [0, 4096],
mapNE: [4096, 0]
},
mounted() {
this.initMap();
this.onClick();
},
methods: {
initMap() {
this.map = L.map("map").setView([0, 0], 1);
this.tileLayer = L.tileLayer("/static/map/{z}/{x}/{y}.png", {
maxZoom: 4,
minZoom: 3,
continuousWorld: false,
noWrap: true,
crs: L.CRS.Simple
});
this.tileLayer.addTo(this.map);
// this.map.unproject(this.mapSW, this.map.getMaxZoom());
// this.map.unproject(this.mapNW, this.map.getMaxZoom());
this.map.setMaxBounds(
L.LatLngBounds(L.latLng(this.mapSW), L.latLng(this.mapNW))
);
},
onClick(e) {
this.marker = L.marker(e.latlng, {
draggable: true
}).addTo(this.map);
}
}
};
</script>
1 回答
在DOM Map 容器的Vue的
@click="onClick"
属性上调用onClick
侦听器 . 因此它收到一个plain "click" event,它没有Leaflet的latlng添加属性 .既然你想在 Map 上做某事而不是直接在它的容器上做某事,那么你可能想要听Leaflet的 Map "click"事件 . 在这种情况下,您只需将您的监听器附加到:
(您通常可以在初始化 Map 后附加它)
请注意,它将极大地帮助您通过使用Leaflet的on的第3个参数来绑定
this
上下文,否则您的侦听器中的this
将引用除Vue组件实例之外的其他内容(请参阅Leaflet- marker click event works fine but methods of the class are undefined in the callback function)