2017-03-08 133 views
0

請幫助,我真的很困惑添加事件點擊標記後成功的搜索地點在谷歌地圖上。我試圖在一些項目添加事件點擊標記和工作,但不使用方法搜索地方,這意味着使用硬編碼標記位置,對於這種情況下,我希望有人可以幫助我,這是我的代碼。如何添加事件addListener點擊標記後搜索地點谷歌地圖

function initMap() { 
    var mapOptions = { 
    center: new google.maps.LatLng(0.7893, 113.9213), 
    zoom: 4, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    var input = document.getElementById('search_location_input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
    // Bias the SearchBox results towards current map's viewport. 
    map.addListener('bounds_changed', function() { 
    searchBox.setBounds(map.getBounds()); 
    }); 
    // marker 
    var markers = []; 
    // Listen for the event fired when the user selects a prediction and retrieve 
    // more details for that place. 
    searchBox.addListener('places_changed', function() { 
    var places = searchBox.getPlaces(); 
    if (places.length == 0) { 
     return; 
    } 
    // Clear out the old markers. 
    markers.forEach(function(marker) { 
     marker.setMap(null); 
    }); 
    markers = []; 
    // For each place, get the icon, name and location. 
    var bounds = new google.maps.LatLngBounds(); 
    places.forEach(function(place) { 
     if (!place.geometry) { 
     console.log("Returned place contains no geometry"); 
     return; 
     } 
     // Create a marker for each place. 
     markers.push(new google.maps.Marker({ 
     map: map, 
     title: place.name, 
     position: place.geometry.location 
     })); 
     if (place.geometry.viewport) { 
     bounds.union(place.geometry.viewport); 
     } else { 
     bounds.extend(place.geometry.location); 
     } 
    }); 
    map.fitBounds(bounds); 
    for (var i = 0; i < markers.length; i++) { 
     var data = markers[i]; 
     (function(marker, data) { 
     google.maps.event.addListener(marker, "click", function(e) { 
      console.log(data.title); 
     }); 
     })(markers, data); 
    } 
    }); 
} 

回答

0

我添加addListener到標記中循環places.forEach(function(place) {...})形成標記之後。

Fiddle

var map; 


function initMap() { 
    var mapOptions = { 
    center: new google.maps.LatLng(0.7893, 113.9213), 
    zoom: 4, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    var input = document.getElementById('search_location_input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
    // Bias the SearchBox results towards current map's viewport. 
    map.addListener('bounds_changed', function() { 
    searchBox.setBounds(map.getBounds()); 
    }); 
    // marker 
    var markers = []; 
    // Listen for the event fired when the user selects a prediction and retrieve 
    // more details for that place. 
    searchBox.addListener('places_changed', function() { 
    var places = searchBox.getPlaces(); 
    if (places.length == 0) { 
     return; 
    } 
    // Clear out the old markers. 
    markers.forEach(function(marker) { 
     marker.setMap(null); 
    }); 
    markers = []; 
    // For each place, get the icon, name and location. 
    var bounds = new google.maps.LatLngBounds(); 
    places.forEach(function(place) { 
     if (!place.geometry) { 
     console.log("Returned place contains no geometry"); 
     return; 
     } 
     // Create a marker for each place. 
     var marker = new google.maps.Marker({ 
     map: map, 
     title: place.name, 
     position: place.geometry.location 
     }) 
     markers.push(marker); 
     /*adding event addlistner*/ 
     google.maps.event.addListener(marker, "click", function(e) { 
     console.log(place.name); 
     }); 
     if (place.geometry.viewport) { 
     bounds.union(place.geometry.viewport); 
     } else { 
     bounds.extend(place.geometry.location); 
     } 
    }); 
    map.fitBounds(bounds); 

    }); 
} 
+0

感謝您回答我已經嘗試解決我的問題,並得到解決方案僅適用於標記添加索引循環 –

1
map.fitBounds(bounds); 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].index = i; //add index property 
     var data = markers[i]; 
    // var latitude = data.position.lat(); 
    // var longitude = data.position.lng(); 
     google.maps.event.addListener(markers[i],'click', function(e) { 
      var title = markers[this.index].title; 
      var latitude = markers[this.index].position.lat(); 
      var longitude = markers[this.index].position.lng(); 
      console.log(this.index); 
      console.log(title); 
      console.log(latitude); 
      console.log(longitude); 
     }); 
    } 
+0

好,當您添加另一種方式 –