谷歌地图：点击按钮打开特定的信息窗口

时间：2017-10-24 09:10:33

标签： javascript jquery html css google-maps

我使用谷歌地图自定义标记与信息窗口。当用户点击特定按钮时，我需要添加功能以打开信息窗口。有多个标记具有单独的内容。在这里，我找到了一个解决方案，只需点击一下按钮即可打开一个信息窗口：https://stackoverflow.com/a/18334899/6191987

我已尝试使用上述解决方案，但我不知道如何定位按钮点击时打开每个特定的信息窗口。

以下是我尝试过的代码：

＆＃13;
＆＃13; 
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  #map {
    height: 100%;
  }
  
  .btns {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px
  }
  
  .btns a {
    display: block;
    padding: 10px;
    float: left;
    background: #eee;
    margin-right: 5px;
    text-decoration: none;
  }
＆＃13; 
<div class="btns">
  <a href="#" onclick="myClick(0);">Open Info Window 1</a>
  <a href="#" onclick="myClick(0);">Open Info Window 2</a>
  <a href="#" onclick="myClick(0);">Open Info Window 3</a>
</div>

<div id="map"></div>

<script>
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: new google.maps.LatLng(40.712696, -74.005019),
      mapTypeId: 'roadmap',
      styles: [{
        elementType: 'geometry',
        stylers: [{
          color: '#242f3e'
        }]
      }, {
        elementType: 'labels.text.stroke',
        stylers: [{
          color: '#242f3e'
        }]
      }, {
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#746855'
        }]
      }, {
        featureType: 'administrative.locality',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#d59563'
        }]
      }, {
        featureType: 'poi',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#d59563'
        }]
      }, {
        featureType: 'poi.park',
        elementType: 'geometry',
        stylers: [{
          color: '#263c3f'
        }]
      }, {
        featureType: 'poi.park',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#6b9a76'
        }]
      }, {
        featureType: 'road',
        elementType: 'geometry',
        stylers: [{
          color: '#38414e'
        }]
      }, {
        featureType: 'road',
        elementType: 'geometry.stroke',
        stylers: [{
          color: '#212a37'
        }]
      }, {
        featureType: 'road',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#9ca5b3'
        }]
      }, {
        featureType: 'road.highway',
        elementType: 'geometry',
        stylers: [{
          color: '#746855'
        }]
      }, {
        featureType: 'road.highway',
        elementType: 'geometry.stroke',
        stylers: [{
          color: '#1f2835'
        }]
      }, {
        featureType: 'road.highway',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#f3d19c'
        }]
      }, {
        featureType: 'transit',
        elementType: 'geometry',
        stylers: [{
          color: '#2f3948'
        }]
      }, {
        featureType: 'transit.station',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#d59563'
        }]
      }, {
        featureType: 'water',
        elementType: 'geometry',
        stylers: [{
          color: '#17263c'
        }]
      }, {
        featureType: 'water',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#515c6d'
        }]
      }, {
        featureType: 'water',
        elementType: 'labels.text.stroke',
        stylers: [{
          color: '#17263c'
        }]
      }]
    });

    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var icons = {
      parking: {
        icon: iconBase + 'parking_lot_maps.png'
      },
      library: {
        icon: iconBase + 'library_maps.png'
      },
      info: {
        icon: iconBase + 'info-i_maps.png'
      }
    };

    var features = [{
      position: new google.maps.LatLng(40.712696, -74.005019),
      content: 'test content one',
      type: 'parking'
    }, {
      position: new google.maps.LatLng(40.712753, -74.006081),
      content: 'test content two',
      type: 'parking'
    }, {
      position: new google.maps.LatLng(40.713664, -74.007819),
      content: 'test content three <a href="http://www.google.com">A link to google</a>',
      type: 'library'
    }];

    var infowindow = new google.maps.InfoWindow({
      content: ""
    });

    // Create markers.
    features.forEach(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        content: feature.content,
        icon: icons[feature.type].icon,
        map: map
      });
      var content = "<a href='" + feature.content + "'>A link to google</a>";
      marker.addListener('click', function() {
        infowindow.setContent('<div><strong>' + marker.content + '</strong></div>');

        infowindow.open(map, marker);
      });
    });
  }
  //on click function
  function myClick(id) {
    google.maps.event.trigger(markers[id], 'click');
  }

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">


</script>
＆＃13;
＆＃13;
＆＃13;

JSFiddle：https://jsfiddle.net/vishnuprasadps/3wk7q3fd/

1 个答案:

答案 0 :(得分：2)

这是因为markers不是代码中定义的变量。在代码的顶部，您可以简单地将markers声明为空数组，即：

var markers = [];

进一步靠近代码底部，当您遍历features集合时，必须将标记对象推入此数组，即：markers.push(marker);。在代码的上下文中，它看起来像这样：

// Create markers.
features.forEach(function(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    content: feature.content,
    icon: icons[feature.type].icon,
    map: map
  });
  var content = "<a href='" + feature.content + "'>A link to google</a>";
  marker.addListener('click', function() {
    infowindow.setContent('<div><strong>' + marker.content + '</strong></div>');

    infowindow.open(map, marker);
  });

  // Push your marker object into your array
  markers.push(marker);
});

这应该有效：见下面的概念验证。注意：我已经冒昧地更改了内联JS回调参数，因此您不会为所有3个链接触发相同的标记信息窗口。

html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  #map {
    height: 100%;
  }
  
  .btns {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px
  }
  
  .btns a {
    display: block;
    padding: 10px;
    float: left;
    background: #eee;
    margin-right: 5px;
    text-decoration: none;
  }
<div class="btns">
  <a href="#" onclick="myClick(0);">Open Info Window 1</a>
  <a href="#" onclick="myClick(1);">Open Info Window 2</a>
  <a href="#" onclick="myClick(2);">Open Info Window 3</a>
</div>

<div id="map"></div>

<script>
  var map;
  var markers = [];

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: new google.maps.LatLng(40.712696, -74.005019),
      mapTypeId: 'roadmap',
      styles: [{
        elementType: 'geometry',
        stylers: [{
          color: '#242f3e'
        }]
      }, {
        elementType: 'labels.text.stroke',
        stylers: [{
          color: '#242f3e'
        }]
      }, {
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#746855'
        }]
      }, {
        featureType: 'administrative.locality',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#d59563'
        }]
      }, {
        featureType: 'poi',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#d59563'
        }]
      }, {
        featureType: 'poi.park',
        elementType: 'geometry',
        stylers: [{
          color: '#263c3f'
        }]
      }, {
        featureType: 'poi.park',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#6b9a76'
        }]
      }, {
        featureType: 'road',
        elementType: 'geometry',
        stylers: [{
          color: '#38414e'
        }]
      }, {
        featureType: 'road',
        elementType: 'geometry.stroke',
        stylers: [{
          color: '#212a37'
        }]
      }, {
        featureType: 'road',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#9ca5b3'
        }]
      }, {
        featureType: 'road.highway',
        elementType: 'geometry',
        stylers: [{
          color: '#746855'
        }]
      }, {
        featureType: 'road.highway',
        elementType: 'geometry.stroke',
        stylers: [{
          color: '#1f2835'
        }]
      }, {
        featureType: 'road.highway',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#f3d19c'
        }]
      }, {
        featureType: 'transit',
        elementType: 'geometry',
        stylers: [{
          color: '#2f3948'
        }]
      }, {
        featureType: 'transit.station',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#d59563'
        }]
      }, {
        featureType: 'water',
        elementType: 'geometry',
        stylers: [{
          color: '#17263c'
        }]
      }, {
        featureType: 'water',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#515c6d'
        }]
      }, {
        featureType: 'water',
        elementType: 'labels.text.stroke',
        stylers: [{
          color: '#17263c'
        }]
      }]
    });

    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var icons = {
      parking: {
        icon: iconBase + 'parking_lot_maps.png'
      },
      library: {
        icon: iconBase + 'library_maps.png'
      },
      info: {
        icon: iconBase + 'info-i_maps.png'
      }
    };

    var features = [{
      position: new google.maps.LatLng(40.712696, -74.005019),
      content: 'test content one',
      type: 'parking'
    }, {
      position: new google.maps.LatLng(40.712753, -74.006081),
      content: 'test content two',
      type: 'parking'
    }, {
      position: new google.maps.LatLng(40.713664, -74.007819),
      content: 'test content three <a href="http://www.google.com">A link to google</a>',
      type: 'library'
    }];

    var infowindow = new google.maps.InfoWindow({
      content: ""
    });

    // Create markers.
    features.forEach(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        content: feature.content,
        icon: icons[feature.type].icon,
        map: map
      });
      var content = "<a href='" + feature.content + "'>A link to google</a>";
      marker.addListener('click', function() {
        infowindow.setContent('<div><strong>' + marker.content + '</strong></div>');

        infowindow.open(map, marker);
      });
      
      markers.push(marker);
    });
  }
  //on click function
  function myClick(id) {
    google.maps.event.trigger(markers[id], 'click');
  }

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">


</script>

附加说明：

  • 不要使用内联JS 。您可以使用.addEventListener('click', function() {...})简单地遍历链接并将事件侦听器绑定到它们。
  • 如果您有任意数量的功能，那么您可以获得此集合的长度并动态生成链接
相关问题
最新问题