gpt4 book ai didi

javascript - 标记簇不工作

转载 作者:行者123 更新时间:2023-11-30 21:09:17 26 4
gpt4 key购买 nike

我正在尝试使用以下代码实现标记集群,但无法正常工作。当我尝试执行此操作时,它显示的是标记,但不是对标记进行聚类。我试图解决这个问题,但我失败了。谁能帮我解决这个问题?

在下面的代码中,Var records保存了带有纬度和经度值的记录

<html>
<style>
#map {
height: 100%;
}
</style>

<body>

<div id="map" style="width:100%;height:700px"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>

<script>
function myMap() {
var myCenter = new google.maps.LatLng(12.9715987,77.5945627);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 2};
//some code is there to fetch the records
var records = result.getArray("records");// it has records with latitude and longitude values

for (var i=0; i< records.length; i++) {
var record = records[i];
console.log(record.Name + " -- " + record.Id+" -- "+record.Latitude);

var markers = [];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(record.Latitude,record.Longitude),
map : map,
//icon: 'brown_markerA.png'
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'

});
markers.push(marker);

var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=myMap"></script>
</body>
</html>

最佳答案

您的代码中有几个拼写错误:

  1. 您没有 google.maps.Map 变量
var map = new google.maps.Map(mapCanvas, mapOptions);
  1. 您正在循环内部创建一个空数组,将其移到外部。
var markers = [];
// start of loop
for (var i = 0; i < records.length; i++) {
  1. 您正在为每个标记(在循环内)创建一个 MarkerClusterer,将其移到循环:
} // end of loop
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

proof of concept fiddle

代码片段:

function myMap() {
var myCenter = new google.maps.LatLng(12.9715987, 77.5945627);
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: myCenter,
zoom: 2
};
var map = new google.maps.Map(mapCanvas, mapOptions);
//some code is there to fetch the records
var records = [{Latitude: 12.9715, Longitude: 77.5945627},{Latitude: 12.97159, Longitude: 77.594},{Latitude: 12.9715987, Longitude: 77.5945627},{Latitude: 12.971, Longitude: 77.5945627},{Latitude: 12.97, Longitude: 77.5945627}];
var markers = [];
for (var i = 0; i < records.length; i++) {
var record = records[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(record.Latitude, record.Longitude),
map: map,
//icon: 'brown_markerA.png'
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/images/m'
// was 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
google.maps.event.addDomListener(window, "load", myMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<!-- was https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js -->
<div id="map"></div>

关于javascript - 标记簇不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46296611/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com