Question

尝试让我的标记指向其他页面。复制以前解决的案例的答案。仍然无法正常工作。带标记的地图就可以了。即使是标题，但链接不起作用。继续留言“Uncaught ReferenceError：marker not defined”。我在这做错了什么？超出想法。
有人可以帮我解决这个问题。非常感谢;

<script 
    src="https://maps.googleapis.com/maps/api/js?language=ko&key=AIzaSyA3WDZ1KfeUb_Q-SxtIRE2wZ4RBieuGl7s"
    type="text/javascript">
</script>
<script>
 function Goog2() {
     var mapCanvas = document.getElementById('Google_map');
     var mapOptions = {
      center: new google.maps.LatLng(45.80257,15.9371),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var map = new google.maps.Map(mapCanvas, mapOptions);

     var myLatLng0 = new google.maps.LatLng(45.80257,15.9371);
     var myLatLng1 = new google.maps.LatLng(45.805455,15.983761);
     var myLatLng2 = new google.maps.LatLng(45.738822, 16.068278);
     var myLatLng3 = new google.maps.LatLng(45.803816, 15.993573);

    var markers = [];


    markers[0] = new google.maps.Marker({
         position: myLatLng0,
         map: map,
         url: '/cocohouse/location/CH_location_en.html',
         icon: "/images/ariranglogoimage28_2.png",
         title: 'Coco House',
     });
     markers[1] = new google.maps.Marker({
         position: myLatLng1,
         map: map,
         icon: "/images/cocohouse/location/train26.png",
         url:"/cocohouse/location/to_CH3_en.html",
         title: 'Train Terminal',

     });
     markers[2] = new google.maps.Marker({
         position: myLatLng2,
         map: map,
         icon: "/images/cocohouse/location/airport32.png",
         url:"/cocohouse/location/to_CH1_en.html",
         title: 'Airport',
     });
     markers[3] = new google.maps.Marker({
         position: myLatLng3,
         map: map,
         icon: "/images/cocohouse/location/bus26.png",
         url:"/cocohouse/location/to_CH2_en.html",
         title: 'Bus Terminal',
     });
    }
    google.maps.event.addDomListener(window, 'load', Goog2);

    for ( i = 0; i < markers.lenght; i++ ) {
        google.maps.event.addListener(markers[i], 'click', function() {
          window.location.href = this.url; 
        });
    }
</script>

Answer 1

您在未定义的上下文中使用“标记”。 'markers'在Goog2函数中声明并在外面使用。

尝试（未测试）：

<script>
  function Goog2() {
     var mapCanvas = document.getElementById('Google_map');
     var mapOptions = {
      center: new google.maps.LatLng(45.80257,15.9371),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var map = new google.maps.Map(mapCanvas, mapOptions);

     var myLatLng0 = new google.maps.LatLng(45.80257,15.9371);
     var myLatLng1 = new google.maps.LatLng(45.805455,15.983761);
     var myLatLng2 = new google.maps.LatLng(45.738822, 16.068278);
     var myLatLng3 = new google.maps.LatLng(45.803816, 15.993573);
    var markers = [];
    markers[0] = new google.maps.Marker({
         position: myLatLng0,
         map: map,
         url: '/cocohouse/location/CH_location_en.html',
         icon: "/images/ariranglogoimage28_2.png",
         title: 'Coco House',
     });
     markers[1] = new google.maps.Marker({
         position: myLatLng1,
         map: map,
         icon: "/images/cocohouse/location/train26.png",
         url:"/cocohouse/location/to_CH3_en.html",
         title: 'Train Terminal',

     });
     markers[2] = new google.maps.Marker({
         position: myLatLng2,
         map: map,
         icon: "/images/cocohouse/location/airport32.png",
         url:"/cocohouse/location/to_CH1_en.html",
         title: 'Airport',
     });
     markers[3] = new google.maps.Marker({
         position: myLatLng3,
         map: map,
         icon: "/images/cocohouse/location/bus26.png",
         url:"/cocohouse/location/to_CH2_en.html",
         title: 'Bus Terminal',
     });

     for ( i = 0; i < markers.length; i++ ) {
        google.maps.event.addListener(markers[i], 'click', function() {
          window.location.href = this.url; 
        });
     }
    }
    google.maps.event.addDomListener(window, 'load', Goog2);

</script>

Answer 2

markers.lenght;应该阅读markers.length;

for (var i=0; i < markers.length; i++) {
    google.maps.event.addListener(markers[i], 'click', function () {
        window.location.href = this.url;
    });
}

markers需要在使用之前定义。

您在窗口加载时调用Goog2，但是在此事件之前和填充数组之前执行循环。

Answer 3

您在标记存在之前添加了单击侦听器。将该循环移到Goog2函数内。示例代码段（将标记更改为公开可用的图标，将URL更改为任意公共图标，修复了markers.length上的拼写错误）。

 function Goog2() {
   var mapCanvas = document.getElementById('Google_map');
   var mapOptions = {
     center: new google.maps.LatLng(45.80257, 15.9371),
     zoom: 10,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var map = new google.maps.Map(mapCanvas, mapOptions);

   var myLatLng0 = new google.maps.LatLng(45.80257, 15.9371);
   var myLatLng1 = new google.maps.LatLng(45.805455, 15.983761);
   var myLatLng2 = new google.maps.LatLng(45.738822, 16.068278);
   var myLatLng3 = new google.maps.LatLng(45.803816, 15.993573);

   var markers = [];


   markers[0] = new google.maps.Marker({
     position: myLatLng0,
     map: map,
     url: 'http://google.com',
     icon: "http://maps.google.com/mapfiles/ms/micons/yellow.png",
     title: 'Coco House',
   });
   markers[1] = new google.maps.Marker({
     position: myLatLng1,
     map: map,
     icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
     url: "http://yahoo.com",
     title: 'Train Terminal',

   });
   markers[2] = new google.maps.Marker({
     position: myLatLng2,
     map: map,
     icon: "http://maps.google.com/mapfiles/ms/micons/green.png",
     url: "http://maps.google.com",
     title: 'Airport',
   });
   markers[3] = new google.maps.Marker({
     position: myLatLng3,
     map: map,
     icon: "http://maps.google.com/mapfiles/ms/micons/purple.png",
     url: "http://www.cnn.com",
     title: 'Bus Terminal',
   });

   for (i = 0; i < markers.length; i++) {
     google.maps.event.addListener(markers[i], 'click', function() {
       window.location.href = this.url;
     });
   }
 }
 google.maps.event.addDomListener(window, 'load', Goog2);

html,
body,
#Google_map {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="Google_map" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

Google地图自定义标记链接无效

3 个答案: