百度地图在html中怎么自动定位

html-css013

百度地图在html中怎么自动定位,第1张

方法/步骤

通过浏览器打开这个连接:http://api.map.baidu.com/lbsapi/creatmap/,你会看到如下图:

选择当前城市,然后输入具体地址,搜索。

添加标注,展开后有三种形式,如图

默认选择第一种形式,把鼠标放入右边的地图,点击,然后会出现如下图,填写左边的选项,保存。

能用,可以实现的,HTML5可以使用手机的GPS信息,利用百度等地图的开放API就可以了。\x0d\x0aHTML5中可以通过IP,WIFI信息,GPS,来实现地理定位,当然相关精度也是有所不同,所以如果要精确导航就得使用GPS信息。\x0d\x0a下面是一段HTML5结合百度地图API来获取位置的代码:\x0d\x0a\x0d\x0a当前定位地址:\x0d\x0a\x0d\x0avar map = new BMap.Map("allmap")\x0d\x0avar geolocation = new BMap.Geolocation()\x0d\x0ageolocation.getCurrentPosition(function(r){\x0d\x0aif(this.getStatus() == BMAP_STATUS_SUCCESS){\x0d\x0amap.panTo(r.point)\x0d\x0a//alert('您的位置:'+r.point.lng+','+r.point.lat)\x0d\x0avar pt = r.point\x0d\x0avar geoc = new BMap.Geocoder()\x0d\x0ageoc.getLocation(pt, function(rs){\x0d\x0avar addComp = rs.addressComponents\x0d\x0a//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber)\x0d\x0a$("#du-gps").text(addComp.district+addComp.street+addComp.streetNumber)\x0d\x0a})\x0d\x0a}\x0d\x0aelse {\x0d\x0aalert('failed'+this.getStatus())\x0d\x0a}\x0d\x0a},{enableHighAccuracy: true})\x0d\x0a 回答于 2022-11-16

在支持html5地理定位API的浏览器上,window.navigator对象新增了一个geolocation属性,以及相关的Geolocation API。都是用JS进行访问的。

下面是一个例子:

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>地理位置</title>

</head>

<body>

<script>

navigator.geolocation.getCurrentPosition(

function(position){

var cords = position.coords

alert("当前经度:"+cords.longtitude +", 纬度:"+cords.latitude)

},

function(error){

var errorTypes={1:"位置服务被拒绝", 2:"获取不到位置信息", 3:"获取位置信息超时"}

alert( errorTypes[error.code] +":,不能确定当前地理位置")

}

)

</script>

</body>

</html>

这只是一个例子,一般用经度和纬度调用地图如百度地图的API显示。

注意:在电脑本机上没法测试,一般把网页放到服务器上,用手机访问可以定位。