百度地图个性化地图失效问题

百度地图个性地图失效问题

1. 原因1

网上找就是把版本改3.0，但后来发现实际上百度地图分几个版本，传统是升级3.0才支持个性化地图的。webgl版本1.0就可以了支持，因此webgl版本不需要改成3.0。

传统版本的引用（以 2.0 版本为例）：http://api.map.baidu.com/api?v=2.0&ak=xxxxx

WebGL 版本的引用（当前为 1.0 版本）：http://api.map.baidu.com/api?type=webgl&v=1.0&ak=xxxxx

2. 原因2

静态加载和动态加载问题
静态加载需要windows.onload中设置map.setMapStyleV2，才能生效，还有一个说法是等map.centerAndZoom,感觉是不用的。

动态加载百度地图js，国为有callback直接在init方法中执行
setMapStyleV2就可以了。

function loadJScript() {
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src =
			"//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的ak&callback=init";
		document.body.appendChild(script);
	}
	function initMap() {
		var map = new BMapGL.Map("container"); // 创建Map实例
		var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
		map.centerAndZoom(point, 10);
		map.enableScrollWheelZoom(); // 启用滚轮放大缩小

		map.setMapStyleV2({
			styleId: "xxxxx"
		});
	}
	window.onload = loadJScript; // 异步加载地图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. 原因3

设置了BMAP_SATELLITE_MAP后就不会显示个性化地图了，我也是这个问题引起的，找了半天，对比代码才找到，特此记录一下。

map.setMapType(BMAP_SATELLITE_MAP);
1