Google Maps使用AJAX添加标记

Question

SO I've read a bunch about Closure Issues, and I'm assuming that's what this is, but I'm not sure how to fix it.

The Problem: Basically, I only get 1 Marker, Which I'm assuming is because I'm using the same "marker" variable? But I'm not sure, nor do I see an easy solution to fix it. I'm sure there's something obvious and I'd love a hand from someone who actually knows Javascript, as opposed to me who just screws with it until I get the result I need.

Thanks!

<script>
var geocoder;
var map;
var markersArray = [];
var plocation = [];

function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(39.50, -98.35);
var myOptions = {
    zoom: 4,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress() {
    //Delete Existing Markers
    clearOverlays();
    deleteOverlays();
    //Geocode and Add the New One + Results.
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        //add the center marker
        var patientslocation =results[0].geometry.location;
        addMarker(patientslocation, "Patient");
        //Zoom in on the Region.
        map.setZoom(10);
        //Call to Our API
        $.getJSON("map/search", { provider_type: "01", loc: '"'+patientslocation+'"' },function(data) {
            //Parse Results
            var htmlstring = "";
            var arraylength = data.length-1;
            console.log("Result Count (base 0): "+arraylength)
            $(data).each(function(i,val){

                //Build HTML String for Side Bar
                if (val.name){
                    htmlstring = htmlstring + "<h3>"+val.name+"</h3>";
                }
                if (val.address){
                    htmlstring = htmlstring + val.address +"<br/>";
                }
                if (val.phone){
                    htmlstring = htmlstring +val.phone +"<br/>";
                }
                //Build HTML Strings for Each Marker Hover

                //Load the Array of Markers
                plocation[i] = new google.maps.LatLng(val.lat, val.lng);
                console.log(i +" : " +plocation[i]);

                if(i === arraylength){
                    console.log("Load plocations called")
                    load_plocations();
                }
            });
            $('#prov_list').html(htmlstring);

        });

} else {
    alert("Geocode was not successful for the following reason: " + status);
}
});
}

function load_plocations(){
    $(plocation).each(function(k,v){
        console.log("Calling AddMarker: "+v)
        addMarker(v,k);
    });
}

function addMarker(location, name) {
   console.log("Adding Marker: "+location)
    marker = new google.maps.Marker({
        position: location,
        map: map
    });
    markersArray.push(marker);
}
//Clears the Markers from the map.
function clearOverlays() {
    console.log("Clearing Overlays");
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
    }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
    console.log("Deleting Overlays");
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }
}

Answer 1

Try declaring marker using var :

var marker = new google.maps.Marker({

That will make it a locally-scoped object, thus creating a new one for each iteration.

Without the var , it becomes global (ie, scoped to the window object). I'm not 100% sure but I think this may, as you wrote, overwrite the same marker on each iteration, rather than creating a new one.

Answer 2

The geocoder is subject to rate limiting and quotas. It has never been a good idea to geocode multiple points "on the fly" to display a web page, which is what you are attempting to do in your loop, that will only work for small numbers of markers. Here is an example (using the v2 API) that geocodes a list of addresses from xml transferred via AJAX.

Here is an article that is part of the google maps API v3 documentation that discusses geocoding strategies.

The best solution is if the points are known ahead of time, geocode them offline and store the coordinates for use when your page loads. If they are entered by the user, use the client side geocoder built into the API.