2012-05-23 136 views
2

我正在嘗試將Google地圖V3 API整合到我們的網站中。我需要讀取地址並將其設置爲MAP API,以便地圖將顯示該地址的街景視圖。Google MAP API V3 - 街景

所以我需要3分的幫助。

  1. 如何讀取地址值。

    例子:var streetAddressArray = getElementsByAttribute(parent.document.forms[0], "*", "smokeid", "Address Line 1");(我不知道這是什麼功能都行,只是貼給的正是我要尋找的想法)

  2. 閱讀設置爲API類/方法,以便值後該地圖可以顯示街景。

  3. 將其顯示爲街景。

這與我所期待的:


我對你的反應蘇維非常感謝! 這是我的計劃:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css">  html { height: 100% }  body { height: 100%; margin: 0; padding: 0 }  #map_canvas { height: 100% } </style> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=KEY_VALUE &sensor=true"> 
</script>  
<script type="text/javascript">  
    function initialize() { 

    var fenway = new google.maps.LatLng(42.345573,-71.098326); 
    var mapOptions = { 
    center: fenway, 
    zoom: 14, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), mapOptions); 
    var panoramaOptions = { 
     position: fenway, 
     pov: { 
     heading: 34, 
     pitch: 10, 
     zoom: 1 
     } 
    }; 
    var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions); 
    map.setStreetView(panorama); 

    }  
</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%"> 
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div> 
</div> 
</body> 
</html> 

我現在面臨這個兩個問題,

  1. 不知怎的,我無法查看全景視圖。我的代碼有問題嗎?
  2. 地圖的地址應來自束輸入字段(地址欄1和城市和Zip等)。如何將輸入字段地址分配給地圖,以便地圖直接顯示該特定位置?

我正在使用自定義產品。我還有一個例子,他們使用的:

var streetAddressArray = getElementsByAttribute(parent.document.forms[0], "*", "smokeid", "LossLocation_Address1"); 

我想我有點接近目標,但我的這個例子不工作,它沒有任何渲染。

<!DOCTYPE html><html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css">  html { height: 100% }  body { height: 100%; margin: 0; padding: 0 }  #map_canvas { height: 100% } </style> <script type="text/javascript"  
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBweQln0Jf5uBWvkTGSkv8AfkBdt-zZ3dE&sensor=true"> </script>  
<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 myOptions = {  zoom: 8,  center: latlng,  mapTypeId: google.maps.MapTypeId.ROADMAP } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 
    function codeAddress() { 
    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); 
     var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location}); 
     } 
     else 
     { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
     }); 
    } 
<body onload="initialize()"> 
<div id="map_canvas" style="width: 320px; height: 480px;"> 
</div> 
<div> 
    <input id="address" type="textbox" value="Sydney, NSW"> 
    <input type="button" value="Encode" onclick="codeAddress()"> 
</div> 
</body> 
    <!-- --> 
</html> 

你能幫我解決問題嗎?

回答

1

您需要先初始化StreetView(代替或綁定到您的地圖),請參閱StreetView文檔以設置它(https://developers.google.com/maps/documentation/javascript/streetview )。您需要使用Google的Geocode服務來查找地址。本文檔(https://developers.google.com/maps/documentation/javascript/geocoding)將幫助您設置一個簡單的地址搜索,但您必須稍微調整一下,以便在搜索時顯示街景地圖。從本質上講,你將不得不改變:

geocoder.geocode({ 'address': address}, function(results, status) { 
if (status == google.maps.GeocoderStatus.OK) { 
    map.setCenter(results[0].geometry.location); 
} 

相反map.setCenter的,你需要的位置設置爲panorama.setPosition(結果[0] .geometry。位置);

請記住,街景的角度可能並不總是指向你想要的建築,我不認爲谷歌有辦法準確地告訴你街道的哪一側你的建築物/重新搜索將是。

希望有所幫助。

1

回答您的2個問題:

  1. 不知怎的,我無法查看全景視圖。我的代碼有問題嗎?

發生這種情況是因爲您的map_canvas的關閉</div>也包含了pano。它應該在div爲map_canvas提供後直接來了,就像這樣:

<body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%"></div> 
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div> 
</body> 

此外,請務必在那裏你包括谷歌地圖API的腳本標記頭API密鑰。


關於你的第二個問題,你可以用多種方法來做到這一點。最簡單的方法是使用輸入文本字段並使用jquery的.val()函數來獲取文本字段中的值。然後將值傳遞給地理編碼器以執行搜索。

有用的資源:

https://developers.google.com/maps/documentation/javascript/geocoding

http://api.jquery.com/val/