您好,目前我正在尝试将自定义谷歌地图图层集成到我的 Webfocus8 驱动的业务应用程序中。我已经编写了执行此操作的 Javascript/HTML5 代码,但我不知道将其放在应用程序的哪个位置。
如果其他人需要,这是代码。
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var layers=[];
layers[0] = new google.maps.KmlLayer('http://www.hpc.ncep.noaa.gov/kml/fop/fopbody.kml',
{preserveViewport: true});
layers[1] = new google.maps.KmlLayer('http://www.nhc.noaa.gov/gis/forecast/archive/latest_wsp34knt120hr_tenthDeg.kmz',
{preserveViewport: true});
layers[2] = new google.maps.KmlLayer('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month_depth_link.kml',
{preserveViewport: true});
var map;
function initialize() {
var latlng = new google.maps.LatLng(40.744771, -73.3171305);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
function toggleLayers(i)
{
if(layers[i].getMap()==null) {
layers[i].setMap(map);
}
else {
layers[i].setMap(null);
}
document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>";
}
</script>
</head>
<body onload="initialize()">
Flood <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
Hurricane<input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
Earthquake<input type="checkbox" id="layer_03" onclick="toggleLayers(2);"/>
<div id="map_canvas" style="height:800px; width:800px;"></div>
<div id="status"></div>
</body>
</html>