Google maps custom overlay click event

I have integrated google maps into an ionic project and have applied a custom overlay to appear above the map marker to display the address of the marker location.

I have applied a click event listener to the map to detect any clicks and then clear and reapply a new marker for the new location. So far so good. I have applied ng-click attribute to the overlay div to then execute some code. This works too. The problem I have is that when clicking the overlay div, ng-click and map click event listener both fire, moving the marker. I want only the div listener to fire but can't seem to achieve this.

Am I missing something simple here?

Please see the following code and this codepen for a working example http://codepen.io/antonfire/pen/LGMqJz

I'm listening on the map like so:

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


            $scope.map.addListener('click', function(event) {
               placeMarker(event.latLng);
            });

and do not have a listener on the marker div, rather I am using the ng-click attribute:

  <div id="map" data-tap-disabled="true"></div>
  <div id="customMapMarkerDiv" ng-click="choosePassportLocation(chosenPassport)"><i class="icon ion-plane"></i><h5> {{chosenPassport.address}}</h5></div>

Any help would be very much appreciated.

Thanks

---

The answer to this is to apply css to the marker div to set pointer events to auto .

CSS:

pointer-events: auto;

链接地址: http://www.djcxy.com/p/96196.html

上一篇: JavaScript的

下一篇: Google地图自定义叠加点击事件