【问题标题】:Google Map V3 : Only some markers are displayedGoogle Map V3:只显示一些标记
【发布时间】:2012-04-21 04:49:50
【问题描述】:

我有以下代码,它应该为数组中的位置显示几个标记,单击时的每个标记都会显示一个信息窗口,一切正常,除了在 21 个位置中我只能显示 8 个标记。

// declare Variables
   var geocoder;
   var map;
   var tex;     
   var markersArray = [];
   // pids array 21 addreses
    var pids = [{ad:'251 Pantigo Road Hampton Bays NY 11946',pid:'9'},
    {ad:'Amagensett Quiogue NY 11978',pid:'10'},
    {ad:'789 Main Street Hampton Bays NY 11946',pid:'12'},
    {ad:'30 Abrahams Path Hampton Bays NY 11946',pid:'14'},
    {ad:'3 Winnebogue Ln Westhampton NY 11977',pid:'15'},
    {ad:'44 White Oak Lane Montauk NY 11954',pid:'16'},
    {ad:'107 stoney hill road Bridgehampton NY 11932',pid:'17'},
    {ad:'250 Pantigo Rd Hampton Bays NY 11946',pid:'19'},
    {ad:'250 Pantigo Rd Hampton Bays NY 11946',pid:'20'},
    {ad:'44 Woodruff Lane Wainscott NY 11975',pid:'21'},
    {ad:'Address East Hampton NY 11937',pid:'46'},
    {ad:'Address Amagansett NY 11930',pid:'49'},
    {ad:'Address Remsenburg NY 11960 ',pid:'50'},
    {ad:'Address Westhampton NY 11977',pid:'51'},
    {ad:'prop address Westhampton Dunes NY 11978',pid:'52'},
    {ad:'prop address East Hampton NY 11937',pid:'53'},
    {ad:'Address East Hampton NY 11937',pid:'58'},
    {ad:'Address Southampton NY 11968',pid:'59'},
    {ad:'Address Bridgehampton NY 11932',pid:'60'},
    {ad:'Address Sagaponack NY 11962',pid:'61'}];

    // create an MVCobject for creating Info window on marker
   var pin = new google.maps.MVCObject();
   // The content placeholder for the Info window. 
   var content = document.createElement("DIV");   
   var title = document.createElement("DIV");
   content.appendChild(title);
   // that is where you have the ajax result placed
   var streetview = document.createElement("DIV");
   streetview.style.width = "326px";
   streetview.style.height = "212px";
   content.appendChild(streetview);
   var infowindow = new google.maps.InfoWindow({
       content: content
   });
       // Initialize
   function initialize() {
       geocoder = new google.maps.Geocoder();
       var latlng = new google.maps.LatLng(40.8687097, -73.0014946);
       var myOptions = {
           zoom: 8,
           center: latlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
       }
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       getAllPids();
   }
   // loop to create all markers
   function getAllPids() {
       var i;
      for (i = 0; i < pids.length; i++) {
           var test = pids[i];
           codeAddress(test);
       }        
   }
   // get latlng for each address , create marker  and add eventlistner to click open infowindow 
   function codeAddress(place) {
       geocoder.geocode({ 'address': place.ad }, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
               var marker = new google.maps.Marker({
                   map: map,
                   position: results[0].geometry.location,
                   title: place.pid
               });
               markersArray.push(marker);                  
               google.maps.event.addListener(marker, "click", function() {
                   openInfoWindow(marker);
               });
            } else {
               // alert("Geocode was not successful for the following reason: " + status);
           }
       });
   }
   // click event on marker calls this to show infowindow.
   function openInfoWindow(marker) {        
    getContent(marker.getTitle());          
       pin.set("position", marker.getPosition());
       infowindow.open(map, marker);
   }
   // Now ajax call to get the content for the current info window
   function getContent(pid) {          
      $.ajax({
                        type: "POST",
                        url: "mapSearchResult.aspx/get_map",                            
                        data: "{'pids':'"+pid +"'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(msg) {

                         title.innerHTML =msg.d; 

                        }
                    });          
   }

【问题讨论】:

  • 您的代码是否有有效版本可以迁移到 JSfiddle ?

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


【解决方案1】:

如果您取消注释

// alert("Geocode was not successful for the following reason: " + status);

您会发现reason code 是OVER_QUERY_LIMIT (620)。

有一个速率限制:如果您对许多地址进行地理编码而不在它们之间引入延迟,您将打破该限制,因为您在太短的时间内完成了太多。

您的某些地址不会进行地理编码(或不会产生您想要的结果),因为地理编码器使用邮政地址。 Address East Hampton NY 11937 或 prop address Westhampton Dunes NY 11978 等地址不是邮政地址。

建议的策略是不要浪费您与他人共享的 Google 资源。在一次性操作中自己对地址进行地理编码,将这些位置存储在数据库中(或直接在代码中使用它们),然后使用坐标定位标记。每次加载页面时,不必费心查找您已经知道的位置。仅使用地理编码器查找您事先不知道的位置:用户输入的地址。

如果您真的必须颠覆该策略并对所有内容进行地理编码,那么您需要减慢请求速度。当您提交更多请求时,您可能不得不进一步减慢它们的速度以满足地理编码器的要求。我在http://acleach.me.uk/gmaps/v3/plotaddresses.htm 做了一个版本 3 示例(来自一个著名的版本 2 示例)——你可以看到它开始时请求之间有 100 毫秒的延迟,但在 20 次迭代后需要减慢到 150 毫秒左右。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-18
    • 2012-06-10
    • 2011-05-12
    • 2014-04-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多