百度地图引入简单定位功能的实现

原创已于 2025-11-07 17:51:36 修改 · 672 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2017-06-15 14:46:00 首次发布

本文提供了一个使用百度地图API创建具备定位功能地图的示例代码。通过加载百度地图脚本，创建地图对象，并添加定位控件实现位置定位。同时介绍了如何处理定位成功和失败的情况。

百度地图引入:

<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

控制台报错!

解决方法:

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.4"></script>

简单的具备定位功能的地图代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="format-detection" content="telephone=no,email=no">
		<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.4"></script>
	</head>
	<body>
		<div id="map_container" style='width:100%;height:100%'></div>
	</body>
	<script>
		// 创建地图对象并初始化
		var mp = new BMap.Map("map_container", {
			enableHighResolution: true //是否开启高清
		});
		var point = new BMap.Point(116.404, 39.915);
		mp.centerAndZoom(point, 14); //初始化地图
		mp.enableInertialDragging(); //开启关系拖拽
		mp.enableScrollWheelZoom(); //开启鼠标滚动缩放

		// 添加定位控件
		var geoCtrl = new BMap.GeolocationControl({
			showAddressBar: true, //是否显示
			enableAutoLocation: true, //首次是否进行自动定位
			offset: new BMap.Size(0, 25),
			//locationIcon: icon //定位的icon图标
		});

		//监听定位成功事件
		geoCtrl.addEventListener("locationSuccess", function(e) {
			console.log(e);
		});

		//监听定位失败事件
		geoCtrl.addEventListener("locationError", function(e) {
			console.log(e);
		});

		// 将定位控件添加到地图
		mp.addControl(geoCtrl);
	</script>
</html>