使用 google 地图 angularjs 和温泉时标记触摸事件的错误

Question

我有一个带有自定义标记的地图设置。我用 jsfiddle 做了这个，它在那里工作： https://jsfiddle.net/LdLy6t90/2/

但是，当我将其添加到我的温泉 ui-based 应用程序时，google 地图标记的触摸事件不会被触发。

我猜这是因为我正在使用的 js 导致了冲突。这就是我在 header:

中使用的

<script src="https://maps.googleapis.com/maps/api/js?key=XXXX" type="text/javascript"></script>
<script src="js/youtube.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-aria.js"></script>
<script src="js/angular-messages.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="js/angular-sanitize.js"></script>    
<script src="lib/onsen/js/angular/angular-touch.js"></script>   
<script src="lib/onsen/js/onsenui.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript" src="js/paypal-mobile-js-helper.js"></script>
<script src="js/plugins.js"></script>
<script src="js/app.js"></script>

我的地图代码如下，首先是 HTML:

    <div ng-app="mapsApp" ng-controller="MapCtrl">
      <div id="map"></div>
      <div id="class" ng-repeat="marker in markers | orderBy : 'title'">
        <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
      </div>
    </div>

我的app.js定义为：

angular.module('mapsApp', [])
  .controller('MapCtrl', function($scope) {

    $scope.places = [{
      place: 'Signs Restaurant & Bar',
      desc: '558 Yonge St, Toronto, ON, M4Y 1Z1<br/><a href="https://www.google.ca/maps/place/SIGNS+Restaurant+%26+Bar/@43.6646519,-79.3868667,17z/data=!3m1!4b1!4m2!3m1!1s0x882b34b3ead9489d:0x5fe4ae3930837053" target="_blank">View in Maps</a>',
      lat: 43.664639,
      long: -79.384649,
      icon: "http://google-maps-icons.googlecode.com/files/home.png"
    }, {
      place: 'Green P near Yonge & Wellesley',
      desc: ' Yonge St & Wellesley St, Toronto, ON<br/>Closest parking lot to SIGNS, about 180m.<br/><a href="https://www.google.ca/maps/place/17+Wellesley+St+E,+Toronto,+ON+M4Y/@43.6649906,-79.3859414,17z/data=!3m1!4b1!4m2!3m1!1s0x882b34b3a36f5213:0xa18b56300c35d337" target="_blank">View in Maps</a>',
      lat: 43.6649843,
      long: -79.3837849,
      icon: "http://google-maps-icons.googlecode.com/files/home.png"
    }, {
      place: 'Parklink Parking',
      desc: ' 8 Alexander St, Toronto, ON M4Y 1B4<br/>260m from SIGNS.<br/><a href="https://www.google.ca/maps/place/Parklink+Parking/@43.6631595,-79.3855347,17z/data=!3m1!4b1!4m2!3m1!1s0x882b34bd1cbf7183:0xde6ae8392ca8dfa2" target="_blank">View in Maps</a>',
      lat: 43.663157,
      long: -79.3833836,
      icon: "http://google-maps-icons.googlecode.com/files/home.png"
    }, {
      place: 'Unit Park',
      desc: '25 Grosvenor St, Toronto, ON<br/>About 300m from SIGNS.<br/><a href="https://www.google.ca/maps/place/Unit+Park+Co+Inc/@43.6626638,-79.3872999,17z/data=!3m1!4b1!4m2!3m1!1s0x882b34d25d8bb231:0xab7d297d190ec1fe" target="_blank">View in Maps</a>',
      lat: 43.6626531,
      long: -79.3851467,
      icon: "http://google-maps-icons.googlecode.com/files/home.png"
    }];

    var mapOptions = {
      zoom: 16,
      center: new google.maps.LatLng(43.664639, -79.384649),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();

    var createMarker = function(info) {

      var marker = new google.maps.Marker({
        map: $scope.map,
        position: new google.maps.LatLng(info.lat, info.long),
        title: info.place,
        icon: info.icon,
        animation: google.maps.Animation.DROP
      });
      marker.content = '<div style="text-align: center;" class="infoWindowContent">' + info.desc + '</div>';

      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
        infoWindow.open($scope.map, marker);
      });

      $scope.markers.push(marker);

    }
    var placeses = $scope.places;
    for (var i = 0; i < placeses.length; i++) {
      createMarker(placeses[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker) {
      e.preventDefault();
      google.maps.event.trigger(selectedMarker, 'click');
    }

  });

除标记的 touchevent 外，其他一切正常，我不明白为什么它在 fiddle 中有效，但在我基于 onsenui 的 cordova 应用程序中却无效。如有任何帮助，我们将不胜感激。

Answer 1

问题出在少数移动设备上，并非全部。感谢 GoogleMap Markers are Not Clickable on the Mobile Devices - 我找到了我的解决方案。

使用

"optimized: false" : ex => new google.maps.Marker({..., optimized: false, ...});

将事件侦听器更改为

 google.maps.event.addDomListener(marker, "click", function() {...});

使用 google 地图 angularjs 和温泉时标记触摸事件的错误

Bug with touchevents for markers when using google maps angularjs and onsen

angularjs

cordova

google-maps

angular-material

onsen-ui