百度地图JavaScript API

在使用前，需先申请密钥（ak）。

支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

为了更好的在手机浏览器上展示地图，建议：

1. 将地图容器高设置为100%，使其充满整个屏幕，或者可以计算浏览器窗口的大小并进行设置。
2. 添加meta标签： <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />让页面以正常比例进行显示并且禁止用户缩放页面的操作。

支持异步加载，可以在引用脚本的时候添加callback参数，当脚本加载完成后callback函数会被立刻调用。

<script src="http://api.map.baidu.com/api?v=2.0&ak=密钥&callback=initialize"></script>
function initialize() {  
 var map = new BMap.Map('map');  
 map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);  
}  

初始化地图：

//适应移动端页面
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

//设置容器样式大小，使地图充满整个浏览器窗口
<style type="text/css">
        html,body{width:100%;height:100%;margin:0px;padding:0px}
        #container{width:100%;height:100%}
</style>

//引用百度地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=VifdHexZT4WOMrFYCQUZGorpRNjiRHer"</script>

//创建地图容器元素
<div id="container"></div>

<script type="text/javascript">
	// 创建地图实例：位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
    var map = new BMap.Map("container");    
    
    // 创建点坐标：在使用百度地图JavaScript API服务时，需使用百度BD09坐标
    var point = new BMap.Point(116.404, 39.915);     
    
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);
</script>

设置地图类型：

map.setMapType( "BMAP_NORMAL_MAP"); //错误，不需要加引号
map.setMapType( BMAP_NORMAL_MAP); //正确

控件：

1. 添加控件：

//平移缩放控件
 _this.navigationControl = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT,offset: new BMap.Size(20, 20)});
_this.mapModel.addControl(_this.navigationControl);
//比例尺控件
_this.scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(60, 25)});
_this.mapModel.addControl(_this.scaleControl);

2. 移除控件：

_this.mapModel.removeControl(_this.navigationControl);
_this.mapModel.removeControl(_this.scaleControl);

点标注：

//添加点标注
var point = new BMap.Point(_this.reportLng, _this.reportLat);
//更换默认图标，new BMap.Size()为视野大小，imageSize属性为图标的大小
var icon = new BMap.Icon(require('../assets/report/dingweiweizhizuobiaomianxing.png'), new BMap.Size(18,22),{
      imageSize:new BMap.Size(18,22)
});
var marker = new BMap.Marker(point,{icon:icon});    
_this.mapModel.addOverlay(marker);

给点标注添加文本信息

var label = new BMap.Label('本案地块',{offset:new BMap.Size(-25,-30)});
//文本样式
label.setStyle({
       padding:'5px 10px',
       background:'#21CCDF',
       border:'none',
       fontSize:'14px',
       color:'#fff'
});
marker.setLabel(label);

多边形覆盖物：

var ply = new BMap.Polygon([
		new BMap.Point(116.387112,39.920977),
		new BMap.Point(116.385243,39.913063),
		new BMap.Point(116.394226,39.917988),
		new BMap.Point(116.401772,39.921364),
		new BMap.Point(116.41248,39.927893)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor: "#324455",fillOpacity: 0.2});
ply.id = item.properties.id;
ply.name = item.properties.name;
_this.mapModel.addOverlay(ply);

清除覆盖物：

//清除指定的覆盖物
map.removeOverlay(ply);    

//清除所有覆盖物
map.clearOverlays();    

重置地图：

map.reset();//重置地图，恢复地图初始化时的中心点和级别

隐藏百度地图Logo和文字：

.BMap_cpyCtrl{
  display: none;
}
.anchorBL a{
  display: none;
}

更改百度地图比例尺的文字颜色：

.BMap_scaleTxt{
  display: block;
  color:#FFF !important;
}

报错：

A parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?v=2.0&ak=VifdHexZT4WOMrFYCQUZGorpRNjiRHer&services=&t=20190123111209, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

原因：页面渲染完成后使用了document.write()
解决方法：把<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>改为<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=密钥"></script>