gpt4 book ai didi

javascript - Google MAP API V3 - 街景

转载 作者:行者123 更新时间:2023-11-29 22:23:53 26 4
gpt4 key购买 nike

我正在尝试将 Google map V3 API 集成到我们的网站中。我需要读取地址并将其设置为 MAP API,以便 map 显示该地址的街景。

所以我需要 3 点帮助。

  1. 如何读取地址值。

    示例:var streetAddressArray = getElementsByAttribute(parent.document.forms[0], "*", "smokeid", "Address Line 1");(我不确定这个函数会做什么做,只是粘贴以了解我到底在寻找什么。)

  2. 读取值后设置为 API 类/方法,以便 map 可以显示街景。

  3. 将其显示为街景。

这与我正在寻找的类似:


非常感谢您的回复 Suvi!这是我的程序:

<!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. 不知怎么的,我无法查看全景 View 。我的代码有问题吗?
  2. map 地址应来自一堆输入字段(地址行 1 和城市和 zip 等)。如何将输入字段地址分配给 map ,以便 map 直接显示该特定位置?

我使用的是定制产品。我还有另一个例子,他们正在使用:

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>

你能帮我看看哪里出了问题吗?

最佳答案

您需要先初始化 StreetView(代替或绑定(bind)到您的 map ),请参阅 StreetView 文档以进行设置 (https://developers.google.com/maps/documentation/javascript/streetview) .然后你需要使用谷歌的地理编码服务来查找地址。本文档 (https://developers.google.com/maps/documentation/javascript/geocoding) 将帮助您设置一个简单的地址搜索,但您必须稍微调整一下,以便它在您的街景 map 。本质上你必须改变:

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

代替 map.setCenter,您需要将位置设置为 panorama.setPosition(results[0].geometry.location);

请记住,街景 View 的视角可能并不总是指向您想要的建筑物,我认为 Google 无法准确判断建筑物/位置在街道的哪一侧搜索将是。

希望对您有所帮助。

关于javascript - Google MAP API V3 - 街景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10729234/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com