通过获取纬度和经度在地图上绘制多个位置

Question

我正在使用谷歌地图在脚本上绘制地图上的多个位置。 我参考了this脚本，它有一个静态json位置来绘制。
因为我需要首先获得位置的纬度，所以我提到this要点。 我试图合并2个脚本来获得多个绘图，但是，我正面临循环中的问题。该功能目前只绘制了最后一个位置，并且 为前两个，它不称为getLocation功能。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script type="text/javascript"> 

var markers = [ 
{ 
    "title": 'Juhu Beach', 
    "description": 'Juhu Beach is one of favourite tourist attractions situated in Mumbai.' 
}, 
{ 
    "title": 'Jijamata Udyan', 
    "description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.' 
}, 
{ 
    "title": 'Sanjay Gandhi National Park', 
    "description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.' 
} 
]; 
window.onload = function() { 
    LoadMap(); 
} 
var json = {}; 
var latitude; 
var longitude; 
var getLocation = function(address,callback) { 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     var latitude = results[0].geometry.location.lat(); 
     var longitude = results[0].geometry.location.lng(); 
     json = { 
     'lat':latitude, 
     'lng':longitude 
     } 
     if(typeof callback === 'function'){ 
     callback(json); 
     } 
    } 
    }); 
} 

function LoadMap() { 
    var mapOptions = { 
     center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 

    //Create and open InfoWindow. 
    var infoWindow = new google.maps.InfoWindow(); 
    var data; 
    var myLatlng; 
    var marker; 
    for (var i = 0; i < markers.length; i++) { 
     console.log(i); 
     data = markers[i]; 
     console.log('object',data.description); 
     getLocation(data.description,function(result){    
      myLatlng = new google.maps.LatLng(result.lat, result.lng); 
      marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: data.title 
     }); 
      //Attach click event to the marker. 
      (function (marker, data) { 
       google.maps.event.addListener(marker, "click", function (e) { 
        //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow. 
        infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>"); 
        infoWindow.open(map, marker); 
       }); 
      })(marker, data); 
     }) 

    } 
} 

我摸不清哪里回调打破了第2 loops.Any帮助将appreaciated。

Answer 1

你几乎有一个工作版本。如果你限制了你的纬度和经度（你从地理编码获得），然后用fitBound将它们与视口相匹配。请参考下面的工作版本：

var markers = [ 
{ 
    "title": 'Juhu Beach', 
    "description": 'New York, NY' 
}, 
{ 
    "title": 'Jijamata Udyan', 
    "description": 'Delhi, In' 
}, 
{ 
    "title": 'Sanjay Gandhi National Park', 
    "description": 'Oslo, NO' 
} 
]; 


window.onload = function() { 
    LoadMap(); 
} 
var json = {}; 
var latitude; 
var longitude; 
var bounds = new google.maps.LatLngBounds(); // Added this line 

var getLocation = function(address,callback) { 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     var latitude = results[0].geometry.location.lat(); 
     var longitude = results[0].geometry.location.lng(); 
     json = { 
     'lat':latitude, 
     'lng':longitude 
     } 
     if(typeof callback === 'function'){ 
     callback(json); 
     } 
    } 
    }); 
} 

function LoadMap() { 
    var mapOptions = { 
     center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 

    //Create and open InfoWindow. 
    var infoWindow = new google.maps.InfoWindow(); 
    var data; 
    var myLatlng; 
    var marker; 
    for (var i = 0; i < markers.length; i++) { 
     console.log(i); 
     data = markers[i]; 
     console.log('object',data.description); 
     getLocation(data.description,function(result){ 
      myLatlng = new google.maps.LatLng(result.lat, result.lng); 
      marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: data.title 
     }); 
     bounds.extend(marker.getPosition()); // Added this line 
     map.fitBounds(bounds); // Added this line 
      //Attach click event to the marker. 
      (function (marker, data) { 
       google.maps.event.addListener(marker, "click", function (e) { 
        //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow. 
        infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>"); 
        infoWindow.open(map, marker); 
       }); 
      })(marker, data); 
     }) 

    } 
}