PC网页端获取城市位置名称

末蓝、 2022-02-20 07:59 396阅读 0赞

1、登录百度地图API官网

[http://lbsyun.baidu.com/][http_lbsyun.baidu.com]

2、开发文档——web开发——JavaScript ApI

在API文档中有详细的开发步骤和相关的Demo

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

3、立即使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

2、申请秘钥

应用名称随意，只要后面是输入正确就可以

应用类型：浏览器端

白名单：由于是本地项目，不是需要发布的项目，所以我输入了\*

点击提交

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3][]

## ##

--------------------

### ***html代码如下*** ###

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!DOCTYPE HTML>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    	<script src="js/jquery-3.3.1.min.js"></script>
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    	<title>浏览器定位</title>
    </head>
    <body>
    	<h1 id="allmap"></h1>
    </body>
    </html>
    <script type="text/javascript">
    	// 百度地图API功能
    	var map = new BMap.Map("allmap");
    	var point = new BMap.Point(116.331398,39.897445);
    	map.centerAndZoom(point,12);
    	var geolocation = new BMap.Geolocation();
    	geolocation.getCurrentPosition(function(r){
    		if(this.getStatus() == BMAP_STATUS_SUCCESS){
    			var mk = new BMap.Marker(r.point);
    			map.addOverlay(mk);
    			map.panTo(r.point);
    			alert('您的位置：'+r.point.lng+','+r.point.lat);
    			//根据经纬度获取城市的名称
    			 // 使用百度地图JS API
    	var point = new BMap.Point(r.point.lng,r.point.lat);
    	var geoc = new BMap.Geocoder();
    	geoc.getLocation(point, function(rs){
    		var addComp = rs.addressComponents;
    		$("#allmap").html(addComp.city);
    		alert('您所在城市：'+addComp.city);
    	});
    		}
    		else {
    			alert('failed'+this.getStatus());
    		}        
    	},{enableHighAccuracy: true})
    	//关于状态码
    	//BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
    	//BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
    	//BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
    	//BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
    	//BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
    	//BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
    	//BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
    	//BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
    	//BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)
    </script>

### ***原理 根据经纬度来定位*** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5][]

[http_lbsyun.baidu.com]: http://lbsyun.baidu.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220220/360b1c53d22c4e4bb5076b5be24b24b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220220/98e87efe96154d2d8c7b7108a2296f0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220220/184f28fb4d7745749b9005f08a1fc5ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3]: /images/20220220/4aa7781694604102986c5a7b90835d1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4]: /images/20220220/ded03ae99c0d473fbb24562eea00c69a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5]: /images/20220220/4c2ea9cd9b1c49dd8658e12180df73f2.png