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

Posted 2021-05-20

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