Как добавить событие клика в маркере карты Google?

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 .. в вашем коде вы этого не сделаетесоздать массив маркеров, но просто создать (и воссоздать) один маркер, который у меня есть, оставить маркеры имен и удалить непропедевтический остаток кода .. (для создания массива объекта (например, mark_marker) вы должны поместить объект внутрь и массив.)