在地图上添加第一个标记并进行地理编码
Adding the first marker on map and geocoding
应用程序,然后是我面临的问题。
应用:读取JSON并根据JSON查询向地图添加标记.<-Works OK。
然后,当用户单击地图时,添加一个标记并显示带有当前地址的信息窗口。
第二步有效,仅当用户第二次单击地图时(从这一点开始每次都有效(。当用户首次单击地图时,标记将添加到该位置,但反向地理编码不起作用,即不显示信息窗口。
从我到目前为止的调试来看,如果您在 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>
没关系,我找到了。我不得不删除
google.maps.event.addListener(map, 'click', function (event) {
从dam
功能和更改
"latLng": event.latLng
到"latLng": latLng
.感谢您的阅读!
相关文章:
- 为什么无法根据谷歌地图地理编码geometry.bounds找到位置,但可以通过MongoDB中的geometry.vi
- 谷歌地图API地理编码器,受边界限制
- 谷歌地图客户端地理编码“;OVER_QUERY_LIMIT”;问题
- 谷歌地图和反向地理编码使用html5API
- 谷歌地图使用变量作为URL对AJAX进行地理编码
- 尝试在谷歌地图V3中绘制超过10个标记,不使用地理编码
- Wordpress中的谷歌地图地理编码不起作用
- 在地图上添加第一个标记并进行地理编码
- 谷歌地图API地理编码多个位置
- 在谷歌地图 api 中使用邻域类型获取formatted_address - 反向地理编码
- 防止在地理编码器谷歌地图API中循环
- 谷歌地图标记集群器Plus没有地理编码
- 无法让 Google 地图地理编码正常工作
- 同步请求谷歌地图地理编码
- 谷歌地图:添加硬编码标记到循环
- Google 地图使用自定义标签对地址进行地理编码
- 谷歌地图 api v3 对多个地址进行地理编码
- 列出使用 Google 地图地理编码器 API 获取的一组地址
- 反向地理编码不适用于我的地图
- JQuery 中的简单地理编码地图