又是一个百度地图问题。

arist1213

小弟使用ionic开发一个项目，主要是用到了百度地图的JS SDK，我想在同一个controller里，不同的modal，初始化不同的百度地图实例，但是有个错误，这是我的 services.

1. angular.module('Services', []).factory("BMService",
   
2. function(LogService) {
   
3.     var map = [];
   
4.     // 启动地图
   
5.     var initMap = function(id, point, options) {
   
6.         LogService.log("begin initialize map " + id, 1);
   
7.         if (map[id]) {
   
8.             return;
   
9.         } else {
   
10.             map[id] = new BMap.Map(id);
    
11.         }
    
12. 
    
13.         var color = options.color ? options.color: "rgb(177, 208, 0)";
    
14. 
    
15.         var point = new BMap.Point(point.lng, point.lat);
    
16.         map[id].centerAndZoom(point, 15);
    
17. 
    
18.         //设置marker图标为水滴
    
19.         if (options.marker) {
    
20.             var vectorMarker = new BMap.Marker(new BMap.Point(point.lng, point.lat), {
    
21.                 // 指定Marker的icon属性为Symbol
    
22.                 icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
    
23.                     scale: 1.2,
    
24.                     //图标缩放大小
    
25.                     fillColor: color,
    
26.                     //填充颜色
    
27.                     fillOpacity: 0.9 //填充透明度
    
28.                 })
    
29.             });
    
30.             map[id].addOverlay(vectorMarker);
    
31.         }
    
32.         //创建圆
    
33.         if (options.circle) {
    
34.             var circle = new BMap.Circle(new BMap.Point(point.lng, point.lat), 400, {
    
35.                 strokeColor: "blue",
    
36.                 strokeWeight: 2,
    
37.                 strokeOpacity: 0.5
    
38.             });
    
39.             circle.setFillColor(color);
    
40.             circle.setFillOpacity(0.2);
    
41.             circle.setStrokeColor(color);
    
42.             map[id].addOverlay(circle); //增加圆        
    
43.         }
    
44.         LogService.log("finish initialize map " + id, 1);
    
45.     };
    
46. 
    
47.     return {
    
48.         initMap: initMap
    
49.     };
    
50. })

复制代码

同一个controller的调用：

1. $scope.$on('$ionicView.beforeEnter',function(){               
   
2.     BMService.initMap('mainMap',{lng:116.404, lat:39.915},{marker: true, circle: true});                        
   
3.     BMService.initMap('allObjectMap',{lng:114.045, lat:22.532},{marker: true, circle: true});
   
4.     $scope.initObject();
   
5. });
   

复制代码

地图在不同的modal里，

1. <script id="home.html" type="text/ng-template">
   
2.         <div id="mainMap" class="baidu_map"></div>
   
3. </script>
   
4. 
   
5. <script id="user.html" type="text/ng-template">
   
6.         <div id="allObjectMap" class="baidu_map"></div>
   
7. </script>

复制代码

地图的样式：

1. .baidu_map {
   
2.     width: 100%;
   
3.    height: 100%;
   
4.     overflow: hidden;
   
5.     margin: 0;
   
6. }

复制代码

第一个地图可以正确显示，但是第二个地图出现了下面的错误：



烦请各位给个帮助和提示，谢谢，谢谢。

arist1213

我换了高德地图，好像没有这个问题，果断换掉SDK。