Я пытаюсь интегрировать API карт V3 на наш веб-сайт. Мне нужно прочитать адрес и установить его в API MAP, чтобы на карте отобразилось уличное представление для этого адреса.Google MAP API V3 - Просмотр улиц
Так что мне нужна помощь в 3-х очках.
Как читать значения адресов.
Пример:
var streetAddressArray = getElementsByAttribute(parent.document.forms[0], "*", "smokeid", "Address Line 1");(. Я не уверен, что эта функция будет делать, просто вставив, чтобы дать представление о том, что именно я ищу)После прочтения значения, установленного для классов API/методов так эта карта может показать вид на улицу.
Показать как вид на улицу.
Это похоже на то, что я ищу:
Я очень благодарен за ответ Суви! Вот моя программа:
<!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 и город и почтовый индекс и т. Д.). Как я могу присвоить адрес поля ввода карте, чтобы карта отображала непосредственно это конкретное местоположение?
Я использую пользовательский продукт. У меня есть еще один пример в том, что они используют:
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>
Помогите мне, что пошло не так?