将一个onclick事件添加到google.map标记中 [英] Adding an onclick event to google.map marker

问题描述

  var myCenter = new google.maps.LatLng（53，-1.33）; 
 
函数initialize（）
 {
 var mapProp = {
 center：myCenter，
 zoom：14，
 draggable：false，
 scrollwheel：false，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 
 var map =新的google.maps.Map（document.getElementById（map-canvas），mapProp）; 
 
 var marker = new google.maps.Marker（{
 position：myCenter，
图标：'images / pin.png'，
网址：'http://www.google.com/'，
动画：google.maps.Animation.DROP 
}） ; 
 marker.setMap（map）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
  

但是我似乎无法连接标记网址的onclick事件？

我知道这与添加

  google.maps.event.addListener（mar ker，'click'，function（）{window.location.href = marker.url;}）; 
  

但是，当我放置它时，导致地图不显示或标记不显示。请确保标记在initialize（）之外定义。

解决方案否则，如果您尝试在initialize（）之外分配click监听器，它将会是 undefined 。

另外，如果你尝试加载url www.google.com ，你可能会遇到SAME-ORIGIN问题，但它应该可以正常使用本地网址。

更新后的代码

  var myCenter = new google.maps.LatLng（ 53，-1.33）; 
 
 var marker = new google.maps.Marker（{
 position：myCenter，
 url：'/'，
 animation：google.maps.Animation.DROP 
}）; 
 
函数initialize（）
 {
 var mapProp = {
 center：myCenter，
 zoom：14，
 draggable：false，
 scrollwheel：false，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 
 var map = new google.maps.Map（document.getElementById（map-canvas），mapProp）; 
 
 marker.setMap（map）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 google.maps.event.addListener（marker，'click'，function（）{window.location.href = marker.url;}）; 
  

在Bootply上进行演示

I'm stuck trying to figure out a little bit of JS :( I have a google map

var myCenter=new google.maps.LatLng(53, -1.33);

function initialize()
{
var mapProp = {
    center:myCenter,
    zoom: 14,
    draggable: false,
    scrollwheel: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);

var marker=new google.maps.Marker({
    position:myCenter,
    icon:'images/pin.png',
    url: 'http://www.google.com/',
    animation:google.maps.Animation.DROP
});
marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

But I can't seem to hook up the onclick event for the marker url?

I know it has something to do with adding

google.maps.event.addListener(marker, 'click', function() {window.location.href = marker.url;});

But where ever I put it causes the map to not display or the marker to not display.

解决方案

Make sure the marker is defined outside of initialize(). Otherwise, it will be undefined if you attempt to assign the click listener outside of initialize().

Also, you may have SAME-ORIGIN issues if you attempt to load url www.google.com, but it should work fine with a local url.

Updated code

var myCenter=new google.maps.LatLng(53, -1.33);

var marker=new google.maps.Marker({
    position:myCenter,
    url: '/',
    animation:google.maps.Animation.DROP
});

function initialize()
{
var mapProp = {
    center:myCenter,
    zoom: 14,
    draggable: false,
    scrollwheel: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, 'click', function() {window.location.href = marker.url;});

Working Demo on Bootply

这篇关于将一个onclick事件添加到google.map标记中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！