javascript - 从 Google Maps Javascript 中删除标记

Question

我正在尝试创建一个列表，它位于 map 的左侧。当用户在 map 上搜索时，城市和国家将被列出。

当我在某个地方搜索时，我正确地附加到列表区域，但是当我尝试通过单击列表区域中的减号图标并获取列表项的索引并尝试按索引从标记数组中删除标记来从 map 中删除标记时。

如果通过单击列表的最后一项开始删除标记，它会正确运行，但是当我单击列表的第一项时，它会从控制台日志中删除 map 中的所有标记(未捕获的类型错误:无法读取未定义的属性“setMap”)

https://jsfiddle.net/tolga748/op9u3ryv/

        $(".list-area ul").append("<li><div class='list-area-left'><span> " + place.adr_address + "</span></div><div class='list-area-right'><a href='#''><img src='http://iconshow.me/media/images/ui/ios7-icons/png/512/minus-outline.png' width='25'></a></div></li>");


        var killer;

        $(".list-area ul").on("click", "li", function() { 

          killer = $(this).index();

          $(this).fadeOut(700, function () {
            $(this).remove();
          });

          markers[killer].setMap(null);

          markers.splice(killer, 1);

          console.log(markers);

        });

Answer 1

您已将点击监听器放置在“for each”列表中。 每次为每个函数调用那些多次点击监听器被添加 并且每次调用“places_changed”时都会将点击监听器添加到列表中

移除 for each 和“places_changed”监听器之外的点击监听器。

工作 fiddle https://jsfiddle.net/v7jL0e9p/

function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 41, lng: 29 },
          zoom: 6,
          mapTypeId: 'roadmap'
        });

        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          // markers.forEach(function(marker) {
          //   marker.setMap(null);
          // });
          // markers = [];

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));



            $(".list-area ul").append("<li><div class='list-area-left'><span> " + place.adr_address + "</span></div><div class='list-area-right'><a href='#''><img src='http://iconshow.me/media/images/ui/ios7-icons/png/512/minus-outline.png' width='25'></a></div></li>");






            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });


          map.fitBounds(bounds);
        });
        var killer;
         $(".list-area ul").on("click", "li", function() {

              killer = $(this).index();

              $(this).fadeOut(700, function () {
                $(this).remove();
              });

              markers[killer].setMap(null);

              markers.splice(killer, 1);

              console.log(markers);

            });
      }