应用程序,然后是我面临的问题。
应用程序:根据JSON查询读取JSON并将标记添加到地图中。< -Works OK。
然后,当用户点击地图时,添加一个标记并显示当前地址的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>
答案 0 :(得分:1)
没关系,我找到了它。 我不得不删除
google.maps.event.addListener(map, 'click', function (event) {
来自dam
功能并更改
"latLng": event.latLng
至"latLng": latLng
。
谢谢你的阅读!