谷歌地图自定义标记链接不起作用

Google map custom marker link not working

本文关键字:链接 不起作用 自定义 谷歌地图      更新时间:2023-09-26

试图让我的标记指向另一个页面。复制了以前解决的案例中的答案。仍然不起作用。带有标记的地图显示正常。然而,即使标题在那里,链接也不起作用。继续显示消息"未捕获的引用错误:未定义标记"。我在这里做错了什么??没主意了。
有人可以看看帮助我摆脱困境。巨大的感谢;

<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>

您在未定义的上下文中使用"标记"。"标记"在 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>

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但循环在此事件之前和填充数组之前执行。

您将在标记存在之前添加单击侦听器。 在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>