如果我重命名地图变量，为什么使用 MarkerClusterer 的 Google 地图标记不会显示在地图上？
问题描述 投票：0回答：1
我想在我的网页上使用 Google Maps API。另外，我想按照 this
教程使用
MarkerClusterer 对标记进行聚类。
重命名之前
以下代码按预期工作：
注意：我删除了 API 密钥。
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
#googleMapsDesktop {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="googleMapsDesktop"></div>
<script type="module">
import { MarkerClusterer } from "https://cdn.skypack.dev/@googlemaps/[email protected]";
function initMap() {
const map = new google.maps.Map(document.getElementById("googleMapsDesktop"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const markers = locations.map((position, i) => {
const label = labels[i % labels.length];
const marker = new google.maps.Marker({
position,
label,
});
marker.addListener("click", () => {
infoWindow.setContent(label);
infoWindow.open(map, marker);
});
return marker;
});
new MarkerClusterer({ markers, map });
}
const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.75, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
{ lat: -37.770104, lng: 145.143299 },
{ lat: -37.7737, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
{ lat: -41.330162, lng: 174.865694 },
{ lat: -42.734358, lng: 147.439506 },
{ lat: -42.734358, lng: 147.501315 },
{ lat: -42.735258, lng: 147.438 },
{ lat: -43.999792, lng: 170.463352 },
];
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx&callback=initMap" defer></script>
</body>
</html>这是输出：
更名后
现在，如果我只是重命名
mapconst map = new google.maps.Map(document.getElementById("googleMapsDesktop"), {...});
...对此...
const mapDesktop = new google.maps.Map(document.getElementById("googleMapsDesktop"), {...});
...并更新代码，标记不会显示在地图上。
以下代码不起作用（即标记不显示在地图上）：
注意：我删除了 API 密钥。
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
#googleMapsDesktop {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="googleMapsDesktop"></div>
<script type="module">
import { MarkerClusterer } from "https://cdn.skypack.dev/@googlemaps/[email protected]";
function initMap() {
const mapDesktop = new google.maps.Map(document.getElementById("googleMapsDesktop"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const markers = locations.map((position, i) => {
const label = labels[i % labels.length];
const marker = new google.maps.Marker({
position,
label,
});
marker.addListener("click", () => {
infoWindow.setContent(label);
infoWindow.open(mapDesktop, marker);
});
return marker;
});
new MarkerClusterer({ markers, mapDesktop });
}
const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.75, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
{ lat: -37.770104, lng: 145.143299 },
{ lat: -37.7737, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
{ lat: -41.330162, lng: 174.865694 },
{ lat: -42.734358, lng: 147.439506 },
{ lat: -42.734358, lng: 147.501315 },
{ lat: -42.735258, lng: 147.438 },
{ lat: -43.999792, lng: 170.463352 },
];
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx&callback=initMap" defer></script>
</body>
</html>这是输出：
此外，控制台不会显示与 Google Maps API 或 MarkerClusterer 相关的任何错误。
我错过了什么？
1个回答
1
投票
投票
好的，我在这个已关闭的问题的帮助下找到了这个问题，它在某种程度上是相关的。
使用
new MarkerClusterer({ markers, mapX });new MarkerClusterer({ markers, map: mapX });如果您想安全起见，也许最好的选择是使用：
new MarkerClusterer({ markers: markers, map: mapX });下面的工作代码片段。
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
#googleMapsDesktop {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="googleMapsDesktop"></div>
<script type="module">
import { MarkerClusterer } from "https://cdn.skypack.dev/@googlemaps/[email protected]";
function initMap() {
const mapX = new google.maps.Map(document.getElementById("googleMapsDesktop"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const markers = locations.map((position, i) => {
const label = labels[i % labels.length];
const marker = new google.maps.Marker({
position,
label,
});
marker.addListener("click", () => {
infoWindow.setContent(label);
infoWindow.open(mapX, marker);
});
return marker;
});
new MarkerClusterer({ markers: markers, map: mapX });
}
const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.75, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
{ lat: -37.770104, lng: 145.143299 },
{ lat: -37.7737, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
{ lat: -41.330162, lng: 174.865694 },
{ lat: -42.734358, lng: 147.439506 },
{ lat: -42.734358, lng: 147.501315 },
{ lat: -42.735258, lng: 147.438 },
{ lat: -43.999792, lng: 170.463352 },
];
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" defer></script>
</body>
</html>最新问题
- 带多个条件的 SAS 宏过程 SQL
- 如何理解MavenPublication的语法
- OpenCV 和网络摄像头的问题 - 背景模糊
- 遵循 Microsoft 压缩文档后无法压缩 API 请求
- 传递值的形状为 (3, 2)，索引意味着 (6, 2)
- 如何在 gitlab 作业中注入依赖项来运行 terraform？
- notifyDataSetChanged 在具有自定义 BaseAdapter 的 ListView 中不起作用
- 在php中将浮点数转换为字符串？
- 如何通过执行 shell 命令在 Jenkins 作业中使用 ssh 凭据
- PHP 在 require 上添加额外的空格
- AppStore 中应用程序名称的可用性
- 无法将我的数据从 Prometheus 连接到 Grafana
- 如何在 bash 中将记录追加到 json 对象文件
- 为什么不检查每个图块？
- 向 Discord 提交 hcaptcha 验证码令牌以使用 selenium 创建帐户
- 船上任务 - Azure DevOps
- 如何在运行时更改 TextView 的样式
- Python 相当于 Matlab 的 resample()
- 如何通过 IIS 访问日志中的消息重新启动 IIS 应用程序池
- 在函数中调整了数组的大小，但当它返回时，它是原始大小
© www.soinside.com 2019 - 2024. All rights reserved.