Google Maps API 对多个位置进行地理编码

Question

我设置了一些 js 代码来对一些位置和地点进行地理编码，而不是在地图上。我可以轻松地做一个位置，但我不能让它在两个位置上工作。我的工作代码如下，但仅适用于一个位置。

var geocoder = new google.maps.Geocoder();
    var address = "Melbourne";

    geocoder.geocode( { 'address': address}, function(results, status) {

        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng();


        initialize(latitude,longitude);

        }); 


    function initialize(latitude,longitude) {
        var latlng1 = new google.maps.LatLng(latitude,longitude);

        var myOptions = {
          zoom: 2,
          panControl: false,
            zoomControl: false,
            mapTypeControl: false,
            streetViewControl: false,
          center: latlng1,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
          scrollwheel: false,
        };
        var map = new google.maps.Map(document.getElementById("google-container"),myOptions);

        var marker = new google.maps.Marker({
          position: latlng1, 
          map: map, 
        }); 
      }

我尝试在下面添加第二个，但我显然遗漏了一些东西。您可能会猜到我是 javascript 新手。

    var geocoder = new google.maps.Geocoder();
var address = "Seoul";
var address2 = "Melbourne";

geocoder.geocode( { 'address': address}, function(results, status) {

    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    var latitude2 = r


    initialize(latitude,longitude);

    }); 

    geocoder.geocode( { 'address': address2}, function(results, status) {

    var latitude2 = results[0].geometry.location.lat();
    var longitude2 = results[0].geometry.location.lng();
    var latitude2 = r


    initialize(latitude2,longitude2);

    }); 


function initialize(latitude,longitude) {
    var latlng1 = new google.maps.LatLng(latitude,longitude);
    var latlng2 = new google.maps.LatLng(latitude2,longitude2);

    var myOptions = {
      zoom: 2,
      panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
      center: latlng1,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      scrollwheel: false,
    };
    var map = new google.maps.Map(document.getElementById("google-container"),myOptions);

    var marker = new google.maps.Marker({
      position: latlng1, 
      map: map, 
    }); 
      var marker2 = new google.maps.Marker({
      position: latlng2, 
      map: map, 
    }); 
  }

欢迎提出任何想法！

Answer 1

此解决方案适用于两个位置，可能最多 10 个位置，之后您将开始遇到 Geocoder 上的查询和速率限制

1. 分离出初始化函数，只是初始化地图
2. 为每个位置创建一个唯一的地理编码器实例（您可以通过在回调中重用相同的地理编码器实例来重用它，两点不值得）。

working fiddle

工作代码sn-p：

function initialize() {
    var myOptions = {
        zoom: 2,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        center: {
            lat: 0,
            lng: 0
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        scrollwheel: false,
    };
    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("google-container"), myOptions);
    var geocoder = new google.maps.Geocoder();
    var address = "Seoul";

    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
            });
            bounds.extend(results[0].geometry.location);
            map.fitBounds(bounds);
        } else {
            alert("Geocode of " + address + " failed," + status);
        }
    });
    var geocoder2 = new google.maps.Geocoder();
    var address2 = "Melbourne";
    geocoder2.geocode({
        'address': address2
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
            });
            bounds.extend(results[0].geometry.location);
            map.fitBounds(bounds);

        } else {
            alert("Geocode of " + address2 + " failed," + status);
        }
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

html, body, #google-container {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="google-container" style="border: 2px solid #3872ac;"></div>

Answer 2

here is some code optimization allows to process multiple addresses
      <div id="map-canvas"
   style='position: relative; height: 100%; width: 100%; margin-left: 0px; border: #B8B6B8 solid 1px;; background-color: #ffffff;'>
  </div> 
<script type="text/javascript">
    var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
            zoom : 17,
            center : latlng,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }
    function codeAddress(addressList) {
        try {
            var icount = addressList.length;
            for (var i = 0; i < icount; i++) {
                getGeoCoder(addressList[i]);
            }
        } catch (error) {
            alert(error);
        }
    }

    function getGeoCoder(address) {
        geocoder.geocode({
            'address' : address
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map : map,
                    position : results[0].geometry.location
                });
            } else {
                geterrorMgs(address); // address not found handler
            }
        });
    }
    //client's call
//addresses list to be processed
    var addressList = [ '1420 orchardview dr Pittsburgh,  PA,  USA', '1440 orchardview dr Pittsburgh,  PA,  USA', '1410 orchardview dr Pittsburgh,  PA,  USA' ];
        initialize();  
        codeAddress(addressList);
</script>