GIS学习记录(五):OpenLayers显示Google地图
使用Google api v2版本需要域名对应的key, v3版本api可以直接使用
<script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
例子:
<!DOCTYPE html>
<html>
<head>
<title>Google</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/pageStyle.css" type="text/css" />
<script type="text/javascript" src="js/OpenLayers/lib/OpenLayers.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
<script type="text/javascript">
var map, layer_street;
function init() {
// Creating the Map Viewer
map = new OpenLayers.Map("map",
{
maxResolution:'auto',
maxExtent: new OpenLayers.Bounds(
-128 * 156543.03390625,
-128 * 156543.03390625,
128 * 156543.03390625,
128 * 156543.03390625
),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
layer_street = new OpenLayers.Layer.Google(
"Google Streets", // the default
{
numZoomLevels: 20 ,
projection: "EPSG:900913",
}
);
map.addLayer(layer_street);
map.zoomToMaxExtent();
map.setCenter(new OpenLayers.LonLat(12945347.18614,4859501.42103), 13);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
}
</script>
</head>
<body onload="init()">
<div id="map" class="bigmap"></div>
</body>
</html>
google使用投影EPSG:900013,因此需要设置projection为EPSG:900913
设置displayProjection为EPSG:4326,这样地图上鼠标MousePosition显示的经纬度
css/style.css: OpenLayers-2.11\theme\default\style.css
css/pageStyle.css:
@CHARSET "UTF-8"; body { margin: 0; padding: 0; height: 100%; } .bigmap { position: absolute; left: 0; top: 0px; padding: 0; width: 100%; height: 100%; border: 1px solid #333; }
参考:
Google (v3) Layer Example http://www.openlayers.org/dev/examples/google-v3.html
转载自:https://blog.csdn.net/iteye_1007/article/details/82303386