允许选择国家和地区仅放大到国家/地区级别

时间:2013-06-26 10:11:19

标签: javascript html google-maps maps

我想使用谷歌地图,但只在国家层面,即我想在单一窗口中显示整个世界地图,用户应该能够选择任何国家点击该国家,我也应该能够显示一些弹出窗口我也希望从JS中选择国家的价值。请指导我这个。我在谷歌上做了这个,但没有完整的信息。

1 个答案:

答案 0 :(得分:0)

结合以下两个例子:

  1. Zoom to country
  2. clickable world map
  3. click to zoom to country

    var map=null;
    var geocoder = null;
    var kmlLayer = null;
    var infoWindow = new google.maps.InfoWindow(); // InfoWindow
    
    function openIW(layerEvt) {
      if (layerEvt.row) {
        var content = layerEvt.row['admin'].value;
      } else if (layerEvt.featureData) {
        var content = layerEvt.featureData.name;
      }
      document.getElementById('info').innerHTML = "you clicked on:<br>"+content;
      findAddress(content);
    }
    
    function initialize() {
      geocoder = new google.maps.Geocoder();
      var chicago = new google.maps.LatLng(36.4278,-15.9);
      var myOptions = {
        zoom: 2,
        center: chicago,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
    
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
      google.maps.event.addListener(map, "click", function() {
        document.getElementById('info').innerHTML = "";
      });
    
    
      kmlLayer = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/world_countries_kml.xml', {preserveViewport: true, suppressInfoWindows: true} );
      kmlLayer.setMap(map);
    
      google.maps.event.addListener(kmlLayer, 'click', openIW);
    
    }    
    
    function findAddress(address) {
      if ((address != '') && geocoder) {
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
             if (results && results[0] && results[0].geometry && results[0].geometry.viewport) 
               map.fitBounds(results[0].geometry.viewport);
             } else {
               alert("No results found");
             }
          } else {
            alert("Geocode was not successful for the following reason: " + status);
          }
        });
      }
    }