javascript - 如何避免在 Google Map API v3 自定义 map 和标记上重复

Question

我正在使用 Google Maps API v3。如何避免在我的项目中重复使用 map 和标记？

Link Here ，如何避免这种情况？下面是我的代码。

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

在这里为我的 map 添加位置

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)
);

添加自定义 map

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

我不确定“避免重复 map 和标记”是什么意思，但你的代码会更清晰为您的数据使用单一结构，如下所示:

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
    });