在使用前,需先申请密钥(ak)。
支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。
为了更好的在手机浏览器上展示地图,建议:
- 将地图容器高设置为100%,使其充满整个屏幕,或者可以计算浏览器窗口的大小并进行设置。
- 添加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); //正确
控件:
- 添加控件:
//平移缩放控件
_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);
- 移除控件:
_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>