Question

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

以下是它的工作原理，当我点击地图时会出现标记：

process

通过点击复选框，我试图让它工作。不幸的是没有任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 }); }); }); }对象显示在JavaScript控制台中，但在地图上不会显示任何标记。

marker

我错过了什么？如何使用复选框的$(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); }); });事件在google-map中显示标记？

Answer 1

您必须全局初始化地图变量。目前，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);
   });
});

Answer 2

在代码的第二个片段中，map未定义，因为它已在initMap()的范围内定义。我想知道谷歌为什么不会抛出任何错误。

更改你的initMap，如下所示;将map对象移动到可从所有范围访问的全局范围（我总是将其用于我自己的项目）

initMap() {

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

}

在这里，您应该使用名称map更合乎逻辑，因此请使用其他名称替换它以避免进一步的冲突。

更改复选框时在Google地图上设置标记

2 个答案: