Javascript 使用 Google Map API v3 的国家边界

Country boundries using Google Map API v3

提问by SOF User

Is there anyway so I can get boundries of countries in polygon coordinates value using Google map API.

无论如何，我可以使用谷歌地图 API 以多边形坐标值获取国家的边界​​。

采纳答案by geocodezip

See this similar question: Google Maps V3: Draw German State Polygons?

看到这个类似的问题： Google Maps V3: Draw German State Polygons?

The Natural Earth Data Set in FusionTables has country polygons available in it. You can style them as you like.

FusionTables 中的自然地球数据集有可用的国家多边形。您可以随心所欲地设计它们。

I used it to create this example: http://www.geocodezip.com/v3_FusionTablesLayer_worldmap_linkto.html

我用它来创建这个例子：http: //www.geocodezip.com/v3_FusionTablesLayer_worldmap_linkto.html

Here is an example that uses a KmlLayer: http://www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries_simple.html

这是使用 KmlLayer 的示例：http: //www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries_simple.html

code snippet:

代码片段：

var kmlLayer = null;
var map = null;

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

function initialize() {
  var chicago = new google.maps.LatLng(36.4278, -15.9);
  var myOptions = {
    zoom: 0,
    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);
}
google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js"></script>
<table>
  <tr>
    <td>
      <div id="map_canvas" style="height:200px; width:300px;"></div>
    </td>
    <td>
      <div id="info"></div>
    </td>
  </tr>
</table>

回答by Matej P.

If you want more control over the displayed boundaries, I suggest using google.maps.Datalayer instead of Fusion Tables. Fusion tables and Fusion Layer has their limitations, for example on the World Map in geocodezip's example you can see, that if you zoom out the map, the boundaries will collapse to points. With Data Layeryou can style specific boundaries, or hide them. Fusion Layerallows only conditional style changes. You can also add your own click, mouseover, mouseoutlisteners, you can change the boundary layer on the fly and more. Of course sometimes Fusion Layeris better alternative, for example if you have data contained in Fusion Tables, but if you want more control Data Layeris more than worthy alternative.

如果您想更好地控制显示的边界，我建议使用google.maps.Data图层而不是 Fusion Tables。融合表和融合层有其局限性，例如在 geocodezip 示例中的世界地图上，您可以看到，如果缩小地图，边界将折叠为点。使用数据层，您可以设置特定边界的样式，或隐藏它们。Fusion Layer只允许有条件的样式更改。您还可以添加自己的click, mouseover,mouseout侦听器，可以动态更改边界层等等。当然，有时Fusion Layer是更好的选择，例如，如果您有包含在 Fusion Tables 中的数据，但如果您想要更多的控制权，那Data Layer是值得的选择。

In my next working example I show World Country and US States boundaries rendered using Data Layeras example. You can of course use your own boundary files. If you don't have GeoJson version available (only Shapefiles or KML files), you can convert them to GeoJson using utilities like mapshaper(simply run: mapshaper -i myshp.shp -o format=geojson out.geo.json)

在我的下一个工作示例中，我展示了使用Data Layer示例渲染的世界国家和美国国家边界。您当然可以使用自己的边界文件。如果没有可用的（只形状文件或KML文件）GeoJSON的版本，你可以使用类似的实用程序将它们转换为GeoJSON的mapshaper（只需运行：mapshaper -i myshp.shp -o format=geojson out.geo.json）

var map = null;
  var my_boundaries = {};
  var data_layer;
  var info_window;

  //initialize map on document ready
  $(document).ready(function(){
   var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup
   var myOptions = {
    zoom: 2,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   google.maps.event.addListener(map, 'click', function(){
    if(info_window){
     info_window.setMap(null);
     info_window = null;
    }
   });
 
 $('#boundary_load_select').change(function(){
  if($(this).val()==1){
   loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/world.countries.geo.json");
  }else{
   loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/us.states.geo.json");
  }
 });
 loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/world.countries.geo.json");
  });

  function initializeDataLayer(){
 if(data_layer){
  data_layer.forEach(function(feature) {
      data_layer.remove(feature);
  });
  data_layer = null;
 }
 data_layer = new google.maps.Data({map: map}); //initialize data layer which contains the boundaries. It's possible to have multiple data layers on one map
   data_layer.setStyle({ //using set style we can set styles for all boundaries at once
    fillColor: 'white',
    strokeWeight: 1,
    fillOpacity: 0.1
   });

   data_layer.addListener('click', function(e) { //we can listen for a boundary click and identify boundary based on e.feature.getProperty('boundary_id'); we set when adding boundary to data layer
    var boundary_id = e.feature.getProperty('boundary_id');
    var boundary_name = "NOT SET";
    if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name;
    if(info_window){
     info_window.setMap(null);
     info_window = null;
    }
    info_window = new google.maps.InfoWindow({
     content: '<div>You have clicked a boundary: <span style="color:red;">' + boundary_name + '</span></div>',
     size: new google.maps.Size(150,50),
     position: e.latLng, map: map
    });
   });
 
 data_layer.addListener('mouseover', function(e) {
  data_layer.overrideStyle(e.feature, {
   strokeWeight: 3,
   strokeColor: '#ff0000'
  });
 });
 
 data_layer.addListener('mouseout', function(e) {
  data_layer.overrideStyle(e.feature, {
   strokeWeight: 1,
   strokeColor: ''
  });
 });
  }

  function loadBoundariesFromGeoJson(geo_json_url){
 initializeDataLayer();
   $.getJSON(geo_json_url, function(data){
    if(data.type == "FeatureCollection"){ //we have a collection of boundaries in geojson format
     if(data.features){
      for(var i = 0; i < data.features.length; i++){
     var boundary_id = i + 1;
       var new_boundary = {};
       if(!data.features[i].properties) data.features[i].properties = {}; 
     data.features[i].properties.boundary_id = boundary_id; //we will use this id to identify boundary later when clicking on it
       data_layer.addGeoJson(data.features[i], {idPropertyName: 'boundary_id'});
     new_boundary.feature = data_layer.getFeatureById(boundary_id);
       if(data.features[i].properties.name) new_boundary.name = data.features[i].properties.name;
     if(data.features[i].properties.NAME) new_boundary.name = data.features[i].properties.NAME;
       my_boundaries[boundary_id] = new_boundary;
      }
     }
   if(my_boundaries[24]){ //just an example, that you can change styles of individual boundary
    data_layer.overrideStyle(my_boundaries[24].feature, {
     fillColor: '#0000FF',
     fillOpacity: 0.9
    });
   }
    }
   });
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;" >
 <select id="boundary_load_select">
  <option value="1">Load World Boundaries</option>
  <option value="2">Load US States Boundaries</option>
 </select>
 <div id="map_canvas" style="height:400px; width:500px;"></div>
</body>

回答by Tahir Akram

I guess by getting boundaries, you want to draw polygon on their borders. For that you must know the coordinates that will help to draw the polygon. I have did this thing only for US. I have all coordinates of all states. And I draw polygon on every state. That makes US highlighted.

我想通过获得边界，您想在边界上绘制多边形。为此，您必须知道有助于绘制多边形的坐标。我只为美国做过这件事。我有所有州的所有坐标。我在每个州都画多边形。这让美国突出。

You can see my this questionfor US solution. But for other countries, you must need to know the coordinates.

你可以看到我这个问题的美国解决方案。但是对于其他国家，您必须知道坐标。