how can i bind touch events for a marker in google maps?

前端 未结 2 1269
伪装坚强ぢ
伪装坚强ぢ 2020-12-11 06:36

google maps api does not support touch events

but now i need to do some thing on the map and marker, such as long tap the map, tap the marker,drag the marker.

<
相关标签:
2条回答
  • 2020-12-11 07:30

    I implemented touch events the same way as shreedhar, but using the "mousedown" event. I've found that "click" isn't triggered on mobile devices when using the Google Maps API in a webview (i.e. PhoneGap), but the "mousedown" event is triggered by a tap on mobile or a click on the web.

    window.infowindow = new google.maps.InfoWindow({
       content: 'content'
    });
    
    google.maps.event.addListener(marker, 'mousedown', function(){
       window.infowindow.open(marker.get('map'), marker);
    });
    

    Also, be sure to only define one infowindow variable on your page, and re-use it for all of your markers, hence why I defined infowindow as a "global" variable window.infowindow.

    0 讨论(0)
  • 2020-12-11 07:35

    In this link you can get many examples. https://google-developers.appspot.com/maps/documentation/javascript/examples/

    Recently i worked on google maps, and below is the code where you can drag and drop the marker, and it works perfect in mobile web browsers.

    gmap : function(lat,lng){
                var stockholm = new google.maps.LatLng(lat, lng);
                var parliament = new google.maps.LatLng(lat, lng);
                var marker;
                var map;
                function initialize() {
                    var mapOptions = {
                        zoom: 13,
                        disableDefaultUI: true,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        center: stockholm
                    };
                    map = new google.maps.Map(document.getElementById("gmapDiv"),mapOptions);
                    marker = new google.maps.Marker({
                        map:map,
                        draggable:true,
                        animation: google.maps.Animation.DROP,
                        position: parliament
                    });
                   var infowindow = new google.maps.InfoWindow({
                       content: 'content'
                   });
                    google.maps.event.addListener(marker, 'click', function(){
                      infowindow.open(marker.get('map'), marker);
                      });
                }
                initialize();
            }
    
    0 讨论(0)
提交回复
热议问题