谷歌地图中的弹出信息框

时间：2015-06-09 02:25:06

标签： javascript google-maps google-maps-api-3

我有以下代码，并希望为每个自定义标记添加弹出信息框。目前我可以在我的代码中设置每个标记的坐标，但是我还想在点击标记后在弹出信息框中添加其他信息。我似乎无法使用弹出信息框

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

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

以下评论步骤：

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

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

  3. infoWindow的回调setContent。您可能希望动态创建一个html字符串并将其发送到setContent

  4. 然后，回调将在点击的map

    5. 上打开marker上的信息 

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

答案 1 :(得分：0)

刚刚在$this->db->select('*'); $query = $this->db->get('your_table'); $this->load->helper('csv'); query_to_csv($query, TRUE, 'filename.csv'); 上方声明变量infoWindow并在其addMarker打开并设置infowindow的内容

actionListener

退房：

 google.maps.event.addListener(marker, 'click', function() {
           infoWindow.setContent('Hi');
           infoWindow.open(map,this);
        });

    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() {
           infoWindow.setContent('Hi');
           infoWindow.open(map,this);
        });
        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
         infoWindow.setContent('ADD CONTENT HERE');
         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);
  
 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;
    }

相关问题
最新问题