百度地图调用及定位

素颜马尾好姑娘i 2022-10-12 00:43 395阅读 0赞

### 文章目录 ###

*   *  百度地图调用及定位

## 百度地图调用及定位 ##

通过以下链接登录百度账号：  
[https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5][https_lbsyun.baidu.com_index.php_title_E9_A6_96_E9_A1_B5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210701202956429.png]  
一，得到AK  
首先需要申请百度地图开放平台AK密钥  
先注册百度帐号然后进入百度地图开放平台API控制台  
[http://lbsyun.baidu.com/apiconsole/key][http_lbsyun.baidu.com_apiconsole_key]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]  
创建应用，我这里创建了一个**浏览器端应用**（具体该申请什么类型可以看下区别），因为测试用，IP没做限制，上线应该用公司帐号申请并做IP限制。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]  
二，将AK应用到例子  
[地图示例][Link 1]

<html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    	<style type="text/css"> body, html,#allmap { width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style>
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Lcc8yhFuxXobnjzM0atH3PqqEYSgepSe"></script>
    	<title>浏览器定位</title>
    </head>
    <body>
    	<div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); //实时 手机gps wifi 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); //将地图中心设置为获得的当前位置 getAddress(r.point); //alert('您的位置：'+r.point.lng+','+r.point.lat); } else { alert('failed'+this.getStatus()); } },{ enableHighAccuracy: true}) //获取地址信息，设置地址label function getAddress(point){ var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs){ var addComp = rs.addressComponents; var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址 console.log(address); }); } //关于状态码 //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>

[https_lbsyun.baidu.com_index.php_title_E9_A6_96_E9_A1_B5]: https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/431f7f874cf547b28b62d9971436b9a9.png
[20210701202956429.png]: /images/20221005/e7b7fb7a7223417cadc01d8ce5742d53.png
[http_lbsyun.baidu.com_apiconsole_key]: http://lbsyun.baidu.com/apiconsole/key
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/33c04eacca1947f7b06e547d7b0a3161.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/1eef4b90baac4e38b4e074f676508f36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/9ee9d20372c84052888e98b38966031c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/0064053c55d3474b83923c7134fd865d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/94b18d3cd93e490a93ec389908ab63c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]: /images/20221005/e0df721f95aa4d5f8255556d6d55c24c.png
[Link 1]: https://lbsyun.baidu.com/jsdemo.htm#a1_2