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

本文链接：https://blog.csdn.net/hflxia/article/details/73287592

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图引入:

<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">

</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);