1. 步驟
1) 全局變量
var map, layer0;
var layer1;
var layer2;
2) 添加地圖容器
// 創(chuàng)建地圖容器
map = new OpenLayers.Map('map1',
{
controls: [
new OpenLayers.Control.PanZoomBar(),//縮放面板的工具控件
new OpenLayers.Control.LayerSwitcher(), //圖層切換控件
new OpenLayers.Control.Navigation(), //此控件處理伴隨鼠標(biāo)事件的地圖瀏覽
new OpenLayers.Control.MousePosition()//此控件顯示鼠標(biāo)移動時嫡丙，所在點(diǎn)的地理坐標(biāo)
]
}
);
//添加控件的第二種方法
map.addControl(new OpenLayers.Control.OverviewMap);
3) 添加第三方地圖圖層
// 添加圖層0
layer0 = new Zondy.Map.GoogleLayer("Google Map VEC",
{
// 添加GoogleMap的矢量圖層
layerType: Zondy.Enum.GoogleLayerType.VEC,
// 設(shè)為底圖
isBaseLayer: true
}
);
// 添加圖層1
layer1 = new Zondy.Map.GoogleLayer("Google Map ROAD",
{
// 添加GoogleMap的道路圖層
layerType: Zondy.Enum.GoogleLayerType.ROAD,
isBaseLayer: false
}
);
// 添加圖層2
layer2 = new Zondy.Map.GoogleLayer("Google Map RASTER",
{
// 添加GoogleMap的柵格圖層
layerType: Zondy.Enum.GoogleLayerType.RASTER,
isBaseLayer: false
}
);
4) 將圖層添加到地圖容器中
map.addLayers([layer0,layer1,layer2]);
5) 設(shè)置地圖顯示中心坐標(biāo),地圖縮放等級
<!--設(shè)置地圖顯示中心坐標(biāo),地圖縮放等級-->
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
注:雷同代碼不再做注釋,如有不懂請參閱前面發(fā)布的文章
2.完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Map</title>
<link href="../css/mapDefault.css" type="text/css" rel="stylesheet"/>
<script src="../libs/OpenLayers.js" type="text/javascript"></script>
<script src="../libs/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../libs/zdclient.js" type="text/javascript"></script>
<script type="text/javascript">
var map, layer0;
var layer1;
var layer2;
function init() {
// 創(chuàng)建地圖容器
map = new OpenLayers.Map('map1',
{
controls: [
new OpenLayers.Control.PanZoomBar(),//縮放面板的工具控件
new OpenLayers.Control.LayerSwitcher(), //圖層切換控件
new OpenLayers.Control.Navigation(), //此控件處理伴隨鼠標(biāo)事件的地圖瀏覽
new OpenLayers.Control.MousePosition()//此控件顯示鼠標(biāo)移動時简识，所在點(diǎn)的地理坐標(biāo)
]
}
);
//添加控件的第二種方法
map.addControl(new OpenLayers.Control.OverviewMap);
// 添加圖層0
layer0 = new Zondy.Map.GoogleLayer("Google Map VEC",
{
// 添加GoogleMap的矢量圖層
layerType: Zondy.Enum.GoogleLayerType.VEC,
// 設(shè)為底圖
isBaseLayer: true
}
);
// 添加圖層1
layer1 = new Zondy.Map.GoogleLayer("Google Map ROAD",
{
// 添加GoogleMap的道路圖層
layerType: Zondy.Enum.GoogleLayerType.ROAD,
isBaseLayer: false
}
);
// 添加圖層2
layer2 = new Zondy.Map.GoogleLayer("Google Map RASTER",
{
// 添加GoogleMap的柵格圖層
layerType: Zondy.Enum.GoogleLayerType.RASTER,
isBaseLayer: false
}
);
// 將圖層添加到地圖中
map.addLayers([layer0,layer1,layer2]);
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
}
</script>
</head>
<body onload="init()">
<div id="map1">
</div>
</body>
</html>
3.效果
Paste_Image.png
Paste_Image.png
