谷歌地图V3标记仅在FF中显示

时间:2012-02-26 16:42:43

标签: google-maps google-maps-api-3 google-maps-markers

您好我有这个Gmap v3代码,只在Firefox中显示多个标记(20个标记),并且一段时间后不会立即显示。

    var geocoder;
var map;
//var map2;
var places = [];
var popup_price = [];
var popup_rooms = [];
var popup_area = [];
var popup_pic = [];
var popup_description = [];


var address = [];
var address_position = 0;

var timeout = 600;


var myStyles =[
    {
        featureType: "transit",
        elementType: "label",
        stylers: [
              { visibility: "on" }
        ]
    }
];
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(42.36741824284927, -71.071085890625);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: 'roadmap',
      streetViewControl: false,
      styles: myStyles 
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    addMarker(address_position);
}



function addMarker(position)
{
    geocoder.geocode({'address': address[position]}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK) {
         if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
            places[position] = results[0].geometry.location;
            //map.addOverlay(new MarkerLight(latlng, {image: "red_dot.png"})); if slow actual implemetation then follow http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/
            var marker = new google.maps.Marker({
                position: places[position],
                //content:html,
                map: map


            });


            // Creating an InfoWindow object
        var infowindow = new google.maps.InfoWindow({        
           content: '<div style="font-family:arial;font-size:11px;color:#333333;"><div style=float:left;width:83px;><img src=/listings/'+popup_pic[position]+'.jpg.rbm?w=80&h=80&f=cover > </div><div style=float:left;width:205px;text-align:justify;padding:5px;><strong>$'+popup_price[position] +'<br>'+popup_rooms[position]+'</strong><br>'+popup_area[position]+'<br>'+popup_description[position]+'...</div><div style="float:left;width:96px;"><img src="/upload/custom_screens/rb/viewBtnMap.gif" class="imgPopup"><img src="/upload/custom_screens/rb/saveBtnMap.gif" class="imgPopup"><img src="/upload/custom_screens/rb/reqBtnMap.gif" class="imgPopup"></div></div>',
          maxWidth: 400
        });
            google.maps.event.addListener(marker, 'click', function() 
            {
                infowindow.open(map, marker);
            });
            //infowindow.open(map,marker);

google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();

    if (zoomLevel >= 16) 
    {

        marker.setVisible(false);

        var circleOptions = 
        {
          strokeColor: "#c4c4c4",
          strokeOpacity: 0.35,
          strokeWeight: 0,
          fillColor: "#ca0d33",
          fillOpacity: 0.1,
          map: map,
          center: results[0].geometry.location,
          radius: 50
        };

        //add draw circle
         var circle = new google.maps.Circle(circleOptions);


        circle.bindTo('center', marker, 'position');



    }
    else
    {
    //circle.setMap(null);
    marker.setVisible(true);

    }
});

        }
        }
        else
        {
            if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
            {
                setTimeout(function() { addMarker(position); }, (timeout * 3));
            }
        }
        address_position++;
        if (address_position < address.length)
        {
            setTimeout(function() { addMarker(address_position); }, (timeout));
        }
    });

}

如何提高速度并让它们在IE和Chrome中运行?我在控制台中没有收到任何错误。

谢谢

1 个答案:

答案 0 :(得分:1)

目前您的地图没有为我显示任何标记,因为地址为空。我正在用一些值测试它:

var address = ['Brookline','Wayland','Bedford'];

...所有3个标记出现在IE,Chrome,FF&amp;戏。

然而,主要的问题是你使用地址而不是LatLng,因为地址首先必须通过地理编码来获取LatLng,而且地址不是唯一的,你可能会收到不断变化的结果(例如结果可能会发生返回视口外的其他位置,您无法识别它。)

因此,如果地址在您的应用程序中已知,您最好存储这些地址的LatLng并根据这些位置显示标记(因为您不需要地理编码也应该更快)