Google Maps API v3地理编码，并非总是加载所有标记

Question

My problem is when I switch beetwen select list. 我的问题是当我切换beetwen选择列表时。 Markers disappear, but not always, they should not disappear. 标记消失，但并非总是如此，它们不应该消失。 Why? 为什么？

Maybe here somewhere is problem because I used (I think so) closures. 也许这是个问题，因为我使用了（我认为是）闭包。

                for (var i = 0; i < locations.length; i++) {
                if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
                if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
                if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
               if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
               if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}

               geokoder.geocode
               (
                    { 'address': locations[i][0]+','+locations[i][1]}, (function(i) {
                        return function(results, status)
                        {
                        if (status == google.maps.GeocoderStatus.OK)
                        {

                                marker[i] = new google.maps.Marker({
                                icon: markericon,
                                position: results[0].geometry.location,
                                map: map,
                                title: locations[i][0],
                                desc: description,
                                tel: telephone,
                                email: email,
                                web: web
                            });
                            //środkuje mapę
                            map.setCenter(results[0].geometry.location);

                            link = '';
                            bindInfoWindow(marker[i], map, locations[i][0], locations[i][1], telephone, email, web, link);
                        }
                        }})(i)
               );    
            }

Here is fiddle: http://jsfiddle.net/zq7bojd5/3/ 这是小提琴： http : //jsfiddle.net/zq7bojd5/3/

Answer 1

EDIT: markers 3, 11, 12, 13, 14, 15 are not found by geoLocation at my computer. 编辑：在我的计算机上，geoLocation未找到标记3、11、12、13、14、15。 Maybe it would be a good idea to add the country to the search request. 最好将国家/地区添加到搜索请求中。

EDIT2: geocoder is limited to 10 results. EDIT2：地址解析器仅限10个结果。 As this thread points out: you should store the coordinates somewhere; 正如该线程指出的那样：您应该将坐标存储在某个位置； you can't use geocoder for this many locations How do I Geocode 20 addresses without receiving an OVER_QUERY_LIMIT response? 您不能在这么多的位置使用地址解析器。如何在未收到OVER_QUERY_LIMIT响应的情况下对20个地址进行地址解析？ . 。

You'l have some work, but I think this is about what you require. 您有一些工作，但是我认为这与您的需求有关。

Look at function getVisibleLocations, to see if the values in the switch are right 查看函数getVisibleLocations，以查看开关中的值是否正确

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #map {
        height: 400px;
        width: 400px;
      }
      .gm-style-iw {
        overflow: hidden;  /* Google Maps bug; the first time you open an infoWindow, the size is too short, this produces a window with scroll bar */
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script>
      //obiekt geokodowania
      var geokoder;
      //ikonka markera
      var image = 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00';
      //obiekt mapy
      var map;
      //tablica markerów
      var markers = [];
      var visibleLocations = [];

      locations = [
        ['Stargard Szczecinski', 'Uslugowa 1a', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Choszczno', 'Kwiatowa 7', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Nowogard', '3 Maja 6a', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Myslibórz', 'Lipowa 18', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Pyrzyce', 'Narutowicza 6', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Chojna', 'Jagiellonska 15', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Walcz', 'Bydgoska 75', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],

        ['Bartoszyce','Ketrzynska 37b', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Braniewo','Królewiecka 61', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Goldap','Gumbinska 1', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Ketrzyn','Mazowiecka 17', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Lidzbark Warminski','Olsztynska 6', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Lubawa','Fijewo 69', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Mragowo','Olsztynska 13', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Nidzica','Dzialdowska 14A', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
        ['Szczytno','Polna 1', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
      ];

      // we only need to search for these locations once.  Let's just search the at the start.
      // we will copy (a pointer to) the marker in locations, as locations[i][9] . 
      // This makes it easy to find which marker belongs to which address
      function searchAllMarkerPositions() {
        for (var i = 0; i < locations.length; i++) {
          if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
          if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
          if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
          if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
          if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
          geokoder.geocode({
            'address': locations[i][0]+','+locations[i][1]}, (function(i) {
               return function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                  markers[i] = new google.maps.Marker({
                    icon: markericon,
                    position: results[0].geometry.location,
                    // map: map,
                    title: locations[i][0],
                    desc: description,
                    tel: telephone,
                    email: email,
                    web: web
                  });
                  // search for the default markers
                  var visibleLocations = getVisibleLocations(null);
                  if (visibleLocations.indexOf(i) > -1) {
                    markers[i].setMap(map);
                  }
                  else {
                    markers[i].setMap(null);
                  }
                  // we will copy (a pointer to) the marker in locations
                  locations[i][9] = markers[i];
                  // let's center the map to the first marker
                  if (i==0) {
                    map.setCenter(markers[i].getPosition());
                  }
                  // bind the infoWindow
                  bindInfoWindow(markers[i], map, locations[i][0], locations[i][1], locations[i][2], locations[i][3], '');
                  //  // srodkuje mape
                  //  map.setCenter(results[0].geometry.location);
              }
            }})(i)
          );
        }
      }

      // load the map - search all the markers once (store them in var markers) - read the <select> and make the right markers visible
      function init() {
        geokoder = new google.maps.Geocoder();

        var mapOptions = {
          center: new google.maps.LatLng(50.259808, 19.02602),
          zoom: 5,
          zoomControl: true,
          zoomControlOptions: {
              style: google.maps.ZoomControlStyle.SMALL,
          },
          disableDoubleClickZoom: true,
          mapTypeControl: false,
          scaleControl: false,
          scrollwheel: true,
          panControl: false,
          streetViewControl: false,
          draggable : true,
          overviewMapControl: true,
          overviewMapControlOptions: {
            opened: false,
          },
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        }

        map = new google.maps.Map(
          document.getElementById('map'),
          mapOptions
        );

        searchAllMarkerPositions();
        // handle of the select
        // lokalizacje w zaleznosci od wybranego regionu
        $("#sklepy").change(function () {
          var val = $(this).val();
          var visibleLocations = getVisibleLocations(val);
          updateVisibleMarkers(visibleLocations);
        });
      }
      // Pokazuje chmurke z opisem
      function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
        var infoWindowVisible = (function () {
          var currentlyVisible = false;
          return function (visible) {
            if (visible !== undefined) {
              currentlyVisible = visible;
            }
            return currentlyVisible;
          };
        }());
        iw = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'click', function() {
          if (infoWindowVisible()) {
            iw.close();
            infoWindowVisible(false);
          } 
          else {
            // znikanie innych chmurek
            iw.close();
            var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h3>Sklep GRENE</h3><h4>"+title+"</h4><p>"+desc+"<p></div>";
            iw = new google.maps.InfoWindow({content:html});
            iw.open(map,marker);
            infoWindowVisible(true);
          }
        });
        google.maps.event.addListener(iw, 'closeclick', function () {
          infoWindowVisible(false);
        });
      }


      // reads the visible markers.  Leave the parameter null to get the default.
      function getVisibleLocations(val) {
        switch (val) {
          default:
            var visibleLocations = [0, 1, 2, 3, 4, 5, 6];  // the indexes of the locations
            break;
          case "warminsko-mazurskie":
            var visibleLocations = [7, 8, 9, 10, 11, 12, 13, 14, 15];
            break;
          case "zachodniopomorskie":
            var visibleLocations = [1, 4, 5, 6, 3, 2, 0];  // this looks exactly like de default, but different order.  Correct?
            break;
        }
        return visibleLocations;
      }

      function updateVisibleMarkers(visibleLocations) {
        clearAllMarkers();
        for (var i=0; i<markers.length; i++) {
          if (typeof markers[i] == 'undefined') {
            continue;
          }
          if (visibleLocations.indexOf(i) > -1) {
            markers[i].setMap(map);
          }
        }
      }

      function clearAllMarkers() {
        for (var i=0; i<markers.length; i++) {
          if (typeof markers[i] == 'undefined') {
            continue;
          }
          markers[i].setMap(null);
        }
      }

      google.maps.event.addDomListener(window, 'load', init);
    </script>
  </head>
  <body>
    <div class="wyszukiwarka">
      <form>
        <label for="sklepy" class="accessibility">Wybierz region</label>
        <select name="sklepy" id="sklepy" class="no-margin">
          <option value="">-- Wybierz region --</option>
          <option value="warminsko-mazurskie">warminsko-mazurskie</option>
          <option value="zachodniopomorskie">zachodniopomorskie</option>
        </select>
        <div id="map"></div>
      </form>
    </div>
  </body>
</html>

Google Maps API v3地理编码，并非总是加载所有标记

问题描述

1 个解决方案

解决方案1
0 2014-11-05 18:52:50

Google Maps API v3地理编码，并非总是加载所有标记

问题描述

1 个解决方案

解决方案1 0 2014-11-05 18:52:50

解决方案1
0 2014-11-05 18:52:50