js打开百度地图自动定位同时也可已输入地址获取经纬度
时间: 2023-09-01 17:04:13 浏览: 195
要实现在JS中打开百度地图并自动定位,同时也可以通过输入地址获取经纬度,可以借助百度地图的JavaScript API来完成。
首先,需要在HTML中引入百度地图的API库文件,并在页面中创建一个地图容器。接着,在JS代码中,通过使用百度地图的Map对象和Geolocation对象来实现地图的自动定位。
具体步骤如下:
1. 在HTML中引入百度地图的API库文件,代码如下:
```html
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>
```
2. 创建地图容器,代码如下:
```html
<div id="map"></div>
```
3. 在JS代码中实现地图的自动定位和地址获取经纬度功能,代码如下:
```javascript
// 初始化地图
var map = new BMap.Map("map");
// 开启地图的定位功能
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(result){
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// 获取定位成功后的经纬度
var point = result.point;
// 在地图上显示当前位置
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
else {
// 定位失败时的处理
console.log('定位失败:' + this.getStatus());
}
});
// 监听地址输入框的变化
var addressInput = document.getElementById("addressInput");
addressInput.addEventListener("input", function(){
var address = addressInput.value;
// 根据地址获取经纬度
var geocoder = new BMap.Geocoder();
geocoder.getPoint(address, function(point){
if (point) {
// 获取到经纬度后,在地图上显示对应位置
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
else {
// 地址解析失败时的处理
console.log('地址解析失败');
}
});
});
```
需要注意的是,上述代码中的"您的百度地图API密钥"需要替换成您自己申请的百度地图API密钥,以免引发访问限制或其他问题。
实现了以上代码后,打开页面就可以同时实现自动定位和输入地址获取经纬度的功能了。