为什么谷歌地图标记显示在 Firefox 上而不是在 Chrome、Safari 和 Internet Explorer 上答案

【问题标题】：Why are Google Map markers showing up on Firefox by not on Chrome, Safari and Internet Explorer为什么谷歌地图标记显示在 Firefox 上而不是在 Chrome、Safari 和 Internet Explorer 上
【发布时间】：2010-06-22 10:55:30
【问题描述】：

我在这个页面上有一点奇怪的问题：http://www.bluprintliving.com/locations 我想显示的标记似乎出现在 Firefox 中，但没有出现在 Chrome/Safari 或 IE 上。我不确定从哪里开始调试这个问题，因为没有 javascript 错误。

代码分为两部分。第一个js文件http://www.bluprintliving.com/js/local-area-gmaps.js

var localSearch = new GlocalSearch();
var global_point;

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);     

function usePointFromPostcode(postcode, callbackFunction) {   
 localSearch.setSearchCompleteCallback(null, 
  function() {

   if (localSearch.results[0])
   {  
    var resultLat = localSearch.results[0].lat;
    var resultLng = localSearch.results[0].lng;
    var point = new GLatLng(resultLat,resultLng);
    callbackFunction(point);
    global_point = point;
   }else{
    alert("Postcode not found!");
   }
  }); 

 localSearch.execute(postcode + ", UK");
}  

function setCenterToPointLondon(point) {
 //map.setCenter(point, 15);
 map.setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);
 var marker = new GMarker(point,icon);
 map.addOverlay(marker);
}     

function setCenterToPoint(point) {
 map.setCenter(point, 15);
 var marker = new GMarker(point,icon);
 map.addOverlay(marker);
} 

function createMarker(point,html) {
 var marker = new GMarker(point);
 GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(html);
 });
 return marker;
}

然后对于页面上的每个地图都有一个部分，如下所示：

第一张地图

<div id="map" class="location-map"></div>       
<script type="text/javascript"> 
//<![CDATA[  
 var map = new GMap2(document.getElementById("map"));
 map.addControl(new GLargeMapControl());
 map.addControl(new GMapTypeControl());
 map.setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);
 usePointFromPostcode("WC1N 2PL", setCenterToPointLondon);
 usePointFromPostcode("EC1M 5RR", setCenterToPointLondon);
//]]>
</script>

第二张地图

<div id="map-no-5-doughty-street" class="location-map"></div>       
<script type="text/javascript"> 
//<![CDATA[  
 var map = new GMap2(document.getElementById("map-no-5-doughty-street"));
 map.addControl(new GLargeMapControl());
 map.addControl(new GMapTypeControl());
 map.setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);
 usePointFromPostcode("WC1N2PL", setCenterToPoint);  
//]]>
</script>

第三张地图*

<div id="map-turnmill-street" class="location-map"></div>       
<script type="text/javascript"> 
//<![CDATA[  
 var map = new GMap2(document.getElementById("map-turnmill-street"));
 map.addControl(new GLargeMapControl());
 map.addControl(new GMapTypeControl());
 map.setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);
 usePointFromPostcode("EC1M5RR", setCenterToPoint);  
//]]>
</script>

现在这些都是动态生成的，因此随着位置的增长，页面可能会增长到更多地图。

这一切都在 Firefox 中按预期工作，但在其他浏览器中则不然。标记不显示，似乎在其他浏览器中也没有居中。

帮助！请！ :)

提前致谢

更新

我已将所有代码放在一个页面上，以便于查看问题和调试：http://www.bluprintliving.com/google-maps.php

再次感谢

【问题讨论】：

标签： javascript debugging google-maps cross-browser

【解决方案1】：

最后通过重写函数解决了。主 JS 文件现在显示为：

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);      

var mapCollection = {};

function addLocation( location, map, zoom ) {
    var localSearch = new GlocalSearch();

    localSearch.setSearchCompleteCallback(null, 
            function() {

                if (localSearch.results[0])
                {       
                    var resultLat = localSearch.results[0].lat;
                    var resultLng = localSearch.results[0].lng;
                    var point = new GLatLng(resultLat,resultLng);
                    mapCollection[map].setCenter(point, zoom);
                    var marker = new GMarker( point, icon );
                    mapCollection[map].addOverlay( marker );
                }else{
                    alert("Postcode not found!");
                }
            }); 

        localSearch.execute( location + ", UK" );   

}

要添加新地图，只需执行以下操作：

<div id="map" class="location-map"></div>                       
<script type="text/javascript"> 
//<![CDATA[  
    mapCollection["map"] = new GMap2(document.getElementById("map"));
    mapCollection["map"].addControl(new GLargeMapControl());
    mapCollection["map"].addControl(new GMapTypeControl());
    mapCollection["map"].setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);                         
    addLocation( "WC1N 2PL", "map", "11" );
    addLocation( "EC1M 5RR", "map", "11" ); 
//]]>
</script>

地图编号 X*

<div id="map-turnmill-street" class="location-map"></div>                       
<script type="text/javascript"> 
//<![CDATA[  
    mapCollection["map-turnmill-street"] = new GMap2(document.getElementById("map-turnmill-street"));
    mapCollection["map-turnmill-street"] .addControl(new GLargeMapControl());
    mapCollection["map-turnmill-street"] .addControl(new GMapTypeControl());
    mapCollection["map-turnmill-street"] .setCenter(new GLatLng(51.50788772102843,-0.1050567626953125), 11);
    addLocation( "EC1M5RR", "map-turnmill-street", 15 ); 
//]]>
</script>

现在，您可以通过添加更多“addLocation”调用（将字符串位置、地图持有者名称和缩放级别作为输入）在页面上添加多个带有任意数量标记的地图。

【讨论】：