2012-03-02 14 views

答えて

9

答えは、

var spherical = google.maps.geometry.spherical, 
    bounds = map.getBounds(), 
    cor1 = bounds.getNorthEast(), 
    cor2 = bounds.getSouthWest(), 
    cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()), 
    cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()), 
    width = spherical.computeDistanceBetween(cor1,cor3), 
    height = spherical.computeDistanceBetween(cor1, cor4); 
+0

私は、線の上の点の間の距離を計算するときにジオメトリライブラリが必要ないと言うつもりでしたが、私たちは球で生きていたことを思い出しました。 #fezgame – Ziggy

+1

偉大な答え - map/apiを初期化するときにジオメトリライブラリを使用することを明示的に指定する必要があることに注意してください。 – Victor

-1
<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(58, 60), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById('map_canvas'), 
     mapOptions); 

    var input = document.getElementById('searchTextField'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 

    autocomplete.bindTo('bounds', map); 

    var infowindow = new google.maps.InfoWindow(); 
    var marker = new google.maps.Marker({ 
     map: map 
    }); 

    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     infowindow.close(); 
     var place = autocomplete.getPlace(); 
     if (place.geometry.viewport) { 
     map.fitBounds(place.geometry.viewport); 
     } else { 
     map.setCenter(place.geometry.location); 
     map.setZoom(17); // Why 17? Because it looks good. 
     } 

     var image = new google.maps.MarkerImage(
      place.icon, 
      new google.maps.Size(71, 71), 
      new google.maps.Point(0, 0), 
      new google.maps.Point(17, 34), 
      new google.maps.Size(35, 35)); 
     marker.setIcon(image); 
     marker.setPosition(place.geometry.location); 

     var address = ''; 
     if (place.address_components) { 
     address = [(place.address_components[0] && 
        place.address_components[0].short_name || ''), 
        (place.address_components[1] && 
        place.address_components[1].short_name || ''), 
        (place.address_components[2] && 
        place.address_components[2].short_name || '') 
        ].join(' '); 
     } 

     infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
     infowindow.open(map, marker); 
    }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

とウルに似ウルHTMLコンポーネントを定義...

<input id="searchTextField" type="text" size="50"> <div id="map_canvas"></div>

ヘッダに次の行の行を追加します。.. <script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>

EDIT あなたは、高さを得ることができますし、 google.mapsオブジェクトからの幅..私はあなたの要件のコードを変更することができませんでした。しかし、これはあなたに良いアイデアを与えるだろうと確信しています。あなたがこれをコピー&ペーストなかったところから

幸運ここ

+1

。 – defau1t

+0

利用可能な地図の幅、高さ、面積はどこですか? – user960567

関連する問題