Question

我在这里做错了什么？单击绿色标记对此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'>
...

（添加了附加文本，因为Stack Overflow认为我的问题包含的代码太多而文本不够充分）

Answer 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代码段中不起作用，而是用InfoWindow替换）：

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>

Google地图点击事件无效

1 个答案: