使用google maps angularjs和onsen时标记的touchevents出现错误

我有一个带有自定义标记的地图设置。我使用了一个JSFIDLE来实现这一点，它在那里工作：

然而，当我在基于onsen ui的应用程序中添加相同的内容时，google地图标记的touchevents不会被触发

我猜这是因为我使用的js，可能有什么东西导致了冲突。这是我在标题中使用的内容：

<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>

My 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');
    }

  });

angular.module（'mapsApp'，[]）
.controller（'MapCtrl'，函数（$scope）{
$scope.places=[{
地点：“餐厅和酒吧标志”，
描述：“安大略省多伦多市永街558号，M4Y 1Z1
”，
拉脱维亚：43.664639，
长：-79.384649，
图标：“http://google-maps-icons.googlecode.com/files/home.png"
}, {
地点：'Yonge&Wellesley附近的Green P'，
描述：“多伦多Yonge St&Wellesley St，位于距离标志牌最近的停车场，约180米。
”，
拉脱维亚：43.6649843，
长：-79.3837849，
图标：“http://google-maps-icons.googlecode.com/files/home.png"
}, {
地点：“Parklink停车场”，
描述：“多伦多亚历山大街8号，M4Y 1B4上，距离标志260m。
”，
拉脱维亚：43.663157，
长：-79.3833836，
图标：“http://google-maps-icons.googlecode.com/files/home.png"
}, {
地点:"单位公园",，
描述：“多伦多格罗夫纳街25号，距离标志约300米。
”，
拉脱维亚：43.6626531，
长：-79.3851467，
图标：“http://google-maps-icons.googlecode.com/files/home.png"
}];
变量映射选项={
缩放：16，
中心：新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=函数（信息）{
var marker=new google.maps.marker({
map:$scope.map，
位置：新google.maps.LatLng（info.lat，info.long），
标题：info.place，
图标：info.icon，
动画：google.maps.animation.DROP
});
marker.content=''+info.desc+''；
google.maps.event.addListener（标记'click'，函数（）{
infoWindow.setContent（“”+marker.title+“”+marker.content）；
infoWindow.open（$scope.map，marker）；
});
$scope.markers.push（marker）；
}
var placeses=$scope.places；
对于（变量i=0；i

---

除了标记的touchevent之外，其他一切都可以工作，我不明白为什么它可以在小提琴中工作，但在我的基于onsenui的cordova应用程序中却不行。如果有任何帮助，我们将不胜感激。

问题出在一些移动设备上，而不是全部。多亏了-我找到了我的解决方案

使用

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

将事件侦听器更改为

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

---

你已经试过这个了吗。在移动设备上，点击事件不会被触发，而是触摸并根据鼠标向下事件的答案触发。您还必须用ng touch指令替换ng click。谢谢，我尝试过该解决方案，但mousedown似乎也不起作用。我甚至尝试过mouseup，不幸的是，该漏洞仍然存在。我会继续努力的。谢谢。如果你有任何其他想法，请告诉我。也许本指南可以帮助你（还有一个现场演示）谢谢，但该指南使用了相同的google.maps.event.addListener并单击我用于标记的事件函数，该指南实现了与我尝试的不同的功能。一、 此外，也没有滑动菜单滑动功能问题。如果你有其他想法，请告诉我。