调用OpenLayers，实现简单的地图搜索_openlayers 实现搜索经纬度定位-优快云博客

本文介绍了OpenLayers在WEB-GIS开发中的应用，通过实例展示了如何使用OpenLayers加载地图并实现简单搜索功能，包括设置地图中心位置、缩放等级及响应用户输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、OpenLayers介绍

用于WEB-GIS开发的js包，很强很好用。

二、代码功能介绍

基于OpenLayers的地图加载和显示地图，并做一个简单的搜索功能。

三、代码

<!doctype html>
<html lang="en">

  <head>
  
	<link rel="stylesheet" href="OpenLayers/css/ol.css" type="text/css">
	<script src="OpenLayers/js/ol.js"></script>

	<title>Z</title>
  
  </head>
  <style>
      
	.map {
	  width: 100%;
	}

	#turns{
		position: fixed;
		right: 1rem;
		top: 	1rem;
		z-index: 9999;
	}

	#x{
		background: #F4F4F4;
	}

	#y{
		background: #F4F4F4;
	}
	
  </style>  
  <body>
	
	<div id='turns'>
	
		<input id="x" type="text" placeholder="请输入经度" value=''/>
		
		<input id="y" type="text" placeholder="请输入纬度" value=''/>
	
		<input type="button" value="点击切换" onclick="change()"/>

	</div>
	
    <div id="map" class="map"></div>
    
	<script type="text/javascript">

	// 屏幕高度
	document.getElementById("map").style.height = window.innerHeight - 20 + "px";
	
	// 初始值
	var x = 119.7218677900;		
	var y = 30.2611135600;
	
	var zoom = 15;
	
	// 实例化地图
	var map = new ol.Map({
			
			// 定位html🐎中的位置
			target: 'map',
			
			layers: [
			layers = new ol.layer.Tile({
				source: new ol.source.OSM()
			})
			],
			
			view: new ol.View({
			// 中心位置
			center: ol.proj.fromLonLat([x, y]),
			// 缩放等级
			zoom: zoom
			})
		});
	
	function change(){
	
		var x = document.getElementById("x").value;

		var y = document.getElementById("y").value;
	
		if(x == '' || y == ''){
		
			alert("请输入经纬度！");

		}else{
			
			// 重来
			document.getElementById("map").innerHTML = '';
			
			// 要是能重来，我就选李白
			var map = new ol.Map({
			
			// 定位html🐎中的位置
			target: 'map',
			
			layers: [
			layers = new ol.layer.Tile({
				source: new ol.source.OSM()
			})
			],
			
			view: new ol.View({
			// 中心位置
			center: ol.proj.fromLonLat([x, y]),
			// 缩放等级
			zoom: zoom
			})
		});
			// alert(map);

		}
		
	}
    </script>
  
  </body>

</html>