vue,react等框架，百度地图的最优使用方式
vue,react中百度地图的使用
现在vue，react框架大行其道，很多项目都是用它们开发的，我的项目也都在用，之前，在使用百度地图的时候，我都是把百度地图封了一个组件，直接插入到dom中，但是，有些功能莫名其妙的不好使，我猜可能是跟vue有兼容性问题，还有一个页面中引入多个地图的情况下，像城市切换插件就不好使了，相互冲突了，所以，最终的解决方案是用iframe来引入百度地图。这个好处就是完全隔离开项目框架与百度地图之间的冲突。
首先，建一个百度地图的html页面，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| <!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=yes" />
<link href="https://api.map.baidu.com/library/IndoorMap/1.0/src/indoor.min.css?v=1.0.1 " rel="stylesheet" type="text/css">
<style type="text/css">
body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="https:
<script type="text/javascript" src="https://api.map.baidu.com/library/IndoorMap/1.0/src/indoor.min.js?v=1.0.1 "></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script type="text/javascript">
var obj = {
lng:'',
lat:''
};
var tab = getQueryString('tab');
// 获取url信息
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
var r = window.location.search.substr(1).match(reg);
var q = window.location.pathname.substr(1).match(reg_rewrite);
if(r != null){
return unescape(r[2]);
}else if(q != null){
return unescape(q[2]);
}else{
return null;
}
}
// 百度地图API功能
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(123.436, 41.816), 11);
var topLeftControl = new BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
// 城市选择控件
var cityListControl = new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_RIGHT
});
// 比例尺控件
var topLeftNavigation = new BMap.NavigationControl();
map.addControl(topLeftControl);
map.addControl(topLeftNavigation);
map.addControl(cityListControl);
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
// 创建室内图实例
var indoorManager = new BMapLib.IndoorManager(map);
// 点击获取经纬度
map.addEventListener("click", function(e) {
obj.lng = parseFloat(e.point.lng) + '';
obj.lat = parseFloat(e.point.lat) + '';
drawLocation()
selectLocation();
});
function selectLocation() {
window.parent.postMessage({
refresh:obj,
tab
},'*');
}
function drawLocation() {
if (obj.lng !== "" && obj.lat !== "") {
map.clearOverlays();
var new_point = new BMap.Point(obj.lng, obj.lat);
var marker = new BMap.Marker(new_point);
map.addOverlay(marker);
map.panTo(new_point);
}
}
</script>
|
之后就是在项目中用iframe标签引入。
重要的地方来了，就是父子页面通信，在子页面点击选好地点后，肯定需要把选好点的坐标给父页面，这里有一个简单的方法，在子页面中点击选点时，给父页面发信息代码如下：
1
2
3
4
| window.parent.postMessage({
val: '信息'
},'*');
|
子页面消息发出去了，父页面如何接收呢？见下面代码
1
2
3
4
5
| window.addEventListener('message',function(event){
console.log(event);
});
|
好了，总结一下，vue中最好还是以这种方式使用哈。