javascript - 更改复选框时在 Google map 上设置标记

Question

我需要一些有关 Google Maps API 的帮助。我能够初始化 map 。现在我想给它添加一些标记。 我有一组复选框(它们被称为“网络”)。每个复选框都有一个隐藏的经度和纬度字段。如果选中该复选框，则应在 map 上显示一个标记 我设法绕道而行，点击 map 。但我想在更改复选框时触发新标记的创建。

这是它的工作原理，当我点击 map 时会出现标记:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 48.7791, lng: 9.0367}
  });

  google.maps.event.addListener(map, "click", function(event) {

    //Get all checked Networks
    var checked_network = $( ".checkbox-network:checked" );
    checked_network.each(function(){
      network_id = $( this ).data("network-id");
      //Get the hidden location longitudes and latitudes for each checked network element
      network_locations_latitude = $(".location_latitude_network_"+network_id).val();
      network_locations_longitude = $(".location_longitude_network_"+network_id).val();
      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(network_locations_latitude,network_locations_longitude),
          map: map
       });
    });
  });
}

这是我尝试通过单击复选框使其工作的方法。不幸的是什么也没有发生。 marker 对象显示在 JavaScript 控制台中，但在 map 上没有显示任何标记。

$(document).on('change','.checkbox-network', function() {
    var checked_network = $( ".checkbox-network:checked" );
    checked_network.each(function(){
      network_id = $( this ).data("network-id");

      //Get the hidden location longitudes and latitudes for each checked network element
      network_locations_latitude = $(".location_latitude_network_"+network_id).val();
      network_locations_longitude = $(".location_longitude_network_"+network_id).val();
      console.log(network_id + " - " + network_locations_latitude);
      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(network_locations_latitude,network_locations_longitude),
          map: map,
          title: "test"
       });
      console.log(marker);
    });
});

我错过了什么？如何使用复选框的 onchange 事件在 google-map 中显示标记？

Answer 1

您必须全局初始化 map 变量。目前 map 变量的范围仅在 initMap() 函数内可用。

var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: {lat: 48.7791, lng: 9.0367}
});
$(document).on('change','.checkbox-network', function() {
   var checked_network = $( ".checkbox-network:checked" );
   checked_network.each(function(){
    network_id = $( this ).data("network-id");
       //Get the hidden location longitudes and latitudes for each checked network element
    network_locations_latitude = $(".location_latitude_network_"+network_id).val();
    network_locations_longitude = $(".location_longitude_network_"+network_id).val();
    console.log(network_id + " - " + network_locations_latitude);
    var marker = new google.maps.Marker({
              position: new google.maps.LatLng(network_locations_latitude,network_locations_longitude),
              map: map,
              title: "test"
    });
    console.log(marker);
   });
});