网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

web前端之jquery入门2,实现百度地图的位置查找--地址解析

2021/6/27 0:09:47 人评论

百度地图的位置查找–地址解析 一、加载百度地图 百度地图开放平台http://lbsyun.baidu.com/ 开放文档——webGIS——JaveScriptAPI Javascript API 产品简介 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互…

百度地图的位置查找–地址解析

一、加载百度地图
百度地图开放平台http://lbsyun.baidu.com/
开放文档——webGIS——JaveScriptAPI
Javascript API
产品简介
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。
百度地图JavaScript API支持HTTP和HTTPS,免费对外开放,可直接使用。接口使用无次数限制。在使用前,您需**先申请密钥(ak)**才可使用。在您使用百度地图JavaScript API之前,请先阅读百度地图API使用条款。任何非营利性应用请直接使用,商业应用请参考使用须知。
兼容性
.浏览器:IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
.操作系统:Windows、Mac、Linux
.移动平台:iPhone、Android
开发指南
下面我们分步向您介绍如何快速开始地图开发:
1申请百度账号和ak

2准备页面
根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明:

<!DOCTYPE html>

您也可以根据需要选择其他类型的文档声明,这样浏览器会以标准的方式对页面进行渲染,保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。
3适应移动端页面展示
下面我们添加一个meta标签,以便使您的页面更好的在移动平台上展示。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  

4设置容器样式
设置容器样式大小,使地图充满整个浏览器窗口:

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    </style> 

5引用百度地图API文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

6创建地图容器元素
地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素。

<div id="container"></div> 

7创建地图实例
位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

var map = new BMap.Map("container"); 

注意:
1.在调用此构造函数时应确保容器元素已经添加到地图上。
2.命名空间 API使用BMap作为命名空间,所有类均在该命名空间之下,比如:BMap.Map、BMap.Control、BMap.Overlay。
8设置中心点坐标
这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,其中116.404表示经度,39.915表示纬度。(为天安门坐标)

var point = new BMap.Point(116.404, 39.915); 

注意:在使用百度地图JavaScript API服务时,需使用百度BD09坐标,如使用其他坐标( WGS84、GCJ02)进行展示,需先将其他坐标转换为BD09,详细说明请参考坐标转换说明,请勿使用非官方的转换方法!!!
9地图初始化,同时设置地图展示级别
在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。

map.centerAndZoom(point, 15);  

至此,我们就快速创建了一张以天安门为中心的地图~
二、逆/地址分析
地址解析服务提供从地址转换到经纬度的服务,反之,逆地址解析则提供从经纬度坐标转换到地址的转换功能。
提供的转换类,.Geocoder:逆/地址解析,用于坐标与地址间的相互转换。详情见类参考
1、地址解析服务
.根据地址描述获得坐标信息。
百度地图API提供Geocoder类进行地址解析,您可以通过Geocoder.getPoint(),方法来将一段地址描述转换为一个坐标。
如下示例,我们将地址“北京市海淀区上地10街10号”转换获取该位置的地理经纬度坐标,并在这个位置上添加一个标注。注意:在调用Geocoder.getPoint()方法时您需要提供地址解析所在的城市(本例为“北京市”)。

var map = new BMap.Map("l-map");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      // 创建地址解析器实例     var myGeo = new BMap.Geocoder();      // 将地址解析结果显示在地图上,并调整地图视野    
myGeo.getPoint("北京市海淀区上地10街10号", function(point){      
    if (point) {      
        map.centerAndZoom(point, 16);      
        map.addOverlay(new BMap.Marker(point));//标注点,红气球样式      
    }      
 }, "北京市");

2、逆地址解析服务
.根据坐标点获得该地点的地址描述,是地址解析的逆向转换。
您可以通过Geocoder.getLocation(),方法获得地址描述。当解析工作完成后,您提供的回调函数将会被触发。如果解析成功,则回调函数的参数为GeocoderResult对象,否则为null。

1指定经纬度获取地址
var map = new BMap.Map("l-map");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      // 创建地理编码实例      var myGeo = new BMap.Geocoder();      // 根据坐标得到地址描述    
myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){      
    if (result){      
    alert(result.address);      
    }      });
2鼠标点击地图获取地址
var map = new BMap.Map("allmap");var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);var geoc = new BMap.Geocoder();    
map.addEventListener("click", function(e){        
    var pt = e.point;
    geoc.getLocation(pt, function(rs){
        var addComp = rs.addressComponents;
        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    });        });

四、注意
Input 文本框标记,里的placeholder是占位符
只有html5里有button按钮
Head里的script标记用TAB键,body里用enter

下面是一个百度地图地址解析的应用示例,代码如下
一、map.css

*{
	margin: 0;
	padding: 0;
}
html,body{
	height: 100%;
	width: 100%;
}
.searchBar{
	text-align: center;
}
input,#searchBtn{
	width: 200px;
	height: 40px;
	margin: 5px 0;
	border: 1px solid,black;
	border-radius: 5px;
	font-size: 16px;
}
#map{
	width: 100%;
	height: 100%;
}

二、html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>学习百度地图的位置查找--地址解析</title>
	<style type="text/css">
	    html{height:100%}    
	    body{height:100%;margin:0px;padding:0px}    
	    #myMap{height:100%}    
	</style>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xrKze9MZHDxiinDwoCNHhxAeldGfCT2r"></script>
</head>
<body>
	<input type="text" id="address">
	<button id="find">查找</button>
	<div class="myMap" id="myMap"></div>
	<script type="text/javascript">
		//1.创建百度地图实例
		var map = new BMap.Map("myMap");
		//2.创建地图的中心点
		var point = new BMap.Point(116.404, 39.915);
		//3.以中心点创建地图并设置缩放级别
		map.centerAndZoom(point, 15);
		//以下代码是通过按钮的点击来运行的
		$(function(){
			$('#find').click(function(){
				//当我们点击了按钮以后,获取文本框的值
				var address = $('#address').val();
				// 创建地址解析器实例     
				var myGeo = new BMap.Geocoder();
				// 将地址解析结果显示在地图上,并调整地图视野    
				myGeo.getPoint(address, function(point){      
				    if (point) {      
				        map.centerAndZoom(point, 16);      
				        map.addOverlay(new BMap.Marker(point));      
				    }
				 }, 
				"石家庄市");
			});
		});
	</script>
</body>
</html>

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?