使用“我的地图”中的.kml文件的Google地图API；

Posted 2021-02-26

Sample script to use Google API to display a map with multiple marker layers that can be toggled on/off using checkboxes. The map data is provided using the .kml files provided from "My Maps" on Google, or Google Earth files.

<div id="map"></div>
 
<div id="controls">
	<p class="legend"><strong>Toggle a Checkbox to Show Map Points</strong></p>
	<ul>
		<li><input type="checkbox" id="layer1" onClick="boxclick(this, layer1);"/><label> Layer 1 </label></li>		
 
		<li><input type="checkbox" id="layer2" onClick="boxclick(this, layer2);"/><label> Layer 2 </label></li>
 
		<li><input type="checkbox" id="layer3" onClick="boxclick(this, layer3);"/><label> Layer 3</a></label></li>
	</ul>
</div>
 
<script type="text/javascript">
 
	$(document).ready(function() {
		$('#controls input:checkbox').removeAttr ('checked');
	});
 
 
	if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.300855, -82.471115), 12);
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.setMapType(G_PHYSICAL_MAP);
		map.addMapType(G_PHYSICAL_MAP);
 
    // Google kml files stored on server: http://mydomain.com/google/filename.kml
		var layer0 = new GGeoXml("http://mydomain.com/google/layer0.kml"); //Default onload layer
		var layer1 = new GGeoXml("http://mydomain.com/google/layer1.kml");
		var layer2 = new GGeoXml("http://mydomain.com/google/layer2.kml");
		var layer3 = new GGeoXml("http://mydomain.com/google/layer3.kml");
 
    // Show the defualt onload layer
		map.addOverlay(layer0);
	}
 
	//Toggle layers on/off using checkboxes
	function boxclick(box,category) {
        if (box.checked) {
          map.addOverlay(category);
        } else {
          map.removeOverlay(category);
        }
	}
 
</script>