调用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>

 

四、说明

1、OpenLayers必不可少的是target、layers和view,掌握这些内容就能掌握基本的地图显示

2、搜索功能的实现是通过innerHTML先清除div内容,在通过实例OpenLayers添加内容。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值