百度地图Map属性和方法

百度地图(Map)是一种基于web技术的地图，相比其他地图，它更具有交互性和可扩展性。作为一种前端开发人员，我们可以使用百度地图API来实现许多定制化的地图应用程序。

在本文中，我们将探讨百度地图的属性和方法，并为您提供与每个属性及方法相关的示例。

### 属性

#### 1. center

`center`属性是百度地图的中心点。它是一个`Point`对象，该对象包含具有`lng`和`lat`属性的两个属性。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 初始化地图，设置中心点坐标和地图级别

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

// 获取当前地图中心点

var center = map.getCenter();

alert(center.lng + ", " + center.lat);

```

#### 2. zoom

`zoom`属性是百度地图的缩放级别。它的取值范围从1到19（19最大），其中1代表较大的比例尺，19代表较小的比例尺。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 初始化地图，设置中心点坐标和地图级别

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

// 获取当前地图缩放级别

var zoom = map.getZoom();

alert(zoom);

```

#### 3. minZoom 和 maxZoom

`minZoom`和`maxZoom`属性分别是百度地图的最小缩放级别和最大缩放级别。它们的取值范围从1到19。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 设置地图最大缩放级别和最小缩放级别

map.setMaxZoom(18);

map.setMinZoom(7);

```

#### 4. mapStyle

`mapStyle`属性是百度地图的样式。它允许您自定义地图的颜色、标签、注释等。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 设置地图样式

var styleJson = [

{

"featureType": "water",

"elementType": "all",

"stylers": {

"color": "#044161"

}

},

{

"featureType": "land",

"elementType": "all",

"stylers": {

"color": "#091934"

}

},

{

"featureType": "boundary",

"elementType": "geometry",

"stylers": {

"color": "#064f85"

}

},

{

"featureType": "railway",

"elementType": "all",

"stylers": {

"visibility": "off"

}

},

{

"featureType": "highway",

"elementType": "geometry",

"stylers": {

"color": "#004981"

}

},

{

"featureType": "highway",

"elementType": "all",

"stylers": {

"color": "#005b96",

"lightness": 1

}

},

{

"featureType": "highway",

"elementType": "labels",

"stylers": {

"visibility": "off"

}

},

{

"featureType": "arterial",

"elementType": "geometry",

"stylers": {

"color": "#004981"

}

},

{

"featureType": "arterial",

"elementType": "all",

"stylers": {

"color": "#00508b"

}

},

{

"featureType": "green",

"elementType": "all",

"stylers": {

"color": "#056197",

"visibility": "off"

}

},

{

"featureType": "subway",

"elementType": "all",

"stylers": {

"visibility": "off"

}

},

{

"featureType": "manmade",

"elementType": "all",

"stylers": {

"visibility": "off"

}

},

{

"featureType": "local",

"elementType": "all",

"stylers": {

"color": "#ffffff",

"visibility": "off"

}

},

{

"featureType": "arterial",

"elementType": "labels",

"stylers": {

"visibility": "off"

}

},

{

"featureType": "boundary",

"elementType": "geometry.fill",

"stylers": {

"color": "#029fd4"

}

},

{

"featureType": "building",

"elementType": "all",

"stylers": {

"color": "#1a5787"

}

},

{

"featureType": "label",

"elementType": "all",

"stylers": {

"visibility": "off"

}

}

];

map.setMapStyle({styleJson: styleJson});

```

#### 5. mapType

`mapType`属性是百度地图的地图类型，包括普通地图、卫星地图、三维地图等。它们分别对应`BMAP_NORMAL_MAP`、`BMAP_SATELLITE_MAP`、`BMAP_HYBRID_MAP`等常量。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 设置地图类型

map.setMapType(BMAP_SATELLITE_MAP);

```

### 方法

#### 1. setCenter

`setCenter`方法用于设置地图的中心点。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 设置地图中心点坐标

map.setCenter(new BMap.Point(116.404, 39.915));

```

#### 2. setZoom

`setZoom`方法用于设置地图的缩放级别。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 设置地图缩放级别

map.setZoom(12);

```

#### 3. panTo

`panTo`方法用于将地图平移至某个点。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 将地图平移到北京

map.panTo(new BMap.Point(116.404, 39.915));

```

#### 4. clearOverlays

`clearOverlays`方法用于清除地图上的覆盖物。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 创建一个标注

var point = new BMap.Point(116.404, 39.915);

var marker = new BMap.Marker(point);

// 添加标注

map.addOverlay(marker);

// 清除所有覆盖物

map.clearOverlays();

```

#### 5. addOverlay

`addOverlay`方法用于向地图添加覆盖物，如标注、折线、多边形、圆形等。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 创建一个标注

var point = new BMap.Point(116.404, 39.915);

var marker = new BMap.Marker(point);

// 添加标注

map.addOverlay(marker);

```

#### 6. removeOverlay

`removeOverlay`方法用于移除地图上的指定覆盖物。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 创建一个标注

var point = new BMap.Point(116.404, 39.915);

var marker = new BMap.Marker(point);

// 添加标注

map.addOverlay(marker);

// 移除标注

map.removeOverlay(marker);

```

#### 7. addControl

`addControl`方法用于向地图添加控件，如缩放控件、平移控件、比例尺控件等。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 创建一个缩放控件

var ctrl = new BMap.ScaleControl();

// 添加缩放控件

map.addControl(ctrl);

```

#### 8. removeControl

`removeControl`方法用于从地图中移除控件。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 创建一个缩放控件

var ctrl = new BMap.ScaleControl();

// 添加缩放控件

map.addControl(ctrl);

// 移除缩放控件

map.removeControl(ctrl);

```

#### 9. setMapStyle

`setMapStyle`方法用于设置地图的样式。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 设置地图样式

var styleJson = [

{

"featureType": "water",

"elementType": "all",

"stylers": {

"color": "#044161"

}

},

{

"featureType": "land",

"elementType": "all",

"stylers": {

"color": "#091934"

}

},

{

"featureType": "boundary",

"elementType": "geometry",

"stylers": {

"color": "#064f85"

}

},

{

"featureType": "railway",

"elementType": "all",

"stylers": {

"visibility": "off"

}

},

{

"featureType": "highway",

"elementType": "geometry",

"stylers": {

"color": "#004981"

}

},

{

"featureType": "highway",

"elementType": "all",

"stylers": {

"color": "#005b96",

"lightness": 1

}

},

{

"featureType": "highway",

"elementType": "labels",

"stylers": {

"visibility": "off"

}

},

{

"featureType": "arterial",

"elementType": "geometry",

"stylers": {

"color": "#004981"

}

},

{

"featureType": "arterial",

"elementType": "all",

"stylers": {

"color": "#00508b"

}

},

{

"featureType": "green",

"elementType": "all",

"stylers": {

"color": "#056197",

"visibility": "off"

}

},

{

"featureType": "subway",

"elementType": "all",

"stylers": {

"visibility": "off"

}

},

{

"featureType": "manmade",

"elementType": "all",

"stylers": {

"visibility": "off"

}

},

{

"featureType": "local",

"elementType": "all",

"stylers": {

"color": "#ffffff",

"visibility": "off"

}

},

{

"featureType": "arterial",

"elementType": "labels",

"stylers": {

"visibility": "off"

}

},

{

"featureType": "boundary",

"elementType": "geometry.fill",

"stylers": {

"color": "#029fd4"

}

},

{

"featureType": "building",

"elementType": "all",

"stylers": {

"color": "#1a5787"

}

},

{

"featureType": "label",

"elementType": "all",

"stylers": {

"visibility": "off"

}

}

];

map.setMapStyle({styleJson: styleJson});

```

#### 10. setMapType

`setMapType`方法用于设置地图的类型。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 设置地图类型为卫星地图

map.setMapType(BMAP_SATELLITE_MAP);

```

#### 11. setMaxZoom 和 setMinZoom

`setMaxZoom`和`setMinZoom`方法分别用于设置地图的最大缩放级别和最小缩放级别。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 设置地图最大缩放级别和最小缩放级别

map.setMaxZoom(18);

map.setMinZoom(7);

```

#### 12. getCenter

`getCenter`方法返回地图的当前中心点坐标。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 获取当前地图中心点

var center = map.getCenter();

alert(center.lng + ", " + center.lat);

```

#### 13. getZoom

`getZoom`方法返回地图的当前缩放级别。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 获取当前地图缩放级别

var zoom = map.getZoom();

alert(zoom);

```

#### 14. getBounds

`getBounds`方法返回地图的可视区域。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 获取当前地图可视区域

var bounds = map.getBounds();

alert(bounds.getSouthWest().lng + ", " + bounds.getSouthWest().lat + " | " + bounds.getNorthEast().lng + ", " + bounds.getNorthEast().lat);

```

#### 15. getDistance

`getDistance`方法返回地图上两点间的距离。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 创建两个坐标点

var point1 = new BMap.Point(116.403865, 39.914105);

var point2 = new BMap.Point(116.373026, 39.923606);

// 获取两点间的距离

var distance = map.getDistance(point1, point2);

alert(distance);

```

#### 16. getCurrentCity

`getCurrentCity`方法返回当前地图所在的城市。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 获取当前城市

map.getCurrentCity(function(result){

alert(result.name);

});

```

#### 17. enableDragging 和 disableDragging

`enableDragging`和`disableDragging`方法分别用于启用和禁用地图的拖拽功能。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 禁用地图拖拽

map.disableDragging();

// 启用地图拖拽

map.enableDragging();

```

#### 18. enableScrollWheelZoom 和 disableScrollWheelZoom

`enableScrollWheelZoom`和`disableScrollWheelZoom`方法分别用于启用和禁用地图的滚轮缩放功能。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 禁用地图滚轮缩放

map.disableScrollWheelZoom();

// 启用地图滚轮缩放

map.enableScrollWheelZoom();

```

#### 19. enableDoubleClickZoom 和 disableDoubleClickZoom

`enableDoubleClickZoom`和`disableDoubleClickZoom`方法分别用于启用和禁用地图的双击放大功能。

示例代码：

```javascript

// 创建地图实例

var map = new BMap.Map("container");

// 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/