角谷歌地图不能点击标记第二次

我创建了一个自定义标记，我点击它，信息窗口打开。然后关闭信息窗口。我尝试再次点击标记，但信息窗口未打开。它适用于其他两个标记罚款。
下面是plunker示例。
感谢您的帮助。角谷歌地图不能点击标记第二次

http://plnkr.co/edit/hzfAkQ5UJBLz3BZEy8M9?p=preview

'use strict'; 
 
angular.module('app', ['uiGmapgoogle-maps']) 
 
    .controller('locatorController', function($scope, $timeout, uiGmapGoogleMapApi) { 
 
    var pinSymbol = function(color) { 
 
    // console.log("color: "+color); 
 
    return { 
 
     path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', 
 
     fillColor: color, 
 
     fillOpacity: 1, 
 
     strokeColor: '#FFFFFF', 
 
     strokeWeight: 1.3, 
 
     scale: 1.3 
 
    }; 
 
    } 
 

 
    $scope.map = { 
 
     center: { 
 
     latitude: 39, 
 
     longitude: -98 
 
     }, 
 
     control: {}, 
 
     zoom: 8, 
 
     window: { 
 
     model: {}, 
 
     show: false, 
 
     options:{ 
 
      pixelOffset: {width:-1,height:-20} 
 
     } 
 
     }, 
 
     markers: [{ 
 
     "id": "1", 
 
     "latitude": "39.05", 
 
     "longitude": "-98.55", 
 
     options: { 
 
      labelContent : '$23', 
 
      labelAnchor: "14 75", 
 
      labelClass: 'labelClass', 
 
      icon: pinSymbol('green'), 
 
      labelInBackground: false 
 
    } 
 
     }, { 
 
     "id": "2", 
 
     "latitude": "39.15", 
 
     "longitude": "-98.45" 
 
     }, { 
 
     "id": "3", 
 
     "latitude": "39.25", 
 
     "longitude": "-97.95" 
 
     }, ], 
 
     markersEvents: { 
 
     click: function(marker, eventName, model, args) { 
 
      
 
      $scope.$apply(function() { 
 
\t \t $scope.map.window.model = model; 
 
      $scope.map.window.show = true; 
 
       }); 
 
     } 
 
     } 
 
    }; 
 

 

 
    }) 
 
    .controller('templateController',function(){});

.location-finder .angular-google-map, 
 
.location-finder .angular-google-map-container { 
 
\t height: 30em; 
 
} 
 

 
.selected { 
 
    background: #ddd; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <div ng-app="app" ng-controller="locatorController" class="location-finder"> 
 
    <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control"> 
 

 
     <!-- Map Pins --> 
 
     <ui-gmap-markers models="map.markers" idKey="'id'" coords="'self'" options="'options'" events="map.markersEvents"> 
 
     </ui-gmap-markers> 
 

 
     <!-- InfoWindows --> 
 
<!-- this works, but infowindow is not attached to marker --> 
 
     <ui-gmap-window 
 
     show="map.window.show" 
 
     coords="map.window.model" 
 
     templateUrl="'test'" 
 
     templateParameter="map.window.model" 
 
     options="map.window.options" 
 
     ng-cloak> 
 
     </ui-gmap-window> 
 
<!-- try this instead of the above and the template does not load --> 
 
<!-- <ui-gmap-window show="map.window.show" coords="map.window.model" templateUrl="'infowindow.tpl'" ng-cloak></ui-gmap-window>--> 
 

 

 
    </ui-gmap-google-map> 
 

 
    </div> 
 

 

 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js" charset="utf-8"></script> 
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.js" charset="utf-8"></script> 
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.1.0-X.5/angular-google-maps.js" charset="utf-8"></script> 
 
    <script src="script.js"></script> 
 

 
</body> 
 

 
</html>

http://plnkr.co/edit/hzfAkQ5UJBLz3BZEy8M9?p=preview

来源

2016-07-23 userara

可能存在关于如何实施标记的问题。你可以尝试看看以前的[SO问题]（http://stackoverflow.com/a/29896693/5995040）和[jsfiddle示例]（http://jsfiddle.net/svigna/pc7Uu/）来帮助你实现示例和此[Angular Google Maps]（http://angular-ui.github.io/angular-google-maps/#!/）以熟悉AngularJS，Google地图对象（包括标记，窗口，线条和形状）。 –

感谢您的回复，但这两个示例均直接使用Google Maps API v3。我正尝试使用Angular Google Maps API http://angular-ui.github.io/angular-google-maps/ 我可能错过了一些东西。 – userara

我用下面的帖子为指导。 https://github.com/angular-ui/angular-google-maps/issues/548

我添加了一个隐藏窗口值

在图阵列，添加以下功能： infoEvents：函数（）{$ scope.map.window.show = FALSE;}

.... 
} 
    }, 
    infoEvents: function(){$scope.map.window.show = false;}, 
    doClusterRandomMarkers: true, 
    clusterOptions: standardClusterType 
.....

在我修改作为HTML如下： closeClick = “map.infoEvents”

<ui-gmap-window 
    show="map.window.show" 
    coords="map.window.model" 
    templateUrl="'infowindow.tpl'" 
    templateParameter="map.window.model" 
    options="map.window.options" 
    closeClick="map.infoEvents" 
    ng-cloak> 
     </ui-gmap-window> 

markers: [{ 
    "id": "1", 
    "latitude": "39.05", 
    "longitude": "-98.55", 
    options: { 
     labelContent : '$23', 
     labelAnchor: "11 75", 
     labelClass: 'labelClass', 
     icon: pinSymbol('green'), 
     labelInBackground: true 
}

此外，米确保你把标记选项属性 - > labelInBackground：true 否则，我认为标签覆盖标记和事件不会注册。至少，这是我的解释。

就是这样。

来源

2016-07-25 01:18:12 userara

角谷歌地图不能点击标记第二次

回答

相关问题