更改複選框時在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地圖上設置標記

回答

相關問題