使用百度地图api获取地理位置JS使用百度地图api获取地理位置

119 阅读 0 评论 79 点赞

我是靠谱客的博主强健西牛，最近开发中收集的这篇文章主要介绍使用百度地图api获取地理位置JS使用百度地图api获取地理位置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

JS使用百度地图api获取地理位置

文章目录

JS使用百度地图api获取地理位置
- 1.获取地图
- - 1.1使用步骤：
  - 1.2获取ak的步骤：
  - 1.3代码示例
- 2.获取定位信息

1.获取地图

参考文档：获取地图文档

1.1使用步骤：

1.2获取ak的步骤：

获取地址：获取ak

获取完成后：

1.3代码示例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>使用百度地图api获取地理位置信息</title>
		<style type="text/css">
			html {
				height: 100%
			}
			
			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}
			
			#container {
				height: 100%
			}
		</style>
		// ak:为百度申请的ak
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=HpVGGX5OqiDCl32i8VucaD0UKC7rRuQ2"></script>
	</head>

	<body>
		<div id="container"></div>
		<script type="text/javascript">
			//			创建地图实例
			var map = new BMapGL.Map("container");
			//			设置中心点坐标
			var point = new BMapGL.Point(116.404, 39.915);
			//地图初始化，同时设置地图展示级别
			map.centerAndZoom(point, 40);
		</script>
	</body>

</html>

2.获取定位信息

提供的定位服务

接口	类名	说明
浏览器定位	Geolocation	优先调用浏览器H5定位接口，如果失败会调用IP定位
IP定位	LocalCity	根据用户IP 返回城市级别的定位结果
定位SDK辅助定位	Geolocation	当您的APP中有内置的Web页面，同时在Web页面需要提供您的当前位置信息时，可调用集成在App中的百度地图定位SDK来获取更精准的位置信息

参考网址：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/geoloaction

1.浏览器定位：

//			浏览器定位    allmap为div的di属性值
			var map = new BMapGL.Map("allmap");
				//			设置中心点坐标
			var point = new BMapGL.Point(116.331398, 39.897445);
			map.centerAndZoom(point, 12);

			var geolocation = new BMapGL.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				if(this.getStatus() == BMAP_STATUS_SUCCESS) {
					var mk = new BMapGL.Marker(r.point);
					map.addOverlay(mk);
					map.panTo(r.point);
					alert('您的位置：' + r.point.lng + ',' + r.point.lat);
				} else {
					alert('failed' + this.getStatus());
				}
			});

2.IP定位：

	//			ip定位
			var map = new BMapGL.Map("allmap");
			var point = new BMapGL.Point(116.331398, 39.897445);
			map.centerAndZoom(point, 12);

			function myFun(result) {
				var cityName = result.name;
				map.setCenter(cityName);
				alert("当前定位城市:" + cityName);
			}
			var myCity = new BMapGL.LocalCity();
			myCity.get(myFun);