将MarkerCluster添加到Google地图，而不是显示 [英] Adding MarkerCluster to Google Map, not appearing
问题描述
我试图将MarkerCluster功能添加到现有的带有标记的Google地图。我试着添加最简单的例子来开始使用API指令。不幸的是，它使地图消失。
我假设我将markerClsuter变量放在错误的地方，但我无法确定。我的JavaScript不好，所以有点令人困惑。
为很长一段代码提前道歉，但我想尽可能多地提供上下文。
任何见解都会被赞赏。
function mainGeo（）
{
if（navigator.geolocation）
{
navigator.geolocation.getCurrentPosition（mainMap，error，{maximumAge：30000，timeout：10000，enableHighAccuracy：true}）;
}
else
{
alert（对不起，但它看起来像你的浏览器不支持地理位置。
}
}
var stories = {{story_Json | safe}};
var geocoder;
var map;
var markers = [];
function loadMarkers（stories）{
for（i = 0; i< stories.length; i ++）{
var story = stories [i];
（function（story）{
var pinColor =69f2ff;
var pinImage = new google.maps.MarkerImage（http://chart.apis.google。 com / chart？chst = d_map_pin_letter& chld =％E2％80％A2 |+ pinColor，
new google.maps.Size（21，34），
new google.maps.Point（0， 0），
new google.maps.Point（10，34））;
var point = new google.maps.LatLng（story.latitude，story.longitude）;
var marker = new google.maps.Marker（{position：point，map：map，icon：pinImage}）;
var infowindow = new google.maps.InfoWindow（{
content：'< div>' +
'< div>'+
'< / div>'+
'< h2 class =firstHeading>'+ story.headline +'< / h2> ;'+
'< div>'+
'< p>'+ story.author +'< / p>'+
'< p >'+ story.copy +'< / p>'+
'< / div>'+
'< / div>'
}）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open（map，this）;
}）;
}）（story）;
}
var markerCluster = new MarkerClusterer（map，markers）;
$ b function mainMap（position）
{
geocoder = new google.maps.Geocoder（）;
//将坐标定义为Google Maps LatLng对象
var coords = new google.maps.LatLng（position.coords.latitude，position.coords.longitude）;
//准备地图选项
var mapOptions =
{
zoom：15，
center：coords，
mapTypeControl：false，
navigationControlOptions：{style：google.maps.NavigationControlStyle.SMALL}，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
//创建地图，并将其放置在map_canvas div中
map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）;
//放置初始标记
var marker = new google.maps.Marker（{
position：coords，
map：map，
title ：您当前的位置！
}）;
loadMarkers（故事）;
$ b函数codeAddress（）{
var address = document.getElementById（address）。value;
geocoder.geocode（{'address'：address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
map.setCenter（results [0] .geometry.location）;
var marker = new google.maps.Marker（{
map：map，
position：results [0] .geometry.location
}）;
} else {
alert（由于以下原因，地理编码不成功：+ status;
}
}）;
当你的地图消失时，很可能是因为某处出现语法错误。也许你错过了逗号或分号。当您编辑标记并且标记代码不正确时，通常地图加载和标记不会。
另外请注意，如果您向标记添加了新代码，则标记集群和标记管理器也将需要对核心变量进行更改。例如，当我决定创建一个具有标签的标记的新函数时，这使得标记管理器不适用于我，除非我还为这个标记添加了一个新函数标记管理器。
I'm trying to add the MarkerCluster functionality to an existing Google Map with markers. Using the API instructions I attempted to add the simplest example to start. Unfortunately, it makes the map disappear.
I assume I'm placing the markerClsuter variable in the wrong place, but I can't be sure. My JavaScript is not good so it's a bit confusing.
Advance apologies for the long bit of code, but I wanted to provide as much context as possible.
Any insight appreciated.
function mainGeo()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition( mainMap, error, {maximumAge: 30000, timeout: 10000, enableHighAccuracy: true} );
}
else
{
alert("Sorry, but it looks like your browser does not support geolocation.");
}
}
var stories = {{story_Json|safe}};
var geocoder;
var map;
var markers = [];
function loadMarkers(stories){
for (i=0;i<stories.length;i++) {
var story = stories[i];
(function(story) {
var pinColor = "69f2ff";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var point = new google.maps.LatLng(story.latitude, story.longitude);
var marker = new google.maps.Marker({position: point, map: map, icon: pinImage});
var infowindow = new google.maps.InfoWindow({
content: '<div >'+
'<div >'+
'</div>'+
'<h2 class="firstHeading">'+story.headline+'</h2>'+
'<div>'+
'<p>'+story.author+'</p>'+
'<p>'+story.copy+'</p>'+
'</div>'+
'</div>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
})(story);
}
var markerCluster = new MarkerClusterer(map, markers);
}
function mainMap(position)
{
geocoder = new google.maps.Geocoder();
// Define the coordinates as a Google Maps LatLng Object
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Prepare the map options
var mapOptions =
{
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the map, and place it in the map_canvas div
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
loadMarkers(stories);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
When your map disappears, it is most likely because of a syntax error somewhere. Perhaps you missed a comma or a semi colon. When you edit a marker and the marker code is incorrect, typically the map loads and marker does not.
Also note that if you added new code to your Marker, the marker cluster and marker manager will also require changes to the core variable.
For example, when I decided to make a new function to have markers with labels, that made the marker manager not work for me unless I also added a new function for the marker manager.
这篇关于将MarkerCluster添加到Google地图，而不是显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
