vue,react中百度地图的使用

javascript
  目录
  1. 1. vue,react中百度地图的使用

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://api.map.baidu.com/api?v=3.0&ak=PaxZEfdK60GDxScXccj81kBW"></script>
    <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);
});
// 可以打印出很多需要的信息喽
// 据说，IE8+都支持哦

好了，总结一下，vue中最好还是以这种方式使用哈。

  vue