javascript 我如何为谷歌地图中的标记绑定触摸事件?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11321568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how can i bind touch events for a marker in google maps?
提问by simon xu
google maps api does not support touch events
google maps api 不支持触摸事件
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.
但是现在我需要在地图和标记上做一些事情,例如长按地图,点击标记,拖动标记。
what i wanna do is the same as the google maps client for iOS
我想做的和iOS的谷歌地图客户端一样
回答by Brad Griffith
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.
我以与 shreedhar 相同的方式实现了触摸事件,但使用了“mousedown”事件。我发现在 Web 视图(即 PhoneGap)中使用 Google Maps API 时,不会在移动设备上触发“点击”,但“鼠标按下”事件是通过点击移动设备或点击网络触发的。
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.
另外,请确保在您的页面上只定义一个 infowindow 变量,并将其重新用于所有标记,因此我将 infowindow 定义为“全局”变量 window.infowindow。
回答by Shreedhar
In this link you can get many examples. https://google-developers.appspot.com/maps/documentation/javascript/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();
}