我正在尝试在HTML中创建一个文本字段,当您提交它时,我想运行一个Javascript函数,将文本字段(县或城市名称)转换为坐标并在地图上标记这些坐标。我的问题是,每次提交表单时,地图都会加载我开始使用的SAME坐标。它将遍历所有功能,甚至使用新坐标打印出警报(因此地理编码代码没有任何问题),但永远不会放下任何新标记。除非我对它们进行硬编码,否则我无法显示标记。这就是我到目前为止所做的:
如果有人能就如何解决这个问题给我一些建议,我真的很感激。谢谢!
<script>
// create the global map, count, geocoder and marker objects.
var map;
var count = 0;
var geocoder = new google.maps.Geocoder();
var markers = []; // Create a marker array to hold your markers
function setMarkers(locations) {
//locations = localStorage.getItem('places');
alert(locations + " _SETTTT");
for (var i = 0; i < locations.length; i++) {
var place = locations[i];
var myLatLng = new google.maps.LatLng(place[1], place[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
animation: google.maps.Animation.DROP,
title: place[0],
zIndex: place[3]
});
//window.alert(places + " WE ARE IN SETM");
// Push marker to markers array
markers.push(marker);
}
}
function reloadMarkers() {
// Reload the places.
//places = localStorage.getItem('places');
alert(places + " _RELOAD.");
// Loop through markers and set map to null for each
for (var i=0; i<markers.length; i++) {
markers[i].setMap(null);
}
// Reset the markers array
markers = [];
// Call set markers to re-add markers
setMarkers(places);
}
function addGeoMarkerCount() {
var newPlace;
var lat, lon;
var address = document.getElementById('County').value + ", NJ";
geocoder = new google.maps.Geocoder();
window.alert(address);
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
count++;
lat = results[0].geometry.location.lat();
lon = results[0].geometry.location.lng();
newPlace = [address, lat, lon, count];
places.push(newPlace);
localStorage.setItem('places', places);
window.alert(places);
reloadMarkers();
}
});
window.alert("TEST");
}
function addGeoMarkerCit(){
var newPlace;
var lat, lon;
var address = document.getElementById('City').value + ", NJ";
geocoder = new google.maps.Geocoder()
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
count++;
lat = results[0].geometry.location.lat();
lon = results[0].geometry.location.lng();
newPlace = [address, lat, lon, count];
places.push(newPlace);
}
});
reloadMarkers();
}
function initialize() {
// Creates the map options
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(40.0583, -74.4057),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
// Create the initial map
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Bind event listener on button to reload markers
document.getElementById('Search').addEventListener('click', reloadMarkers);
document.getElementById('CountyName').addEventListener('submit', addGeoMarkerCount);
document.getElementById('CityName').addEventListener('submit', addGeoMarkerCit);
reloadMarkers();
}
initialize();
</script>