gpt4 book ai didi

javascript - 带有 MarkerClustererer 的 Google map v3 无法与 createmarker 一起使用

转载 作者:行者123 更新时间:2023-12-03 11:23:19 25 4
gpt4 key购买 nike

我正在尝试对我的标记进行聚类,因为该网站速度很慢,但 MarkerClusterer 无法在我的网站上运行:http://www.estoestalca.cl

map 的代码是这样的:

    function initialize() {

var styles = [ /* styles */ ];

var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});

var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(-35.4292213, -71.6561387),
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);

var infowindow;
var markerCluster = new MarkerClusterer(map);

map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

downloadUrl("http://estoestalca.cl/?page_id=22", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(markers[i].getAttribute("name"), markers[i].getAttribute("permalink"), latlng, markers[i].getAttribute("imagen"), markers[i].getAttribute("category"), markers[i].getAttribute("tag"), markers[i].getAttribute("fecha1"), markers[i].getAttribute("fecha2"));
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
});

function createMarker(name, permalink, latlng, imagen, category, tag, fecha1, fecha2) {
var image = 'puntos/palta-trans.png';
var marker = new MarkerWithLabel({
position: latlng,
icon: image,
title: category,
label: category,
labelAnchor: new google.maps.Point(3, 30),
labelClass: "label " + tag + " " + category, // the CSS class for the label
labelInBackground: false
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
var titulo = '<h2>' + name + '</h2>';
var image = '<a class="open fancybox" data-fancybox-type="iframe" href="' + permalink + '"><img src="' + imagen + '" alt="place" /></a>';
var fecha = '<p class="fecha"><span class="date1">' + fecha1 + '</span> / <span class="date2">' + fecha2 + '</span></p>';
var contentString = '<div class="info">' + image + fecha +'</div>';
var myOptions = {
content: contentString
,disableAutoPan: false
,pixelOffset: new google.maps.Size(0, 0)
,zIndex: null
,boxStyle: {
background: "#000"
,opacity: 0.75
,width: "180px"
}
,closeBoxMargin: "0px -3px 0px 0px"
,closeBoxURL: "http://www.jorgerock.com/CRUZ.png"
,infoBoxClearance: new google.maps.Size(130, 230)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
,maxWidth: 77
,maxHeight:75
};
infowindow = new google.maps.InfoWindow(myOptions);
infowindow.open(map, marker);

});
return marker;
}


}

主要问题是在控制台中对markerclusterer.js说:Uncaught TypeError: undefined is not a function。

顺便说一句,我找不到问题,在尝试将其添加到我的网站后,所有标记都工作正常。

谢谢!

最佳答案

markers 是 XML DOM 元素的数组。

var markers = data.documentElement.getElementsByTagName("marker");

gmarkers 是 google.maps.Marker 对象的数组。

创建一个 gmarkers 数组并更改它:

downloadUrl("http://estoestalca.cl/?page_id=22", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(markers[i].getAttribute("name"), markers[i].getAttribute("permalink"), latlng, markers[i].getAttribute("imagen"), markers[i].getAttribute("category"), markers[i].getAttribute("tag"), markers[i].getAttribute("fecha1"), markers[i].getAttribute("fecha2"));
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
});

致:

downloadUrl("http://estoestalca.cl/?page_id=22", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(markers[i].getAttribute("name"), markers[i].getAttribute("permalink"), latlng, markers[i].getAttribute("imagen"), markers[i].getAttribute("category"), markers[i].getAttribute("tag"), markers[i].getAttribute("fecha1"), markers[i].getAttribute("fecha2"));
gmarkers.push(marker);
}
var markerCluster = new MarkerClusterer(map, gmarkers);
});

working fiddle (with normal marker, MarkerWithLabel doesn't work)

关于javascript - 带有 MarkerClustererer 的 Google map v3 无法与 createmarker 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27019251/

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