个人中心
gpt4 book ai didi

javascript - 如何创建带有多个标记的谷歌地图，每个标记都有自己的点击网址？

转载 作者：行者123 更新时间：2023-11-28 04:43:14 25 4
gpt4 key购买 nike

我正在尝试创建一个 map ，其中包含一 strip 有多个标记的折线，每个标记都有自己的点击网址和信息窗口。我已将网址插入标记信息中，但每次测试时都会收到一条错误消息。我希望也将图像添加到信息窗口。-(404 Not Found)

<!DOCTYPE html>
 <html>
  <head>
    <style>
      html,
      body {
        font-family: Arial, sans-serif;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
       height: 100%;
      }
    </style>
      </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
      // Styles a map in night mode.
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 38.6530169, lng: -90.3835485},
        zoom: 6,
        styles: [
            {elementType: 'geometry', stylers: [{ color: '#ebe3cd'}]},
            {elementType: 'labels', stylers: [{visibility: 'off'}]},
            {elementType: 'labels.text.fill',stylers: [{color: '#523735'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
            {
              featureType: 'administrative',
              elementType: 'geometry',
          stylers: [{ 'visibility': 'off'}]
        },
        {
          featureType: 'administrative',
          elementType: 'geometry.stroke',
          stylers: [{ color: '#c9b2a6'}]
        },
        {
          featureType: 'administrative.land_parcel',
          stylers: [{'visibility': 'off'}]
        },
        {
          featureType: 'administrative.land_parcel',
          elementType: 'geometry.stroke',
          stylers: [{ color: '#dcd2be'}]
        },
        {
          featureType: 'administrative.land_parcel',
          elementType: 'labels.text.fill',
          stylers: [{color: '#ae9e90'}]
        },
        {
          featureType: 'administrative.neighborhood',
          stylers: [{visibility: 'off'}]
        },
        {
          featureType: 'administrative.province',
          elementType: 'geometry',
          stylers: [{visibility: 'on'},{weight: '1.5'}]
        },
        {
          featureType: 'landscape.natural',
          elementType: 'geometry',
          stylers: [{color: '#dfd2ae'}]
        },
        {
          featureType: 'poi',
          stylers: [{visibility: 'off'}]
        },
        {
          featureType: 'poi',
          elementType: 'geometry',
          stylers: [{color: '#dfd2ae'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#93817c'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry.fill',
          stylers: [{ color: '#a5b076'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#447530'}]
        },
        {
          featureType: 'road',
          stylers: [{visibility: 'off'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#f5f1e6'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.icon',
          stylers: [{visibility: "off"}]
        },
        {
          featureType: 'road.arterial',
          elementType: 'geometry',
          stylers: [{color: '#fdfcf8'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#f8c967'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#e9bc62'}]
        },
        {
          featureType: 'road.highway.controlled_access',
          elementType: 'geometry',
          stylers: [{color: '#e98d58'}]
        },
        {
          featureType: 'road.highway.controlled_access',
          elementType: 'geometry.stroke',
          stylers: [{color: '#db8555'}]
        },
        {
          featureType: 'road.local',
          elementType: 'labels.text.fill',
          stylers: [{color: '#806b63'}]
        },
        {
          featureType: 'transit',
          stylers: [{visibility: 'off'}]
        },
        {
          featureType: 'transit.line',
          elementType: 'geometry',
          stylers: [{color: '#dfd2ae'}]
        },
        {
          featureType: 'transit.line',
          elementType: 'labels.text.fill',
          stylers: [{color: '#8f7d77'}]
        },
        {
          featureType: 'transit.line',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#ebe3cd'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'geometry',
          stylers: [{color: '#dfd2ae'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry.fill',
          stylers: [{color: '#b9d3c2'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#92998d'}]
        }
        ]
    });
     var locations = [
      ['August 20, 
1832',40.423731,-83.8944137,10,"https://www.google.com/"],
      ['September 19th, 
1832',40.4237331,-83.8944137,9,"https://www.google.com/"],
      ['September 25th, 
1832',40.1066821,-84.649707,8,"https://www.google.com/"],
      ['October 1st, 
1832',39.8379723,-84.958815,7,"https://www.google.com/"],
      ['October 10th, 
  1832',39.6415502,-86.8738581,6,"https://www.google.com/"],
      ['October 14th, 
  1832',39.6959955,-87.9244163,5,"https://www.google.com/"],
      ['October 29th, 
 1832',37.9204684,-89.9206883,4,"https://www.google.com/"],
      ['November 1, 1832', 
   37.4986755,-90.3080368,3,"https://www.google.com/"],
      ['November 28th. 
  1832',37.2035869,-92.048218,2,"https://www.google.com/"],
      ['December 14th, 1832',36.8811974, 
 -94.9064899,1,"https://www.google.com/"],

    ];
    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    var markers = new Array();

    for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
      marker.url = locations[i][4]; 
    });

    window.location.href = marker.url;


    markers.push(marker);

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


  google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
    return function() {

    var html = '<h4>' + locations[i][0] + '</h4>';
    html += '<img src="' + locations[i][4] + '" />';

      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
    }


    var flightPlanCoordinates = [
      {lat: 40.423731, lng: -83.8944137},
      {lat: 40.4237331, lng: -83.8944137},
      {lat: 40.1066821, lng: -84.649707},
      {lat: 39.8379723, lng: -84.958815},
      {lat: 39.6415502, lng: -86.8738581},
      {lat: 39.6959955, lng: -87.9244163},
      {lat: 37.9204684, lng: -89.9206883},
      {lat: 37.4986755, lng: -90.3080368},
      {lat: 37.2035869, lng: -92.048218},
      {lat: 36.8811974, lng: -94.9064899},

      ];

    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#340684',
      strokeOpacity: .5,
      strokeWeight: 2
    });

    flightPath.setMap(map);
  }
</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?
 key=AIzaSyBI8ub80FYP5f06rn2yxwNgJW55L3NEOlM&v=3&callback=initMap">
</script>

  </body>
</html>

最佳答案

在这部分代码中，假设您在每个数组元素的第四个位置定义了一个 url:

...
for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], locations[i][2]),
     map: map
});
//-----------add this : 
marker.url = locations[i][4];
...

重定向时也使用此:

window.location.href = marker.url;

您可能需要使用 http 或 https 前缀定义您的网址。

关于javascript - 如何创建带有多个标记的谷歌地图，每个标记都有自己的点击网址？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43600832/

25 4 0
文章推荐： c++ - SARSA的Zeta变量(lamda)
文章推荐： javascript - 有什么方法可以关闭ajax加载元素的点击
文章推荐： javascript - Vue.js 事件总线
文章推荐： c++ - 将 QLabel 与自定义 QGraphicsItem 对齐
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com