html js 应用百度地图搜索
时间: 2024-09-10 17:18:46 浏览: 16
HTML、JavaScript 和百度地图API可以结合起来创建交互式的地图应用。以下是基本步骤:
1. **引入库**:首先,在HTML文件头部添加百度地图的API链接,例如:
```html
<script src="https://api.map.baidu.com/api?v=4.4&ak=your_api_key"></script>
```
需要替换`your_api_key`为你自己的百度地图API密钥。
2. **初始化地图**:在JavaScript中,通过`BMap.Map()`函数创建地图实例,并设置地图容器ID作为参数:
```javascript
var map = new BMap.Map("containerId");
```
3. **设置中心点和缩放级别**:
```javascript
map.centerAndZoom(new BMap.Point(longitude, latitude), zoomLevel);
```
其中,`longitude`和`latitude`是地图中心点的经纬度,`zoomLevel`是缩放级别。
4. **添加地点搜索功能**:使用`BMap.geocoder`获取地址信息并显示在地图上:
```javascript
var geocoder = new BMap.Geocoder();
geocoder.getAddressByLocation(mapPoint, function (rs) {
if (rs.status == BMAP_STATUS_SUCCESS) {
var marker = new BMap.Marker(rs.result.formattedAddress);
map.addOverlay(marker);
} else {
alert(rs.message);
}
});
```
这里假设你已经有了`mapPoint`(经度和纬度组成的`BMap.Point`对象)。
5. **触发搜索**:用户可以通过输入框或其他组件触发搜索事件,传递地址字符串给`geocode`方法:
```javascript
searchInput.addEventListener('input', function() {
var address = this.value;
geocoder.geocode({address: address}, function(rs) {
// 处理返回结果
});
});
```