Google地图上市级别分块显示
先来张效果图
具体的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8"/>
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="MapData.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
var polygonList = new Array(9);
var infowindow;
function Initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(26.08, 119.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
google.maps.event.addListener(map, 'zoom_changed', function () {
zoomLevel = map.getZoom();
if (zoomLevel == 0) {
map.setZoom(10);
}
});
polygonList.push(new InitializePolygon(map, this, FJFZ, "#ff0000", "#ffffff"));
polygonList.push(new InitializePolygon(map, this, FJPT, "#ff0000", "#ffffff"));
polygonList.push(new InitializePolygon(map, this, FJQZ, "#ff0000", "#ffffff"));
polygonList.push(new InitializePolygon(map, this, FJXM, "#ff0000", "#ffffff"));
polygonList.push(new InitializePolygon(map, this, FJLY, "#ff0000", "#ffffff"));
polygonList.push(new InitializePolygon(map, this, FJSM, "#ff0000", "#ffffff"));
polygonList.push(new InitializePolygon(map, this, FJNP, "#ff0000", "#ffffff"));
polygonList.push(new InitializePolygon(map, this, FJND, "#ff0000", "#ffffff"));
polygonList.push(new InitializePolygon(map, this, FJZZ, "#ff0000", "#ffffff"));
var polyline = new google.maps.Polyline({
path: linePath,
map:map,
strokeColor:"#ff0000",
strokeWeight:2,
strokeOpacity:0.6
});
}
function InitializePolygon(map, polygon, linePath, fillColor, strokeColor) {
var linePathList = linePath.split(';');
linePath = new Array();
for (var i = 0; i < linePathList.length; i++) {
var track = linePathList[i].split(',');
linePath.push(new google.maps.LatLng(parseFloat(track[1]), parseFloat(track[0])));
}
polygon = new google.maps.Polygon({
paths: linePath,
map: map,
strokeColor: "#000000",
strokeWeight: 1,
strokeOpacity: 0,
fillColor: "#000000",
fillOpacity: 0
});
google.maps.event.addListener(polygon, 'mouseover', function (e) {
polygon.setOptions({
fillOpacity:0.5,
fillColor: fillColor,
strokeColor: strokeColor
});
var zoomLevel;
infowindow = new google.maps.InfoWindow(
{ content: 'Zoom Level Test',
size: new google.maps.Size(50, 50),
position: e.latLng
});
infowindow.open(map);
});
google.maps.event.addListener(polygon, 'mouseout', function () {
polygon.setOptions({
fillOpacity: 0,
fillColor: "#000000",
strokeColor: "#000000"
});
infowindow.close();
});
}
window.onload = Initialize;
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
源代码