openlayers

Openlayers加载在线地图

by giser · 2019-04-03

html代码一map.html：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Map</title>	
    <script type="text/javascript" src="js/OpenLayers-2.13.1/OpenLayers.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="js/test.js"></script> 
  </body>
</html>

html代码二test.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load map</title>
<script type="text/javascript">
	function init(){
		var subframe = document.getElementById("subframe");
		subframe.contentWindow.initMap();
	}
</script>   
</head>
<body onload="init()">
<iframe id="subframe" src="map.html" ></iframe>
</body>
</html>

js代码test.js

function initMap(){
    Map = new OpenLayers.Map('map');
    Map.addLayers(getGaodeMap());
    //Map.addLayers(getGoogleMap());
    Map.zoomTo(1);
}
function getGaodeMap(){
    var gdlayer = new OpenLayers.Layer.XYZ("高德地图", [  
    "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",  
    "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",  
    "http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",  
    "http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}"  
	], {  
	    isBaseLayer: true,  
	    visibility: true,  
	    displayInLayerSwitcher: true  
	});
	return [gdlayer];
}

转载自：https://blog.csdn.net/hjhandhf/article/details/51648603

相关推荐

Tags: openlayers

You may also like...