javascript - Vue2传单标记未显示
问题描述
<template>
<l-map
style='height: 500px'
:center='center'
:zoom='zoom'
>
<l-tile-layer
:url='url'
:attribution='attribution'
>
<l-marker :lat-lng="test">
<l-tooltip :options="{ permanent: true, interactive: true }">
<div>
I am a tooltip
</div>
</l-tooltip>
</l-marker>
</l-tile-layer>
</l-map>
</template>
<script>
import L from 'leaflet';
import {
LMap, LTileLayer, LMarker, LTooltip,
} from 'vue2-leaflet';
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
export default {
data() {
return {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
center: L.latLng(47.41322, -1.219482),
test: L.latLng(47.41322, -1.219482),
zoom: 12,
userLocation: false,
userCoords: false,
};
},
mounted() {
if (!('geolocation' in navigator)) {
return;
}
navigator.geolocation.getCurrentPosition(
(pos) => {
this.userCoords = L.latLng(pos.coords.latitude, pos.coords.longitude);
this.userLocation = true;
this.center = this.userCoords;
},
(err) => {
console.log(err);
},
);
},
components: {
LMap,
LTileLayer,
LMarker,
LTooltip,
},
};
</script>
这是我的代码,目前标记和工具提示根本没有显示。控制台没有显示任何错误,我不知道该怎么做。
根据文档,标记不显示存在问题,但从我读过的其他问题来看,标记似乎是不可见的,如果标记不可见,弹出/工具提示仍将显示。我什么也没得到,也看不出代码有问题。
我也尝试过使用自定义标记图像,但结果相同。没有
解决方案
Marker 组件不应该是 Tile Layer 的子级,如 Vue2-Leaflet 的示例所示,而是 Map(或 Layer Group)的子级:
https://vue2-leaflet.netlify.app/examples/simple.html
<l-map
:zoom="zoom"
:center="center"
>
<l-tile-layer
:url="url"
:attribution="attribution"
/>
<l-marker :lat-lng="withTooltip">
<l-tooltip>
<div>
I am a tooltip
</div>
</l-tooltip>
</l-marker>
</l-map>
推荐阅读
- r - 如何取生成条件组的意思?
- mysql - MySQL 错误代码:“字段列表”中的 1054 列“ID”未知
- powerbi - Power BI - 将列值的总和除以列数
- c# - 将列标题添加到数据表
- javascript - 赛普拉斯 OPENSSL_internal:NO_START_LINE
- java - 使用 TestNG 测试 Spring bean 的销毁方法时出错
- ubuntu - 在 ubuntu 上安装 Composer
- java - 元空间中的静态对象内存泄漏
- ios - iOS Metal“纹理的像素格式与数据类型不兼容”
- c++ - 在 MacOS 11.2.1 上构建 C++ 程序在 10.12.6 上不起作用