如何在谷歌地图标记中添加点击事件？

Question

我使用包含经度和纬度值的地理列表调用此视图。

我将其转换为数组。

var geoArray = @Html.Raw(Json.Encode(@ViewBag.GeoList));

然后在循环中我将这些值放到标记中，

    for (var i = 0; i < geoArray.length; i++)
    {
         var myLatLng = new google.maps.LatLng(geoArray[i].Latitude, geoArray[i].Longitude);
         var markers = new google.maps.Marker({
         position: myLatLng,
         map: map,
         title: geoArray[i].SubmittedBy

          });

    }

现在，我想在这里为标记创建一个点击事件，这样当我点击标记时，我可以显示有关该地点的一些信息。另外，点击我想放大到那个地方。

我的完整脚本代码是：

<script>


                var map;
                var src = 'https://s3-ap-southeast-1.amazonaws.com/cloudcreativeltd/Rail_Ex_RoW_my.kml';




                function initMap() {
                    // Map options
                    var options = {
                        zoom: 6,
                        center: { lat: 23.6850, lng: 90.3563 }
                    }
                    var ctaLayer = new google.maps.KmlLayer({
                        url: 'https://s3-ap-southeast-1.amazonaws.com/cloudcreativeltd/Rail_Ex_RoW_my.kml',
                        map: map
                    });

                    // New map
                    var map = new google.maps.Map(document.getElementById('map'), options);


                    var geoArray = @Html.Raw(Json.Encode(@ViewBag.GeoList));

                    for (var i = 0; i < geoArray.length; i++) {
                        var myLatLng = new google.maps.LatLng(geoArray[i].Latitude, geoArray[i].Longitude);
                        var markers = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            title: geoArray[i].SubmittedBy

                        });
                    }


                    markers.addListener('click', toggleBounce);

                    // Loop through markers
                    for (var i = 0; i < markers.length; i++)
                    {
                        addMarker(markers[i]);
                    }

                    // Add Marker Function
                    function addMarker(props) {
                        var marker = new google.maps.Marker({
                            position: props.coords,
                            map: map,
                            //icon:props.iconImage

                        });


                        google.maps.event.addListener(marker, 'click', function () {
                            map.setZoom(9);
                            map.setCenter(marker.getPosition());
                        });
                        // Check for customicon
                        if (props.iconImage) {
                            // Set icon image
                            marker.setIcon(props.iconImage);
                        }

                        // Check content
                        if (props.content) {
                            var infoWindow = new google.maps.InfoWindow({
                                content: props.content
                            });


                            //Adding KML leayer
                            var kmlLayer = new google.maps.KmlLayer(src,
                                {
                                    suppressInfoWindows: true,
                                    preserveViewport: false,
                                    map: map
                                });
                            kmlLayer.addListener('click',
                                function(event) {
                                    var content = event.featureData.infoWindowHtml;
                                    var testimonial = document.getElementById('capture');
                                    testimonial.innerHTML = content;
                                });


                            marker.addListener('click',
                                function() {
                                    infoWindow.open(map, marker);
                                });
                        }

                    }


                }
                function toggleBounce(){
                    content:hello
                }
        </script>

Answer 1

在这种情况下，您可以使用函数来创建侦听器的函数 addListenerOnMarker

<script>


  var map;
  var src = 'https://s3-ap-southeast-1.amazonaws.com/cloudcreativeltd/Rail_Ex_RoW_my.kml';

  function initMap() {
      // Map options
      var options = {
          zoom: 6,
          center: { lat: 23.6850, lng: 90.3563 }
      }
      var ctaLayer = new google.maps.KmlLayer({
          url: 'https://s3-ap-southeast-1.amazonaws.com/cloudcreativeltd/Rail_Ex_RoW_my.kml',
          map: map
      });

      // New map
      var map = new google.maps.Map(document.getElementById('map'), options);


      var geoArray = @Html.Raw(Json.Encode(@ViewBag.GeoList));

      var addListenerOnMarker = function(actMarker){

              actMarker.addListener('click', function() {
                  map.setZoom(9);
                  map.setCenter(actMarker.getPosition());
              });

      }

      for (var i = 0; i < geoArray.length; i++) {
          var myLatLng = new google.maps.LatLng(geoArray[i].Latitude, geoArray[i].Longitude);
          var markers = new google.maps.Marker({
              position: myLatLng,
              map: map,
              title: geoArray[i].SubmittedBy

          });
          addListenerOnMarker(markers);
      }

</script>

注意正确使用 var 和 array .. 在您的代码中，您不会生成标记数组，而只是创建（并重新创建）一个标记，我留下了名称标记并删除了不合法的其余部分代码.. （要生成一个对象数组（eg_marker），您应该将对象推入数组中。）