谷歌地圖：getSelected標記

-1

我想設置一個小程序與谷歌地圖和標記。我一直試圖在點選的標記上點擊點擊事件，但我沒有成功。我的想法我想實現的：在谷歌地圖上，我可以設置多個標記（這很有用！）。然後，如果我點擊已設置的標記，我想要獲取特定點擊標記的點擊事件，並且我無法獲取該標記。谷歌地圖：getSelected標記

我只在設置的第一個標記上得到點擊事件，但不是在地圖上手動點擊的那些點擊事件。你能告訴我我做錯了什麼嗎？

// Check to see if the browser supports the GeoLocation API. 
if (navigator.geolocation) { 

var markers = []; 

// Get the location 
navigator.geolocation.getCurrentPosition(function(position) { 
var lat = position.coords.latitude; 
var lon = position.coords.longitude; 
showMap(lat, lon); 
}); 


} else { 
    // Print out a message to the user. 
    document.write('Your browser does not support GeoLocation'); 
} 


// Show the user's position on a Google map. 
function showMap(lat, lon) { 
// Create a LatLng object with the GPS coordinates. 
var myLatLng = new google.maps.LatLng(lat, lon); 

// Create the Map Options 
var mapOptions = { 
    zoom: 8, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

// Generate the Map 
var map = new google.maps.Map(document.getElementById('map'), mapOptions); 

var myLatLng = new google.maps.LatLng(lat, lon); 
// Add a Marker to the Map 
var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    draggable:true, 
    title: 'Found you!' 
}); 


    map.addListener('click', function(e) { 
     console.log("ASD"); 
    var latitude = e.latLng.lat(); 
    var longitude = e.latLng.lng(); 
    console.log(latitude + ', ' + longitude); 
    for (var i = 0; i < markers.length; i++) { 
      console.log("i : " + i + " " + marker.getPosition()); 
     } 
    placeMarker(e.latLng, map); 
    }); 

    function placeMarker(position, map) { 
    marker = new google.maps.Marker({ 
     position: position, 
     map: map 
    }); 
    console.log("M POS " + marker.getPosition()); 
    markers.push(marker); 
    console.log("QQQQ " + marker.getPosition()); 
    //map.panTo(position); 
    } 

     map.addListener('rightclick', function(e) { 
      console.log("SSSS"); 
    clearMarkers(); 
    }); 

    marker.addListener('click', function() { 
     console.log("MARKER!!"); 
        var infowindow = new google.maps.InfoWindow({ 
     content:"Hello World!" 
    }); 
    infowindow.open(map,marker); 
     }); 



    } 

    function setMapOnAll(map) { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(map); 
     } 
     } 

    function clearMarkers() { 
     setMapOnAll(null); 
     }

來源

2017-04-17 Michael

它看起來像你設置onclick事件只有當你地理定位用戶的位置時放置在地圖上的第一個標記。這就是infowindow只顯示第一個標記的原因。我修改了代碼，並將placeMarker函數中click事件的邏輯放在同一個位置。我相信它現在有你想要的行爲。我會告訴你我的代碼除了功能：

function placeMarker(position, map) { 
marker = new google.maps.Marker({ 
    position: position, 
    map: map 
}); 

marker.addListener('click', function() {         
    console.log("MARKER!!");            
    var infowindow = new google.maps.InfoWindow({     
     content:"Hello World!"             
    });                  
     infowindow.open(map,marker);             
    });                 

console.log("M POS " + marker.getPosition()); 
markers.push(marker); 
console.log("QQQQ " + marker.getPosition()); 
//map.panTo(position); 
}

我也有一個的jsfiddle來證明這一點，請注意，我節錄我的安全API密鑰，所以你需要輸入你自己的這個樣本工作：

https://jsfiddle.net/kxxhvzL0/

我希望這有助於！

來源

2017-04-19 20:32:40

谷歌地圖：getSelected標記

回答

相關問題