前言

为了便于更好的传达用户地理数据的位置信息，通常都是需要有地理空间参考数据做为依据。例如：一栋楼、一条河流或者几个点数据在没有其他参考物的前提下，是不具备可视化效果、可阅读性的。通常我们会选用标准地图做为参考或者卫星图像做为参考。如果开发者有自己整体或者局部完整的地理数据参考，那可以使用空白地图。本文将介绍这张底图的相关概念内容。

底图配置

官方提供的底图有：标准底图、卫星底图、空白底图。在标准底图的基础上，再配合个性化样式，可以延伸出个性化底图。

开发者可以控制标准底图和个性化底图的图标、文字、楼块、室内图是否展示。另外一个比较好的功能点是：为开发者提供了底图添加图标&文字的能力，可以弥补数据上的缺失或者展示优先级。底图上的POI点具备可点击能力，开发者可以利用此功能获取底图POI信息，与业务进行联动。

可以通过设置画布样式与个性化底图的背景样式想匹配，避免切换或刷新会出现与整体页面不协调的色调。

底图上可以添加拥挤度路网、全景图路网。开发者可根据需求结合进行使用。

具体示例大家可以参考百度地图开放平台示例中心地图基础部分，下面罗列一些示例中没有明确标明的点。

设置空底图

var map = new BMapGL.Map('container', {mapType: window.BMAP_NONE_MAP,enableDragging: true,enableWheelZoom: true,enableDblclickZoom: true
});
map.centerAndZoom("上海", 12);

地图背景颜色设置

// 改变Map DIV容器背景颜色
document.getElementById('container').style = {backgroundColor: 'rgb(245 245 245)'
}
var map = new BMapGL.Map('container', {style:'grayed-out',// 改变Map canvas容器颜色，alpha取值为[0-255]backgroundColor: [245, 245, 245, 255],enableDragging: true,enableWheelZoom: true
});
// 改变Map DIV容器背景图片设置
map.getContainer().style = {backgroundImage: ''
}
map.centerAndZoom("上海", 12);

底图添加图标&文字

var labels = [{position: BMapGL.Projection.convertLL2MC(new BMapGL.Point(116.397112, 39.920977)),displayRange: [12, 22],textMargin: 4,name: '测试\\自定义POI',style: {fontSize: 28,color: 'pink',haloSize: 2,strokeColor: '#fff',icon: 'http://maponline0.bdimg.com/sty/map_icons2x/MapRes/zhanlanguan.png',iconSize: [64, 64],},uid: 'uuid0000001',direction: 1,rank: 50000}
];
// 自定义POI添加到地图
map.addLabelsToMapTile(labels);
// 指定自定义POI uid移除
map.removeLabelsFromMapTile(['uuid0000001']);
// 自定义POI全部移除
map.clearLabels();

拥挤度路网设置描边

var map = new BMapGL.Map('container', {style:'grayed-out',enableDragging: true,enableWheelZoom: true
});
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
// 方式1
BMapGL.trafficLayer.setEdge(false);
map.setTrafficOn();
// 方式2
var layer = new BMapGL.TrafficLayer();
layer.setEdge(false);
map.addTileLayer(layer);

基础控制

主要分为显示控制和交互控制两部分。

显示控制可以设置地图中心点、显示区域、显示等级、锁定区域等。

交互控制可以设置移动、旋转、俯仰等是否允许操作。

具体示例大家可以参考百度地图开放平台示例中心地图基础部分。

锁定地图区域

var _p1 = new BMapGL.Point(116.203694, 39.527552);
var _p2 = new BMapGL.Point(116.603694, 40.227552);
var r = new BMapGL.Bounds(_p1, _p2);
map.restrictBounds(r);

注意问题

React框架下的strict模式会导致页面初始化两次，如果在页面加载中存在地图加载，那么有状态组件在挂载时进行了地图初始化，那么在卸载时需要同步进行地图销毁；函数组件在useEffect进行初始化，那么 return 中需要进行地图销毁；不然就会导致地图初始化两次造成内存泄漏。

在业务组件中如果使用异步加载地图API初始化地图时，需要判断当前window是否已经注册了window.BMapGL对象，如果存在则不需要再次异步加载地图API，避免造成内存泄漏。

百度地图API使用系列-02 底图相关推荐

百度地图Api（一看就会系列）
百度地图api 前言:最近公司要求我出个百度地图api的技术分享,小编在这里也分享给大家,觉得对大家有帮助的话就点波三连吧!! 一. 引用百度地图开放平台申请密匙,在项目index.html文件中引 ...
【百度地图API】如何获取行政区域的边界？
[百度地图API]如何获取行政区域的边界? 摘要:以前教过大家如何自行获取行政区域,或者自定义获取一个区域的边界值.今天来教大家直接调用百度地图API1.3(目前最新版本)来获取行政区域的边界值. - ...
【百度地图API】如何制作班级地理通讯录？LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
【百度地图API】百度API卫星图使用方法和卫星图对比工具
百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度地图API卫星图调用百度卫星图有两种方式,一是地图类型控件,一是 ...
百度地图API开发指南
百度地图API开发指南本文为百度地图API官方版本的开发指南,供各位51CTO的网友进行参考. 简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮 ...
PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例
PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程 ...
【百度地图API】多家地图API内存消耗对比测验（带源码）
任务描述: 啊,美妙的春节结束了.酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为"世界文化遗产"的寺庙,叫做"双林寺".双林寺的精致 ...
IOS开发百度地图API入门到精通－用点生成路线，导航，气泡响应
(转)IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应 IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发POISearch搜索附近停车场,附近加油 ...
python 接入百度地图数据包下载_Python爬虫-利用百度地图API接口爬取数据并保存至MySQL数据库...
首先,我这里有一份相关城市以及该城市的公园数量的txt文件: 分析-02.png 其次,利用百度地图API提供的接口爬取城市公园的相关信息. 所利用的API接口有两个: 1.http://api.ma ...

百度地图API使用系列-02 底图

索引

前言

底图配置

基础控制

注意问题

百度地图API使用系列-02 底图相关推荐

最新文章

热门文章