如何避免在Google Map API v3自定义地图和标记上重复

时间：2014-04-02 16:18:11

标签： javascript google-maps google-maps-api-3

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

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

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

2 个答案:

答案 0 :(得分：0)

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

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

答案 1 :(得分：0)

设置一个'center_changed'侦听器，其具有固定的边界，将地图限制为单个实例。来自Mike Williams' Google Maps Javascript v2 tutorial: Part 7 Restricting the range of map zooms and pans.

的概念

这适用于我（使用您的特定地图）：

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

proof of concept fiddle

代码段 

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>

相关问题
最新问题