百度地图

百度地图笔记

1.获取密钥

2.获取JavaScript API服务方法

//参数v表示您加载API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。
http://api.map.baidu.com/api?v=1.4 

//使用JavaScript APIv2.0请先申请密钥ak，按此方式引用。
http://api.map.baidu.com/api?v=2.0&ak=您的密钥

JavaScript API v1.4及以前版本无须申请密钥（ak）。

3.步骤

1.创建地图实例

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

2.创建点坐标(经度，纬度)

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

3.地图初始化

map.centerAndZoom(point, 15);

权限验证失败原因

• 尚未在API控制台申请ak，即'...ak=';
• 密钥设置错误
• 密钥未通过白名单
• API控制台关闭JavaScript API时会报错;
• 错误的使用“服务端AK”用于 JavaScript API，JS API只支持浏览器类型的ak（自2016年1月15日升级）

百度地图的控件

地图API中提供的控件有：

• Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
• NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
• OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
• ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
  MapTypeControl：地图类型控件，默认位于地图右上方。
• CopyrightControl：版权控件，默认位于地图左下方。
• GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

添加控件

var map = new BMap.Map("container");  
  
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

map.addControl(new BMap.NavigationControl());

 **可以使用Map.addControl()方法向地图添加控件。**

控件的显示位置 和偏移

常量	描述
BMAP_ANCHOR_TOP_LEFT	控件将定位到地图的左上角
BMAP_ANCHOR_TOP_RIGHT	控件将定位到地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT	控件将定位到地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT	控件将定位到地图的右下角

实现代码

 //地图平移缩放控件
    map.addControl(new BMap.NavigationControl({
        anchor:BMAP_ANCHOR_TOP_RIGHT
    }));

控件的显示方式

|常量|描述|
| :-------- |: --------|
|BMAP_NAVIGATION_CONTROL_LARGE | 标准的平移缩放控件（包括平移、缩放按钮和滑块）|
|BMAP_NAVIGATION_CONTROL_SMALL|仅包含平移和缩放按钮|
|BMAP_NAVIGATION_CONTROL_PAN|仅包含平移按钮|
|BMAP_NAVIGATION_CONTROL_ZOOM|仅包含缩放按钮|

实现代码

  //地图平移缩放控件
    map.addControl(new BMap.NavigationControl({
        //仅包含平移按钮
        type:BMAP_NAVIGATION_CONTROL_PAN
    }));

示例

<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
  // 添加带有定位的导航控件
  var navigationControl = new BMap.NavigationControl({
    // 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_LEFT,
    // LARGE类型
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 启用显示定位
    enableGeolocation: true
  });
  map.addControl(navigationControl);
  // 添加定位控件
  var geolocationControl = new BMap.GeolocationControl();
  geolocationControl.addEventListener("locationSuccess", function(e){
    // 定位成功事件
    var address = '';
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    alert("当前定位地址为：" + address);
  });
  geolocationControl.addEventListener("locationError",function(e){
    // 定位失败事件
    alert(e.message);
  });
  map.addControl(geolocationControl);
</script>

关于 百度地图 HTTPS 的说明

JavaScript API首家支持Https，已全面开放，无需申请Https服务可直接使用。

配置：

如果使用JavaScript API ，需要加一个特殊字段 (s=1)：
https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1；
对于Web API 无需加特殊字段，直接使用 HTTPS协议访问即可，如Geocoding：
https://api.map.baidu.com/geocoder/v2/?ak=你的秘钥&callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1
如果对数据安全要求高，建议使用 POST请求，避免把请求参数放到 URI中敏感信息被泄露。

鼠标滚轮缩放与鼠标拖拽

 map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用