这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战
百度地图开发系列之个性化地图使用的2种方法
写在前面：
-
本文为百度地图开发系列文章之一，
前期回顾：
- webGIS，基于百度地图的HelloWord实现
- 如何使用前端css代码去掉百度地图左下角的图标
- 使用百度地图绘制点、线、面 | Javascript
- 百度地图开发系列之个性化地图使用的2种方法（本篇讲解）
以上对应视频教程（博客与视频前面的序号是一一对应的）：
-
个人前端博客网站：zhangqiang.hk.cn
-
欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！
1 效果图
2 官方文档
3 个人消化后理解
3.1 简介
个性化地图，简而言之就是让你的地图底图变成任意你想变成的底图。
3.2 如何使用
3.2.1 前序准备
- 进入地图开放平台控制台页面，在我的地图中，创建一个地图样式
- 看着选择一个样式模板或者编辑一下自定义样式（我觉得这个得需要一定美感），然后点击发布，得到样式ID，同时我们也可以下载JSON，便于后面演示第二种方法。
- 这样我们就得到了样式文件和样式ID，其中有其中一个就可以实现，这里只是为了方便给大家展示2中方法的使用。
3.3 使用方法1 （样式ID）
直接在代码里这样，后面那一串id就是你的样式id了
map.setMapStyleV2({
styleId: '3058e0dabfad159d876a8a7034f7c95b'
});
3.4 使用方法2 （样式文件）
这里第一步需要先把样式的Json文件拷贝到程序的文件夹下，然后再这样
window.onload = function () {
var url = "../config/custom_map_config.json";// 这个是我放json文件的位置
var request = new XMLHttpRequest();
request.open("get", url);
request.send(null);
request.onload = function () {
if (request.status == 200) {
var styleJson = JSON.parse(request.responseText);
// console.log(styleJson);
map.setMapStyleV2({
styleJson: styleJson
});
}
}
}
4 源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
#allmap .anchorBL img {
display: none;
}
#allmap .BMap_cpyCtrl span {
display: none !important;
}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos">
</script>
<title>百度地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
// 个性地图样式 - 方法1
// map.setMapStyleV2({
// styleId: '3058e0dabfad159d876a8a7034f7c95b'
// });
// 个性地图样式 - 方法2 使用json
window.onload = function () {
var url = "../config/custom_map_config.json"
var request = new XMLHttpRequest();
request.open("get", url);
request.send(null);
request.onload = function () {
if (request.status == 200) {
var styleJson = JSON.parse(request.responseText);
// console.log(styleJson);
map.setMapStyleV2({
styleJson: styleJson
});
}
}
}
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>
5 源码仓库地址
下面这个仓库为本篇知识点的源码地址，同时也是本系列的仓库地址，后面的源码更新都会在这个仓库里进行。
webGIS-basic-BMapGL/06个性化地图.html at main · front-end-study-GoGoGo/webGIS-basic-BMapGL (github.com)
