javascript - 使用 Google Map API v3 的国家边界

Question

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

score 10 · Accepted Answer

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

FusionTables 中的自然地球数据集中有可用的国家多边形。您可以随意设置它们的样式。

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

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

代码片段：

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<table>
  <tr>
    <td>
      <div id="map_canvas" style="height:200px; width:300px;"></div>
    </td>
    <td>
      <div id="info"></div>
    </td>
  </tr>
</table>

score 10 · Accepted Answer

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

在我的下一个工作示例中，我展示了使用示例渲染的世界国家和美国国家边界Data Layer。您当然可以使用自己的边界文件。如果您没有可用的 GeoJson 版本（只有 Shapefile 或 KML 文件），您可以使用 mapshaper 等实用程序将它们转换为GeoJson（只需运行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>

score 0 · Accepted Answer

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

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

javascript - 使用 Google Map API v3 的国家边界

3 回答 3

Related

Reference