Question

我正在制作一个脚本，使用谷歌地图在地图上绘制多个位置。我参考了this脚本，它有一个静态的json位置来绘制因为我需要首先获得一些地点，所以我提到this要点。我尝试合并2个脚本来获得多个绘图，但是我在循环中遇到了一个问题。该功能目前仅绘制最后一个位置和对于前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个循环中回调的中断位置。任何帮助都会被贬低。

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);
        })

    }
}

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

1 个答案: