调用百度地图JavaScript API实现地址解析

最新推荐文章于 2024-06-05 17:22:57 发布

zxuanxuanz

最新推荐文章于 2024-06-05 17:22:57 发布

阅读量1.4k

点赞数 1

分类专栏：技巧文章标签：百度地图地址解析

本文链接：https://blog.csdn.net/qq_40542728/article/details/103253717

版权

技巧专栏收录该内容

22 篇文章 3 订阅

订阅专栏

一、百度地图

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。

二、步骤

（1）登录百度账号

（2）创建应用

1、应用类型选择浏览器端。

2、JavaScript API 选项要进行勾选。

3、测试时，可以在白名单中直接书写一个星号即可（*）。

（3）获取密匙AK

（4）获取JavaScript API服务方法

//参数v表示您加载API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。

http://api.map.baidu.com/api?v=1.4

//使用JavaScript APIv2.0请先申请密钥ak，按此方式引用。

http://api.map.baidu.com/api?v=2.0&ak=您的密钥

（5）使用

<!DOCTYPE html>
<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="https://api.map.baidu.com/api?v=2.0&ak=yourAk=1"></script>
	<script src="./js/global.js"></script>
	<script src="./js/vue.min.js"></script>
	<link rel="stylesheet" href="./css/styles.css">
	<title>地址解析</title>
</head>
<body>
	<div id="app" v-cloak>
			<header class="topbar">
					<span class="fl" onClick="javascript:history.go(-1)">
						<img src="images/head_ic_back.png">
					</span>
					<!-- H3-手动输入 -->
					<h2 class="mapTitle">{{address}}</h2>

				</header>
				<div class="h88"></div>
	</div>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	
	new Vue({
            mounted(){
            	if(getUrlParam("address") != null && typeof(getUrlParam("address")) != "undefined"){
            		this.address = getUrlParam("address");
                }
         		// this.address = "广州市 天河区 棠安路自编188号";//暫時寫死
				this.getMap();
				// 重写alert去掉网址
				window.alert = function(name){
				var iframe = document.createElement("IFRAME");
				iframe.style.display="none";
				iframe.setAttribute("src", 'data:text/plain,');
				document.documentElement.appendChild(iframe);
				window.frames[0].window.alert(name);
				iframe.parentNode.removeChild(iframe);
				}
            },
            el:"#app",
            data: { 
				language:language,
				address:'',
            },
            methods:{  
            	getMap(){
					// 百度地图API功能
					var map = new BMap.Map("allmap");
					var point = new BMap.Point(116.331398,39.897445);
					map.centerAndZoom(point,12);
					// map.addControl(new BMap.NavigationControl());
					map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
					map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
					map.addControl(new BMap.NavigationControl());    
					map.addControl(new BMap.ScaleControl());    
					map.addControl(new BMap.OverviewMapControl());    
					// 创建地址解析器实例
					var myGeo = new BMap.Geocoder();
					// 将地址解析结果显示在地图上,并调整地图视野
					myGeo.getPoint(this.address, function(point){
						if (point) {
							map.centerAndZoom(point, 16);
							map.addOverlay(new BMap.Marker(point));
						}else{
							alert("地址无效");
						}
					});
            	},
            	
            }
        });
</script>

三、关于百度地图 HTTPS 的说明

JavaScript API首家支持Https，已全面开放，无需申请Https服务可直接使用。

//如果使用JavaScript API ，需要加一个特殊字段 (s=1)：

https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1；

//对于Web API 无需加特殊字段，直接使用 HTTPS协议访问即可，如Geocoding：

https://api.map.baidu.com/geocoder/v2/?ak=你的秘钥&callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1

四、其他

（1）地图API示例

http://lbsyun.baidu.com/jsdemo.htm#i7_1

（2）JavaScript API文档

http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/geocoding

（3）附上高德地图官方文档和示例链接

https://lbs.amap.com/api/javascript-api/guide/abc/prepare

https://lbs.amap.com/api/javascript-api/example/geocoder/geocoding

（4）其他参考链接

https://www.jianshu.com/p/aa31c46623bf

https://blog.csdn.net/lp1052843207/article/details/73087820

https://www.jianshu.com/p/83e9acb5f971

五、IOS调用H5页面中的百度地图无法显示

（1）原因

ios已经要求在APP中的所有对外连接都要使用https，但是我们用的秘钥链接是使用的http；

（2）解决：将秘钥连接改为https。但是仅JavaScript API 2.0 版本支持https，其他JavaScript API版本均不支持。使用https服务，请先检查您的版本是不是2.0版本。

zxuanxuanz

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
调用百度地图JavaScript API实现地址解析

一、百度地图百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。二、步骤（1）登录百度账号...
复制链接

扫一扫