如何避免在Google Map API v3自定義地圖和標記上重復

Question

我使用的是Google Maps API v3 。 如何避免在項目中重復地圖和標記？

鏈接在這里 ，我該如何避免這種情況？ 以下是我的代碼。

var geocoder;
var map, cloud;
var counter = 0;
var markers = [];
var locations = [];
var locationtext =[];

這里為我的地圖添加位置

locations[0] = new google.maps.LatLng(-30.67515, -73.54297); locationtext[0]="Chile";
locations[1] = new google.maps.LatLng(18.08200, 8.67528);     locationtext[1]="Nigeria";
locations[2] = new google.maps.LatLng(55.16569, 12.45153);   locationtext[2]="Germany";
locations[3] = new google.maps.LatLng(45.37421, 24.82680);   locationtext[3]="Greece";
locations[4] = new google.maps.LatLng(58.38124, 0.22094);   locationtext[4]="England";  
locations[5] = new google.maps.LatLng(41.82641, 36.42986);   locationtext[5]="Cyprus";
locations[6] = new google.maps.LatLng(44.96375, 42.24332);   locationtext[6]="Turkey";
locations[7] = new google.maps.LatLng(39.88692, 12.53750);    locationtext[7]="Tunisia";
locations[8] = new google.maps.LatLng(36.31166, 50.48177);   locationtext[8]="Kuwait";
locations[9] = new google.maps.LatLng(32.35483, 54.88388);  locationtext[9]="Qatar";
locations[10] = new google.maps.LatLng(35.03389, 2.65963);   locationtext[10]="Algeria";
locations[11] = new google.maps.LatLng(39.93911,68.70995);  locationtext[11]="Afghanistan";
locations[12] = new google.maps.LatLng(35.67532,73.345125); locationtext[12]="Pakistan";
locations[13] = new google.maps.LatLng(58.13037,-106.34677); locationtext[13]="Canada";
locations[14] = new google.maps.LatLng(46.09024,-98.34677); locationtext[14]="United states";
locations[15] = new google.maps.LatLng(12.42375,-66.08973); locationtext[15]="Venezuela";
locations[16] = new google.maps.LatLng(-2.18997,-77.01515); locationtext[16]="Peru";
locations[17] = new google.maps.LatLng(-16.14250,-58.44383); locationtext[17]="Paraguay";
locations[18] = new google.maps.LatLng(-26.52278,-55.76584); locationtext[18]="Uruguay";
locations[19] = new google.maps.LatLng(-29.11610,-65.31667); locationtext[19]="Argentine";
locations[20] = new google.maps.LatLng(52.22764,5.21375); locationtext[20]="France";
locations[21] = new google.maps.LatLng(48.0976406,15.4222894); locationtext[21]="Rome";
locations[22] = new google.maps.LatLng(41.82641, 42.42986); locationtext[22]="Syria";
locations[23] = new google.maps.LatLng(36.82641, 38.22986); locationtext[23]="Jordan";
locations[24] = new google.maps.LatLng(34.82641, 32.22986); locationtext[24]="Egypt";
locations[25] = new google.maps.LatLng(-24.67515, 158.22986); locationtext[25]="Sydney";

添加自定義標記

var image = new google.maps.MarkerImage(
    'http://www.protectronme.com/images/pin.png',
     new google.maps.Size(28,54),
     new google.maps.Point(0,0),
     new google.maps.Point(14,54)
);

添加自定義地圖

function CustomMapType() {}
  CustomMapType.prototype.tileSize = new google.maps.Size(1200, 760);
  CustomMapType.prototype.maxZoom = 2;
  CustomMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
      var div = ownerDocument.createElement('DIV');
      var baseURL = 'http://www.protectronme.com/images/map.jpg';
      div.style.width = this.tileSize.width + 'px';
      div.style.height = this.tileSize.height + 'px';
      div.style.backgroundColor = '#1B2D33';
      div.style.backgroundImage = 'url(' + baseURL + ')';
      return div;
  };

  CustomMapType.prototype.name = "Custom";
  CustomMapType.prototype.alt = "Tile Coordinate Map Type";
  var CustomMapType = new CustomMapType();

  function init() {

      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {

          zoom: 2,
          minZoom: 2,
          center: latlng,
          mapTypeControl: false,
          streetViewControl: false,
          zoomControl: false,
          panControl: false,
          draggable: false,
          scrollwheel: false,


          mapTypeControlOptions: {
              mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP]

          }
      }
      map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
      map.mapTypes.set('custom', CustomMapType);
      map.setMapTypeId('custom');

      for (var i = 0; i < locations.length; i++) {
          makeMarker(locations[i], locationtext[i]);
      }




      centerMap();
  }

  function centerMap() {

      map.setCenter(new google.maps.LatLng(37.4419, 12.1419));
  }

  function makeMarker(location, text) {



      var marker = new google.maps.Marker({
          map: map,
          icon: image,
          position: location
      });
      markers.push(marker);


      if (jQuery.browser.msie && jQuery.browser.version == "7.0") {
          text = "<div style='width:80px; height:20px;'>" + text + "</div>";
      }

      var contentString = text;

      var infowindow = new google.maps.InfoWindow({
          content: contentString

      });

      google.maps.event.addListener(marker, 'mouseover', function () {
          infowindow.open(map, this);
      });

      google.maps.event.addListener(marker, 'mouseout', function () {
          infowindow.close(map, this);
      });

}
google.maps.event.addDomListener(window, 'load', init);

Answer 1

我不確定你的意思是“避免重復地圖和標記”，但你的代碼會更清晰，只有一個數據結構，如下所示：

var locations = [
    { lat: -30.67515, lng: -73.54297, name: "Chile"   },
    { lat:  18.08200, lng:   8.67528, name: "Nigeria" },
    { lat:  55.16569, lng:  12.45153, name: "Germany" },
    ...
    { lat: -24.67515, lng: 158.22986, name: "Sydney"  }
];
...
for (var i = 0; i < locations.length; i++) {
    makeMarker(locations[i]);
}
...
function makeMarker(location) {
    var marker = new google.maps.Marker({
        map: map,
        icon: image,
        position: new google.maps.LatLng(location.lat, location.lng)
    });
    ...
    var infowindow = new google.maps.InfoWindow({
        content: location.name
    });

Answer 2

設置一個'center_changed'偵聽器，其具有固定的邊界，將地圖限制為單個實例。 來自Mike Williams的Google Maps Javascript v2教程的概念：第7部分限制地圖縮放和平移的范圍。

這適用於我（使用您的特定地圖）：

 var fixedBounds = new google.maps.LatLngBounds(
                         new google.maps.LatLng(-85,-120),
                         new google.maps.LatLng(85,160));
  google.maps.event.addListener(map,'center_changed', function() {
      var center = map.getCenter();
      if (!fixedBounds.contains(center)) {
          map.setCenter(lastCenter);
      } else {
      lastCenter = center;
      }
  });

概念證明小提琴

代碼段：

 var geocoder; var map, cloud; var counter = 0; var markers = []; var locations = []; var locationtext = []; function init() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 2, minZoom: 2, center: latlng, mapTypeControl: false, streetViewControl: false, mapTypeControlOptions: { mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP] } }; map = new google.maps.Map(document.getElementById('map-canvas'), myOptions); var fixedBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-50, -120), new google.maps.LatLng(65, 160)); google.maps.event.addListener(map, 'center_changed', function() { var center = map.getCenter(); if (!fixedBounds.contains(center)) { map.setCenter(lastCenter); } else { lastCenter = center; } }); map.mapTypes.set('custom', CustomMapType); map.setMapTypeId('custom'); for (var i = 0; i < locations.length; i++) { makeMarker(locations[i], locationtext[i]); } centerMap(); } var image = { url: 'http://www.protectronme.com/images/pin.png', size: new google.maps.Size(28, 54), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(14, 54) }; locations[0] = new google.maps.LatLng(-30.67515, -73.54297); locationtext[0] = "Chile"; locations[1] = new google.maps.LatLng(18.08200, 8.67528); locationtext[1] = "Nigeria"; locations[2] = new google.maps.LatLng(55.16569, 12.45153); locationtext[2] = "Germany"; locations[3] = new google.maps.LatLng(45.37421, 24.82680); locationtext[3] = "Greece"; locations[4] = new google.maps.LatLng(58.38124, 0.22094); locationtext[4] = "England"; locations[5] = new google.maps.LatLng(41.82641, 36.42986); locationtext[5] = "Cyprus"; locations[6] = new google.maps.LatLng(44.96375, 42.24332); locationtext[6] = "Turkey"; locations[7] = new google.maps.LatLng(39.88692, 12.53750); locationtext[7] = "Tunisia"; locations[8] = new google.maps.LatLng(36.31166, 50.48177); locationtext[8] = "Kuwait"; locations[9] = new google.maps.LatLng(32.35483, 54.88388); locationtext[9] = "Qatar"; locations[10] = new google.maps.LatLng(35.03389, 2.65963); locationtext[10] = "Algeria"; locations[11] = new google.maps.LatLng(39.93911, 68.70995); locationtext[11] = "Afghanistan"; locations[12] = new google.maps.LatLng(35.67532, 73.345125); locationtext[12] = "Pakistan"; locations[13] = new google.maps.LatLng(58.13037, -106.34677); locationtext[13] = "Canada"; locations[14] = new google.maps.LatLng(46.09024, -98.34677); locationtext[14] = "United states"; locations[15] = new google.maps.LatLng(12.42375, -66.08973); locationtext[15] = "Venezuela"; locations[16] = new google.maps.LatLng(-2.18997, -77.01515); locationtext[16] = "Peru"; locations[17] = new google.maps.LatLng(-16.14250, -58.44383); locationtext[17] = "Paraguay"; locations[18] = new google.maps.LatLng(-26.52278, -55.76584); locationtext[18] = "Uruguay"; locations[19] = new google.maps.LatLng(-29.11610, -65.31667); locationtext[19] = "Argentine"; locations[20] = new google.maps.LatLng(52.22764, 5.21375); locationtext[20] = "France"; locations[21] = new google.maps.LatLng(48.0976406, 15.4222894); locationtext[21] = "Rome"; locations[22] = new google.maps.LatLng(41.82641, 42.42986); locationtext[22] = "Syria"; locations[23] = new google.maps.LatLng(36.82641, 38.22986); locationtext[23] = "Jordan"; locations[24] = new google.maps.LatLng(34.82641, 32.22986); locationtext[24] = "Egypt"; locations[25] = new google.maps.LatLng(-24.67515, 158.22986); locationtext[25] = "Sydney"; function CustomMapType() {} CustomMapType.prototype.tileSize = new google.maps.Size(1200, 760); CustomMapType.prototype.maxZoom = 2; CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var div = ownerDocument.createElement('DIV'); var baseURL = 'http://www.protectronme.com/images/map.jpg'; div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.backgroundColor = '#1B2D33'; div.style.backgroundImage = 'url(' + baseURL + ')'; return div; }; CustomMapType.prototype.name = "Custom"; CustomMapType.prototype.alt = "Tile Coordinate Map Type"; var CustomMapType = new CustomMapType(); function centerMap() { map.setCenter(new google.maps.LatLng(37.4419, 12.1419)); } function makeMarker(location, text) { var marker = new google.maps.Marker({ map: map, icon: image, position: location }); markers.push(marker); if (jQuery.browser.msie && jQuery.browser.version == "7.0") { text = "<div style='width:80px; height:20px;'>" + text + "</div>"; } var contentString = text; var infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map, this); }); google.maps.event.addListener(marker, 'mouseout', function() { infowindow.close(map, this); }); } google.maps.event.addDomListener(window, 'load', init); 

 html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas"></div>