我必须同步我的自定义标记和来自Google地方查询的标记。但是我很难弄清楚如何在点击数字,照片等时获得标记的详细信息。
基本上我想从getDetails()方法访问所有或大量细节,以便在标记触发点击时访问它们,并在标记框中显示它们以供进一步使用
//map options
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(46.055625, 14.504408),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
//adding collection of stored markers
function addMyMarkers() {
for (var i = 0; i < locations.length; i++) {
placeMarker(new google.maps.LatLng(locations[i][1], locations[i][2]), locations[i][0]);
}
}
//query for getting place markers
function addFromSearch(request) {
service.nearbySearch(request, function(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
$('#json').append($.toJSON(results[i]) + '<br><br>');
//$("#debug").append("<img src='" + results[i].icon + "' />")
//results[i].reference
placeMarker(results[i].geometry.location, results[i].name,results[i].icon,results[i].photos);
//google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
}
}
});
}
//function for placing icon with content, custom icon, etc...
function placeMarker(location, content,icon) {
var image;
if (icon) {
image = {
url: icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
}
//marker properties
var marker = new google.maps.Marker({
position: location,
map: map,
icon: image
});
//click listener
//service.getDetails(request, function(details, status) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
// infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number);
infowindow.open(map, this);
});
}
我希望我在stackoverflow上发表了一篇不错的第一篇文章,我试图尽可能地搜索,但我没有成功。 来自Google API参考:https://developers.google.com/maps/documentation/javascript/examples/place-details