1. 首頁
  2. 問答
  3. 谷歌地圖點擊事件不起作用

谷歌地圖點擊事件不起作用

2015-04-19 61 views
-3

我在這裏做錯了什麼？點擊綠色的標記在這webpage谷歌地圖點擊事件不起作用

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel=StyleSheet href="misc/pdavis.css" type="text/css"> 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script> 

<style>#map-canvas {width:200px;height:200px;}</style> 

<script> 
    function initialize() { 
    var mapCanvas = document.getElementById('map-canvas'); 
    var mapOptions = {center:new google.maps.LatLng(52.371431,4.866588),zoom:16,mapTypeId:google.maps.MapTypeId.ROADMAP,streetViewControl:false,mapTypeControl:false} 
     var map = new google.maps.Map(mapCanvas, mapOptions); 
    var myLatlng = new google.maps.LatLng(52.371431,4.866588); 
    var marker = new google.maps.Marker({position: myLatlng, map: map,title:'Kostverlorenvaart, en aansluiting Westelijk Marktkanaal'}); 
    var myLatLng0 = new google.maps.LatLng(52.371780,4.866096); 
    var marker0 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'A'}),position:myLatLng0,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng1 = new google.maps.LatLng(52.371861,4.866161); 
    var marker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'B'}),position:myLatLng1,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng2 = new google.maps.LatLng(52.371471,4.867189); 
    var marker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'C'}),position:myLatLng2,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng3 = new google.maps.LatLng(52.371458,4.867103); 
    var marker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'D'}),position:myLatLng3,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng4 = new google.maps.LatLng(52.370698,4.865923); 
    var marker4 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'E'}),position:myLatLng4,url:'http://www.pdavis.nl',map:map}); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    google.maps.event.addListener(marker0, 'click', function(){window.open(marker0.url);}); 
    google.maps.event.addListener(marker1, 'click', function(){window.open(marker1.url);}); 
    google.maps.event.addListener(marker2, 'click', function(){window.open(marker2.url);}); 
    google.maps.event.addListener(marker3, 'click', function(){window.open(marker3.url);}); 
    google.maps.event.addListener(marker4, 'click', function(){window.open(marker4.url);}); 

</script> 
<title>Kostverlorenvaart, en aansluiting Westelijk Marktkanaal</title> 
</head> 
<body onload='initialize()'> 
<div id='wrapper2'> 
...

沒有影響（附加文本添加，因爲堆棧溢出認爲我的問題包含太多的代碼，並沒有足夠的文本）

來源

2015-04-19 Peter Beresford

+0

沒有用DIV id =「map-canvas」在您的發佈代碼中。 – geocodezip

回答

1

您要添加的外部標記點擊監聽器初始化函數，所以它們在創建標記之前運行（當onload事件觸發時）。將這些調用移入您的初始化函數中。

function initialize() { 
    var mapCanvas = document.getElementById('map-canvas'); 
    var mapOptions = {center:new google.maps.LatLng(52.371431,4.866588),zoom:16,mapTypeId:google.maps.MapTypeId.ROADMAP,streetViewControl:false,mapTypeControl:false} 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
    var myLatlng = new google.maps.LatLng(52.371431,4.866588); 
    var marker = new google.maps.Marker({position: myLatlng, map: map,title:'Kostverlorenvaart, en aansluiting Westelijk Marktkanaal'}); 
    var myLatLng0 = new google.maps.LatLng(52.371780,4.866096); 
    var marker0 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'A'}),position:myLatLng0,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng1 = new google.maps.LatLng(52.371861,4.866161); 
    var marker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'B'}),position:myLatLng1,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng2 = new google.maps.LatLng(52.371471,4.867189); 
    var marker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'C'}),position:myLatLng2,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng3 = new google.maps.LatLng(52.371458,4.867103); 
    var marker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'D'}),position:myLatLng3,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng4 = new google.maps.LatLng(52.370698,4.865923); 
    var marker4 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'E'}),position:myLatLng4,url:'http://www.pdavis.nl',map:map}); 
    google.maps.event.addListener(marker0, 'click', function(){window.open(marker0.url);}); 
    google.maps.event.addListener(marker1, 'click', function(){window.open(marker1.url);}); 
    google.maps.event.addListener(marker2, 'click', function(){window.open(marker2.url);}); 
    google.maps.event.addListener(marker3, 'click', function(){window.open(marker3.url);}); 
    google.maps.event.addListener(marker4, 'click', function(){window.open(marker4.url);}); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize);

working fiddle

代碼段（不就是window.open不工作的SO代碼片段，以信息窗口替換）：

function initialize() { 
 
    var mapCanvas = document.getElementById('map-canvas'); 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(52.371431, 4.866588), 
 
    zoom: 16, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    streetViewControl: false, 
 
    mapTypeControl: false 
 
    } 
 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
 
    var myLatlng = new google.maps.LatLng(52.371431, 4.866588); 
 
    var marker = new google.maps.Marker({ 
 
    position: myLatlng, 
 
    map: map, 
 
    title: 'Kostverlorenvaart, en aansluiting Westelijk Marktkanaal' 
 
    }); 
 
    var myLatLng0 = new google.maps.LatLng(52.371780, 4.866096); 
 
    var marker0 = new StyledMarker({ 
 
    styleIcon: new StyledIcon(StyledIconTypes.MARKER, { 
 
     color: '00ff00', 
 
     text: 'A' 
 
    }), 
 
    position: myLatLng0, 
 
    url: 'http://www.pdavis.nl', 
 
    map: map 
 
    }); 
 
    var myLatLng1 = new google.maps.LatLng(52.371861, 4.866161); 
 
    var marker1 = new StyledMarker({ 
 
    styleIcon: new StyledIcon(StyledIconTypes.MARKER, { 
 
     color: '00ff00', 
 
     text: 'B' 
 
    }), 
 
    position: myLatLng1, 
 
    url: 'http://www.pdavis.nl', 
 
    map: map 
 
    }); 
 
    var myLatLng2 = new google.maps.LatLng(52.371471, 4.867189); 
 
    var marker2 = new StyledMarker({ 
 
    styleIcon: new StyledIcon(StyledIconTypes.MARKER, { 
 
     color: '00ff00', 
 
     text: 'C' 
 
    }), 
 
    position: myLatLng2, 
 
    url: 'http://www.pdavis.nl', 
 
    map: map 
 
    }); 
 
    var myLatLng3 = new google.maps.LatLng(52.371458, 4.867103); 
 
    var marker3 = new StyledMarker({ 
 
    styleIcon: new StyledIcon(StyledIconTypes.MARKER, { 
 
     color: '00ff00', 
 
     text: 'D' 
 
    }), 
 
    position: myLatLng3, 
 
    url: 'http://www.pdavis.nl', 
 
    map: map 
 
    }); 
 
    var myLatLng4 = new google.maps.LatLng(52.370698, 4.865923); 
 
    var marker4 = new StyledMarker({ 
 
    styleIcon: new StyledIcon(StyledIconTypes.MARKER, { 
 
     color: '00ff00', 
 
     text: 'E' 
 
    }), 
 
    position: myLatLng4, 
 
    url: 'http://www.pdavis.nl', 
 
    map: map 
 
    }); 
 
    var infoWin = new google.maps.InfoWindow(); 
 
    google.maps.event.addListener(marker0, 'click', function() { 
 
    infoWin.setContent("request was made in a sandboxed frame whose 'allow-popups' permission is not set.<br>window.open(marker0.url);"), infoWin.open(map, marker0); 
 
    }); 
 
    google.maps.event.addListener(marker1, 'click', function() { 
 
    infoWin.setContent("request was made in a sandboxed frame whose 'allow-popups' permission is not set.<br>window.open(marker1.url);"), infoWin.open(map, marker1); 
 
    }); 
 
    google.maps.event.addListener(marker2, 'click', function() { 
 
    infoWin.setContent("request was made in a sandboxed frame whose 'allow-popups' permission is not set.<br>window.open(marker2.url);"), infoWin.open(map, marker2); 
 
    }); 
 
    google.maps.event.addListener(marker3, 'click', function() { 
 
    infoWin.setContent("request was made in a sandboxed frame whose 'allow-popups' permission is not set.<br>window.open(marker3.url);"); 
 
    infoWin.open(map, marker3); 
 
    }); 
 
    google.maps.event.addListener(marker4, 'click', function() { 
 
    infoWin.setContent("request was made in a sandboxed frame whose 'allow-popups' permission is not set.<br>window.open(marker4.url);"); 
 
    infoWin.open(map, marker4); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);
body, 
 
html, 
 
#map-canvas, 
 
#wrapper2 { 
 
    width: 100%; 
 
    height: 100%; 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script> 
 
<div id='wrapper2'> 
 
    <div id="map-canvas" style="border: 2px solid #3872ac;"></div> 
 
</div>

來源

2015-04-19 13:35:42 geocodezip

+0

確實;非常感謝 –

相關問題

 相關問題