0
應用程序，然後我面臨的問題。在地圖和地理編碼上添加第一個標記
應用程序：閱讀JSON並根據JSON查詢向地圖添加標記。 < -Works好的。
然後，當用戶點擊地圖時，添加一個標記並顯示當前地址的infowindow。
只有當用戶第二次點擊地圖（並且每次從該點起作用）時，第二步才起作用。當用戶單擊第一個時間的地圖時，標記將添加到該位置，但反向地理編碼不起作用，即infowindow不顯示。
從我調試到目前爲止，如果您在function dam(latLng),console.log("dam 1");處看到，如果在第一次點擊時調用。 console.log("dam 2");如果僅在第二次點擊地圖後才被調用，那麼我的猜測是問題在某處。
任何幫助？
我的代碼：
<script type="text/javascript">
$(function() {
var map;
var arrMarkers = [];
var arrInfoWindows = [];
var marker = null;
var infowindow = new google.maps.InfoWindow({
//size: new google.maps.Size(150,50)
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.650906,22.88229),
new google.maps.LatLng(40.601918,23.011723));
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"], bounds: defaultBounds
});
google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
//moveMarker(place.name, place.geometry.location);
map.setCenter(place.geometry.location);
$('.MapLat').val(place.geometry.location.lat());
$('.MapLon').val(place.geometry.location.lng());
});
function moveMarker(placeName, latlng) {
//marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
infowindow.open(map, marker);
}
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5,
draggable: false
});
google.maps.event.addListener(marker, 'rightclick', function (event) {
marker.setMap(null);
});
google.maps.event.addListener(marker, 'click', function() {
//infowindow.setContent(contentString);
//infowindow.open(map,marker);
});
google.maps.event.trigger(marker, 'click');
return marker;
}
function mapInit() {
var styles = [{
featureType: "poi.business",
stylers: [{
visibility: "off"
}]
}]
var styledMap = new google.maps.StyledMapType(styles, {
name: "Styled Map"
});
var centerCoord = new google.maps.LatLng(40.629956, 22.95413);
var mapOptions = {
zoom: 14,
center: centerCoord,
disableDoubleClickZoom: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: false,
zoomControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.mapTypes.set('map', styledMap);
map.setMapTypeId('map');
$.getJSON("http://PATH_TO_JSON", {}, function (data) {
$.each(data.places, function (i, item) {
$("#markers").append('<li><a href="#" rel="' + i + '">' + item.title + '</a></li>');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.lat, item.lng),
map: map,
title: item.title,
//animation:google.maps.Animation.DROP,
});
arrMarkers[i] = marker;
var infowindow = new google.maps.InfoWindow({
content: "<h3>" + item.title + "</h3>" + item.description + "<br><img class='img-rounded' src='alertimages/" + item.image + "'/>"
});
arrInfoWindows[i] = infowindow;
google.maps.event.addListener(marker, 'click', function() {
map.setCenter(marker.getPosition());
//toggleBounce();
for (x = 0; x < arrInfoWindows.length; x++) {
arrInfoWindows[x].close();
}
infowindow.open(map, marker);
});
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
});
});
function dam(latLng) {
console.log("dam 1");
google.maps.event.addListener(map, 'click', function (event) {
console.log("dam 2");
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
//infowindow.close();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"latLng": event.latLng
}, function (results, status) {
console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
addr_name = results[0].address_components[1].long_name,
addr_num = results[0].address_components[0].long_name
latlng = new google.maps.LatLng(lat, lng);
$("#searchTextField").val(results[0].formatted_address);
infowindow.setContent(addr_name + " " + addr_num + "<br><a href='marker.php?lat="+lat+"&lng="+lng+"&adr="+results[0].formatted_address+"'/>add marker</a>");
infowindow.open(map, marker);
} else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(function() {
dam(latLng);
}, 200);
}
});
});
}
// google.maps.event.addListener(map, 'click', function() {
//infowindow.close();
// });
google.maps.event.addListener(map, 'click', function (event) {
infowindow.close();
if (marker) {
marker.setMap(null);
marker = null;
}
//marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng,dam(event.latLng));
marker = createMarker(event.latLng, dam(event.latLng));
});
}
$(function() {
// initialize map (create markers, infowindows and list)
mapInit();
$("#markers").on("click", "a", function() {
var i = $(this).attr("rel");
// this next line closes all open infowindows before opening the selected one
for (x = 0; x < arrInfoWindows.length; x++) {
arrInfoWindows[x].close();
}
arrInfoWindows[i].open(map, arrMarkers[i]);
});
});
});
</script>