个人中心
gpt4 book ai didi

javascript - 谷歌地图中弹出信息框

转载 作者：行者123 更新时间：2023-12-03 09:56:36 25 4
gpt4 key购买 nike

我有以下代码，希望获得一些帮助，为每个自定义标记添加弹出信息框。目前，我可以在代码中设置每个标记的坐标，但我还想在单击标记后在弹出信息框中添加其他信息。我似乎无法让弹出信息框工作 

<!DOCTYPE html>
<html>

<head>
  <title>Cycle Trails Map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-    scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map_canvas {
      width: 100%;
      height: 1000px;
      background-color: #2D333C;
    }
    #legend {
      font-family: Helvetica;
      color: #FFD900;
      background: rgba(0, 0, 0, 0.6);
      padding: 25px;
      margin: 25px;
      border: 1px solid #FFD900;
    }
    #legend h3 {
      margin-top: 0;
    }
    #legend img {
      vertical-align: middle;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script>
    var map; // google map object
    var markers = []; // we well store the markers here 


    function initialize() {
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 6,
        center: new google.maps.LatLng(-41.269954, 174.225516),
        mapTypeId: google.maps.MapTypeId.TERRAIN,



        <!-- Let's style the map with custom colours and opacity -->	  

        styles: [{
          featureType: 'poi.business',
          elementType: ' labels.icon',
          stylers: [{
            visibility: 'on'
          }, {
            hue: '#ff00db'
          }, {
            lightness: 0
          }, {
            saturation: 0
          }]
        }]
      });



      <!-- create KML layer -->

      var myKmlOptions = {
        preserveViewport: true,
        suppressInfoWindows: true
      }

      var kmlLayer_1 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/final.kml", myKmlOptions);
      var kmlLayer_2 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/sep.kml", myKmlOptions);
      kmlLayer_1.setMap(map);
      kmlLayer_2.setMap(map);







      <!-- Asynchronous Loading -->
      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
          '&signed_in=true&callback=initialize';
        document.body.appendChild(script);
      }

      window.onload = loadScript;











      <!-- Let's create the legend -->


      var iconBase = 'https://i.imgur.com/';
      var icons = {
        travel: {
          name: 'AA Traveller office',
          icon: iconBase + '2BNbLmG.png'
        },
        isite: {
          name: 'I-Site',
          icon: iconBase + 'kx9a1sc.png'
        },

        accommodation: {
          name: 'Accommodation',
          icon: iconBase + 'BJ4o7ad.png'
        },

        camping: {
          name: 'Camping',
          icon: iconBase + 'EIcei8n.png'
        },


        food: {
          name: 'Food and Beverage',
          icon: iconBase + 'c5aaWcb.png'
        },


        toilets: {
          name: 'Toilets',
          icon: iconBase + 'ID2zzXg.png'
        },


        waters: {
          name: 'Drinking Water',
          icon: iconBase + '5u3yvH1.png'
        },


        todo: {
          name: 'Things to do',
          icon: iconBase + 'L3Z9xWv.png'
        },

        viewing: {
          name: 'Viewing points',
          icon: iconBase + 'DTf6oIp.png'
        }
      };
      <!-- Adding the markers now -->
      function addMarker(feature) {
        var marker = new google.maps.Marker({
          position: feature.position,
          icon: icons[feature.type].icon,
          map: map
        });
        markers.push({
          marker: marker,
          type: feature.type
        });
      }

      <!-- Add the legend locations -->


      var features = [
        <!-- AA Travel -->
        {
          position: new google.maps.LatLng(-36.750002, 174.729471),
          type: 'travel'
        },




        <!-- I Site -->
        {
          position: new google.maps.LatLng(-37.226583, 175.335536),
          type: 'isite'
        },





        <!-- Accommodation -->
        {
          position: new google.maps.LatLng(-36.807404, 175.144404),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-39.808155, 175.474612),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-41.776782, 171.504106),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-43.820004, 172.965288),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-44.626974, 169.317827),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-46.522343, 168.455400),
          type: 'accommodation'
        },





        <!-- Camping -->
        {
          position: new google.maps.LatLng(-36.556301, 174.693964),
          type: 'camping'
        },






        <!-- Food and Beverage -->
        {
          position: new google.maps.LatLng(-38.368372, 176.847826),
          type: 'food'
        },





        <!-- Water -->
        {
          position: new google.maps.LatLng(-39.241622, 174.782397),
          type: 'waters'
        },







        <!-- Things to do -->
        {
          position: new google.maps.LatLng(-40.339016, 176.298510),
          type: 'todo'
        },






        <!-- Toilets -->
        {
          position: new google.maps.LatLng(-42.788153, 172.497240),
          type: 'toilets'
        },

        {
          position: new google.maps.LatLng(-41.878568, 173.837572),
          type: 'toilets'
        },





        <!-- Viewing spots -->
        {
          position: new google.maps.LatLng(-43.890775, 171.838061),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-37.676004, 178.429858),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-39.278658, 173.763491),
          type: 'viewing'
        }

      ];

      for (var i = 0, feature; feature = features[i]; i++) {
        addMarker(feature);
      }

      var legend = document.getElementById('legend');
      var i = 0;
      for (var key in icons) {
        var type = icons[key];
        var name = type.name;
        var icon = type.icon;
        var div = document.createElement('div');
        div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \'' + key + '\')"><img src="' + icon + '"> ' + name;
        legend.appendChild(div);
        i++;
      }
      map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
    }

    function toggleType(elm, event, type) {
      var on = elm.checked;
      for (var i = 0; i < markers.length; i++) {
        if (markers[i].type == type) {
          markers[i].marker.setMap(on ? map : null);
        }
      }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map_canvas"></div>
  <div id="legend">
    <h3>Points of Interest</h3>
  </div>



</body>

</html>

最佳答案

您需要阅读以下内容:https://developers.google.com/maps/documentation/javascript/infowindows

以下步骤及评论:

  1. 构造一个 infoWindow 对象 new google.maps.InfoWindow()

  2. 在创建每个标记时，将单击事件绑定(bind)到该标记。至少将您通过闭包创建的标记传递给该回调。

  3. 回调将设置infoWindow的内容。您可能想要动态创建一个 html 字符串并将其发送到 setContent

  4. 回调将在点击的标记上打开 map 上的信息

<!DOCTYPE html>
<html>

<head>
  <title>Cycle Trails Map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-    scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map_canvas {
      width: 100%;
      height: 1000px;
      background-color: #2D333C;
    }
    #legend {
      font-family: Helvetica;
      color: #FFD900;
      background: rgba(0, 0, 0, 0.6);
      padding: 25px;
      margin: 25px;
      border: 1px solid #FFD900;
    }
    #legend h3 {
      margin-top: 0;
    }
    #legend img {
      vertical-align: middle;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script>
    var map; // google map object
    var markers = []; // we well store the markers here 


    function initialize() {
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 6,
        center: new google.maps.LatLng(-41.269954, 174.225516),
        mapTypeId: google.maps.MapTypeId.TERRAIN,



        <!-- Let's style the map with custom colours and opacity -->	  

        styles: [{
          featureType: 'poi.business',
          elementType: ' labels.icon',
          stylers: [{
            visibility: 'on'
          }, {
            hue: '#ff00db'
          }, {
            lightness: 0
          }, {
            saturation: 0
          }]
        }]
      });



      <!-- create KML layer -->

      var myKmlOptions = {
        preserveViewport: true,
        suppressInfoWindows: true
      }

      var kmlLayer_1 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/final.kml", myKmlOptions);
      var kmlLayer_2 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/sep.kml", myKmlOptions);
      kmlLayer_1.setMap(map);
      kmlLayer_2.setMap(map);







      <!-- Asynchronous Loading -->
      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
          '&signed_in=true&callback=initialize';
        document.body.appendChild(script);
      }

      window.onload = loadScript;











      <!-- Let's create the legend -->


      var iconBase = 'https://i.imgur.com/';
      var icons = {
        travel: {
          name: 'AA Traveller office',
          icon: iconBase + '2BNbLmG.png'
        },
        isite: {
          name: 'I-Site',
          icon: iconBase + 'kx9a1sc.png'
        },

        accommodation: {
          name: 'Accommodation',
          icon: iconBase + 'BJ4o7ad.png'
        },

        camping: {
          name: 'Camping',
          icon: iconBase + 'EIcei8n.png'
        },


        food: {
          name: 'Food and Beverage',
          icon: iconBase + 'c5aaWcb.png'
        },


        toilets: {
          name: 'Toilets',
          icon: iconBase + 'ID2zzXg.png'
        },


        waters: {
          name: 'Drinking Water',
          icon: iconBase + '5u3yvH1.png'
        },


        todo: {
          name: 'Things to do',
          icon: iconBase + 'L3Z9xWv.png'
        },

        viewing: {
          name: 'Viewing points',
          icon: iconBase + 'DTf6oIp.png'
        }
      };
      // make one infoWindow
      var infoWindow = new google.maps.InfoWindow();
      <!-- Adding the markers now -->
      function addMarker(feature) {
        var marker = new google.maps.Marker({
          position: feature.position,
          icon: icons[feature.type].icon,
          map: map
        });
        // bind a to the marker
        google.maps.event.addListener(marker, 'click', function() {
            openInfoWindow(marker, feature) // pass in feature as closure
        });
        markers.push({
          marker: marker,
          type: feature.type
        });
      }

      // generic callback whenever an info window is clicked
      function openInfoWindow(marker, feature) {
         // i'm unsure of where you're data will come to populate the infoWindow, it could come from the `feature` object (the same thing that you used to create the marker)
         infoWindow.setContent('<h3>Type: ' + feature.type + '<h3>');
         infoWindow.open(map, marker); // open the infoWindow above the marker. the maps API will bind the close button click for you. 
      
      }

      <!-- Add the legend locations -->


      var features = [
        <!-- AA Travel -->
        {
          position: new google.maps.LatLng(-36.750002, 174.729471),
          type: 'travel'
        },




        <!-- I Site -->
        {
          position: new google.maps.LatLng(-37.226583, 175.335536),
          type: 'isite'
        },





        <!-- Accommodation -->
        {
          position: new google.maps.LatLng(-36.807404, 175.144404),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-39.808155, 175.474612),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-41.776782, 171.504106),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-43.820004, 172.965288),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-44.626974, 169.317827),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-46.522343, 168.455400),
          type: 'accommodation'
        },





        <!-- Camping -->
        {
          position: new google.maps.LatLng(-36.556301, 174.693964),
          type: 'camping'
        },






        <!-- Food and Beverage -->
        {
          position: new google.maps.LatLng(-38.368372, 176.847826),
          type: 'food'
        },





        <!-- Water -->
        {
          position: new google.maps.LatLng(-39.241622, 174.782397),
          type: 'waters'
        },







        <!-- Things to do -->
        {
          position: new google.maps.LatLng(-40.339016, 176.298510),
          type: 'todo'
        },






        <!-- Toilets -->
        {
          position: new google.maps.LatLng(-42.788153, 172.497240),
          type: 'toilets'
        },

        {
          position: new google.maps.LatLng(-41.878568, 173.837572),
          type: 'toilets'
        },





        <!-- Viewing spots -->
        {
          position: new google.maps.LatLng(-43.890775, 171.838061),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-37.676004, 178.429858),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-39.278658, 173.763491),
          type: 'viewing'
        }

      ];

      for (var i = 0, feature; feature = features[i]; i++) {
        addMarker(feature);
      }

      var legend = document.getElementById('legend');
      var i = 0;
      for (var key in icons) {
        var type = icons[key];
        var name = type.name;
        var icon = type.icon;
        var div = document.createElement('div');
        div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \'' + key + '\')"><img src="' + icon + '"> ' + name;
        legend.appendChild(div);
        i++;
      }
      map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
    }

    function toggleType(elm, event, type) {
      var on = elm.checked;
      for (var i = 0; i < markers.length; i++) {
        if (markers[i].type == type) {
          markers[i].marker.setMap(on ? map : null);
        }
      }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map_canvas"></div>
  <div id="legend">
    <h3>Points of Interest</h3>
  </div>



</body>

</html>

关于javascript - 谷歌地图中弹出信息框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30722035/

25 4 0
文章推荐： javascript - 同时搜索两个网站并将结果并排显示在一页上
文章推荐： javascript - 将 Google 表格中的日期和时间列合并为 createEvent() 函数
文章推荐： javascript - Node.js 服务器端检查
文章推荐： javascript - Ajax PHP 返回空文件
行者123
个人简介

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

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