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

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

这里是如何工作的，当我点击标记在地图上显示：

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控制台中显示对象，但在地图上不显示标记。

$(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地图中的标记？

来源

2015-12-08 Michael B

您必须全局初始化映射变量。当前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); 
    }); 
});

来源

2015-12-08 09:10:13 RGS

这不会重新设置地图吗？你基本上调用并创建一个'new google.maps.Map（）';新地图不会包含以前添加的对象，包括标记。 –

@AdamAzad，谢谢。我更新了我的代码。 – RGS

谢谢。我现在明白了我的错误并修复了它。 –

在你的代码的第二个片段中，map没有定义，因为它在initMap()范围被定义。我想知道为什么Google不会抛出任何错误。

像下面那样改变你的initMap;移动map对象全局范围是所有范围访问（我总是用它，我自己的项目）

initMap() { 

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

}

在这里，你应该与名map更有逻辑性，所以使用其他名称代替它，以避免进一步冲突。

来源

2015-12-08 09:13:01

谢谢。我现在明白了我的错误并修复了它。 –

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

回答

相关问题