百度地图是一个提供地图服务的web API,可以集成在网站、APP等应用中,为用户提供地图展示、路线规划、位置搜索等功能。这里将介绍百度地图的Map属性和方法,以及使用方法和案例说明。
Map属性:
1. center
Map的中心点位置,可以通过Map.setCenter()方法来改变,接受一个经纬度坐标对象作为参数。例子:
```
var map = new BMap.Map("container"); //创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.setCenter(point); //设置中心点
```
2. zoom
地图的级别,可以通过Map.setZoom()方法来改变。级别范围从1到19。例子:
```
var map = new BMap.Map("container"); //创建地图实例
map.setZoom(12); //设置地图级别
```
3. minZoom和maxZoom
地图的最小级别和最大级别。例子:
```
var map = new BMap.Map("container"); //创建地图实例
map.setMinZoom(1); //设置最小级别
map.setMaxZoom(18); //设置最大级别
```
4. defaultCursor和draggingCursor
地图的鼠标指针和拖拽鼠标指针样式,默认值分别为"default"和"openhand"。例子:
```
var map = new BMap.Map("container"); //创建地图实例
map.setDefaultCursor("pointer"); //设置鼠标指针样式
map.setDraggingCursor("move"); //设置拖拽鼠标指针样式
```
5. enableInertialDragging
是否开启惯性拖拽,默认值为true。例子:
```
var map = new BMap.Map("container"); //创建地图实例
map.enableInertialDragging(false); //禁用惯性拖拽
```
6. enableScrollWheelZoom
是否开启鼠标滚轮缩放,默认值为true。例子:
```
var map = new BMap.Map("container"); //创建地图实例
map.enableScrollWheelZoom(false); //禁用鼠标滚轮缩放
```
7. enableKeyboard
是否开启键盘控制,默认值为true。例子:
```
var map = new BMap.Map("container"); //创建地图实例
map.enableKeyboard(false); //禁用键盘控制
```
8. enableAutoResize
是否开启自动适应容器变化,默认值为false。例子:
```
var map = new BMap.Map("container"); //创建地图实例
map.enableAutoResize(true); //开启自动适应容器变化
```
Map方法:
1. addControl(control)
添加控件,可以添加多个控件。例子:
```
var map = new BMap.Map("container"); //创建地图实例
var zoomControl = new BMap.ZoomControl(); //创建缩放控件实例
map.addControl(zoomControl); //添加缩放控件
```
2. removeControl(control)
移除控件。例子:
```
var map = new BMap.Map("container"); //创建地图实例
var zoomControl = new BMap.ZoomControl(); //创建缩放控件实例
map.addControl(zoomControl); //添加缩放控件
map.removeControl(zoomControl); //移除缩放控件
```
3. setMapStyle(mapStyle)
设置地图样式,接受一个地图样式字符串或一个样式对象作为参数。例子:
```
var map = new BMap.Map("container"); //创建地图实例
map.setMapStyle({
styleJson: [
{
"featureType": "land",
"elementType": "geometry.fill",
"stylers": {
"color": "#f5f5f5"
}
}
]
}); //设置地图样式
```
4. setViewport(viewportOptions)
根据指定的地理区域调整地图视野,接受一个ViewportOptions对象作为参数。例子:
```
var map = new BMap.Map("container"); //创建地图实例
var view = {
center: new BMap.Point(116.404, 39.915),
zoom: 12
};
map.setViewport(view); //根据指定视野调整地图
```
5. clearOverlays()
清除地图上所有覆盖物。例子:
```
var map = new BMap.Map("container"); //创建地图实例
map.clearOverlays(); //清除地图上所有覆盖物
```
6. setCenter(point)
设置地图中心点位置,接受一个经纬度坐标对象作为参数。例子:
```
var map = new BMap.Map("container"); //创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.setCenter(point); // 设置中心点
```
7. setZoom(zoom)
设置地图级别,接受一个级别数字作为参数。例子:
```
var map = new BMap.Map("container"); //创建地图实例
map.setZoom(12); //设置地图级别
```
8. addOverlay(overlay)
添加覆盖物到地图上,可以添加多个覆盖物。例子:
```
var map = new BMap.Map("container"); //创建地图实例
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); //创建标注
map.addOverlay(marker); //添加标注到地图上
```
9. removeOverlay(overlay)
移除地图上指定的覆盖物。例子:
```
var map = new BMap.Map("container"); //创建地图实例
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); //创建标注
map.addOverlay(marker); //添加标注到地图上
map.removeOverlay(marker); //移除标注
```
10. setMapType(mapType)
设置地图类型,接受一个MapType对象作为参数。例子:
```
var map = new BMap.Map("container"); //创建地图实例
var mapType = new BMap.MapTypeControl(); //创建地图类型控件实例
map.addControl(mapType); //添加地图类型控件
map.setMapType(BMAP_HYBRID_MAP); //设置地图类型为卫星图
```
使用方法:
使用百度地图API需要在HTML页面中添加以下代码,其中ak为开发者密钥,可以在百度API控制台获得。
```
```
然后,在javascript中可以创建地图实例并添加相关功能,例如:
```
var map = new BMap.Map("container"); //创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 12); //设置中心点和地图级别
var marker = new BMap.Marker(point); //创建标注
map.addOverlay(marker); //添加标注到地图上
```
案例说明:
以下是一个简单的地图展示案例,展示了如何创建地图、添加标注、开启滚轮缩放等功能。
```
```
以上就是百度地图Map属性和方法的详细介绍,以及使用方法和案例说明。 如果你喜欢我们三七知识分享网站的文章, 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔!https://www.37seo.cn/
发表评论 取消回复