根据地址使用Google Maps API显示房屋的街景 [英] Use Google Maps API to display Street View of a house based on an address

查看：92
本文介绍了根据地址使用Google Maps API显示房屋的街景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试使用Google地图根据地址显示房屋的街景。我根据 jsfiddle .nz / js / using-google-maps-to-show-a-streetview-a-house-based-on-an-address /rel =nofollow> tutorial 。小提琴正在努力显示默认的初始地址，但我无法弄清楚当按下按钮时如何将新地址传递到街景代码。



这里是HTML： 

 < h3>输入地址以查看街景视图< / h3> 
< form action =/method =POST> 
< textarea name ='new_address'class =address>多伦多150 Glen Road< / textarea> 
< input type =submitid =change_streetvalue =更改街景视图地址/> 
< / form> 
< div class =map_container> 
< div id =map_canvas_cont> 
< div id =map_canvas>< / div> 
< / div> 
< div id =pano_cont> 
< div id =pano>< / div> 
< / div> 
< / div>

这里是javascript：

  var panorama; 
 var addLatLng; 
 var showPanoData; 
 var panorama; 
 
函数load_map_and_street_view_from_address（地址）{
 var geocoder = new google.maps.Geocoder（）; 
 geocoder.geocode（{
'address'：address 
}，function（results，status）{
 if（status == google.maps.GeocoderStatus.OK）{
 var gps = results [0] .geometry.location; 
 create_map_and_streetview（gps.lat（），gps.lng（），'map_canvas'，'pano'）; 
} 
}）; 
} 
 
函数create_map_and_streetview（lat，lng，map_id，street_view_id）{
 
全景=新google.maps.StreetViewPanorama（document.getElementById（pano）） ）; 
 addLatLng = new google.maps.LatLng（lat，lng）; 
 var service = new google.maps.StreetViewService（）; 
 service.getPanoramaByLocation（addLatLng，50，showPanoData）; 
 
 var myOptions = {
 zoom：14，
 center：addLatLng，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 backgroundColor：'transparent '，
 streetViewControl：false，
 keyboardShortcuts：false 
} 
 
 var map = new google.maps.Map（document.getElementById（map_id），myOptions）; 
 var marker = new google.maps.Marker（{
 map：map，
 animation：google.maps.Animation.DROP，
 position：addLatLng 
}） ; 
 
 
 $ b函数showPanoData（panoData，status）{
 if（status！= google.maps.StreetViewStatus.OK）{
 $（' （''没有StreetView图片可用'）。attr（'style'，'text-align：center; font-weight：bold'）。show（）; 
 return; 
} 
 var angle = computeAngle（addLatLng，panoData.location.latLng）; 
 
 var panoOptions = {
位置：addLatLng，
 addressControl：false，$ b $ linkControl：false，
 panControl：false，
 zoomControlOptions： {
 style：google.maps.ZoomControlStyle.SMALL 
}，
 pov：{
 heading：angle，
 pitch：10，
 zoom：1 
}，
 enableCloseButton：false，
 visible：true 
}; 
 
 panorama.setOptions（panoOptions）; 
} 
 
函数computeAngle（endLatLng，startLatLng）{
 var DEGREE_PER_RADIAN = 57.2957795; 
 var RADIAN_PER_DEGREE = 0.017453; 
 
 var dlat = endLatLng.lat（） -  startLatLng.lat（）; 
 var dlng = endLatLng.lng（） -  startLatLng.lng（）; 
 var yaw = Math.atan2（dlng * Math.cos（endLatLng.lat（）* RADIAN_PER_DEGREE），dlat）* DEGREE_PER_RADIAN; 
 return wrapAngle（yaw）; 
} 
 
函数wrapAngle（angle）{
 if（angle> = 360）{
 angle  -  = 360; 
} else if（angle <0）{
 angle + = 360; 
} 
返回角度; 
 
 $ b $（文件）.ready（函数（）{
 load_map_and_street_view_from_address（多伦多格伦路150号）; 
 
 $（'点击（功能（）{
 alert（如何将新地址传递到街景代码？）; 
}）; 
 
} ）;

有人可以向我解释如何解决这个 jsfiddle ，这样我可以通过按钮按下新的地址？谢谢。

解决方案

可能有多种解决方案，我建议存储maps，marker和panorama-instances，然后您只需要在进一步的调用中更新其属性，而不是创建新的实例。



调用按钮单击的函数：

  load_map_and_street_view_from_address（$（'textarea [name =new_address]'）。val（））;

替换为 create_map_and_streetview & showPanoData ：

 函数create_map_and_streetview（lat，lng，map_id，street_view_id） {
 var goo = google.maps，
 map = $（'＃'+ map_id），
 pano = document.getElementById（pano），
 addLatLng = new goo .LatLng（lat，lng），
 myOptions = {
 zoom：14，
 center：addLatLng，
 mapTypeId：goo.MapTypeId.ROADMAP，
 backgroundColor：'透明'，
 streetViewControl：false，
 keyboardShortcuts：false 
} 
 if（！map.data（'gmap'））{
 //存储实例每个$ .data 
 map.data（'gmap'，new goo.MVCObject（））; 
 map.data（'gmap'）。set（'panorama'，new goo.StreetViewPanorama（pano））; 
 map.data（'gmap'）。set（'service'，new goo.StreetViewService（））; 
 map.data（'gmap'）。set（'map'，new goo.Map（map [0]，myOptions））; 
 map.data（'gmap'）。set（'marker'，new goo.Marker（{
 map：map.data（'gmap'）。get（'map'），
动画：goo.Animation.DROP，
位置：addLatLng 
}）
）; 
} else {
 map.data（'gmap'）。get（'map'）。setCenter（addLatLng）; 
 map.data（'gmap'）。get（'marker'）。setPosition（addLatLng）; 
 //总是创建新的全景图
 //否则只要没有图片可用，全景图就会被破坏
 map.data（'gmap'）。set（'panorama'，新goo.StreetViewPanorama（pano））; 
 
 $ b map.data（'gmap'）。get（'service'）
 .getPanoramaByLocation（addLatLng，50，function（panoData，status）{
 if（status！= google.maps.StreetViewStatus.OK）{
 $（'＃pano'）。html（'No StreetView Picture Available'）
 .attr（'style'，'text-align ：center; font-weight：bold'）。show（）; 
 return; 
} 
 var angle = computeAngle（addLatLng，panoData.location.latLng）; 
 
 var panoOptions = {
 position：addLatLng，
 addressControl：false，$ b $ linkControl：false，
 panControl：false，
 zoomControlOptions：{
 style ：google.maps.ZoomControlStyle.SMALL 
}，
 pov：{
 heading：angle，
 pitch：10，
 zoom：1 
}， 
 enableCloseButton：false，
 visible：true 
}; 
 
 map.data（'g地图）得到（全景）setOptions（panoOptions）。 
}）; 
 
 
 
 
 $ hr 
 $ b 
演示：  http://jsfiddle.net/R59mB/4/    p> 
I am trying to use Google Maps to display a streetview of a house based on an address.  I have created a jsfiddle based on this tutorial.  The fiddle is working to display the default, initial address, but I cannot figure out how to pass the new address into the street view code when the button is pressed.



Here is the HTML:
<h3>Enter an Address to view the street view</h3>
<form action="/" method="POST">
    <textarea name='new_address' class="address">150 Glen Road, Toronto</textarea>
    <input type="submit" id="change_street" value="Change Street View Address" />
</form>
<div class="map_container">
    <div id="map_canvas_cont">
        <div id="map_canvas"></div>
    </div>
    <div id="pano_cont">
        <div id="pano"></div>
    </div>
</div>

And here is the javascript:
var panorama;
var addLatLng;
var showPanoData;
var panorama;

function load_map_and_street_view_from_address(address) {              
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var gps = results[0].geometry.location;
            create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
        }
    });
}

function create_map_and_streetview(lat, lng, map_id, street_view_id) {

    panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
    addLatLng = new google.maps.LatLng(lat, lng);
    var service = new google.maps.StreetViewService();
    service.getPanoramaByLocation(addLatLng, 50, showPanoData);

    var myOptions = {
        zoom: 14,
        center: addLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        backgroundColor: 'transparent',
        streetViewControl: false,
        keyboardShortcuts: false
    }

    var map = new google.maps.Map(document.getElementById(map_id), myOptions);
    var marker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        position: addLatLng
    });

}

function showPanoData(panoData, status) {
    if (status != google.maps.StreetViewStatus.OK) {
        $('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
        return;
    }
    var angle = computeAngle(addLatLng, panoData.location.latLng);

    var panoOptions = {
        position: addLatLng,
        addressControl: false,
        linksControl: false,
        panControl: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        pov: {
            heading: angle,
            pitch: 10,
            zoom: 1
        },
        enableCloseButton: false,
        visible: true
    };

    panorama.setOptions(panoOptions);
}

function computeAngle(endLatLng, startLatLng) {
    var DEGREE_PER_RADIAN = 57.2957795;
    var RADIAN_PER_DEGREE = 0.017453;

    var dlat = endLatLng.lat() - startLatLng.lat();
    var dlng = endLatLng.lng() - startLatLng.lng();
    var yaw = Math.atan2(dlng * Math.cos(endLatLng.lat() * RADIAN_PER_DEGREE), dlat) * DEGREE_PER_RADIAN;
    return wrapAngle(yaw);
}

function wrapAngle(angle) {
    if (angle >= 360) {
        angle -= 360;
    } else if (angle < 0) {
        angle += 360;
    }
    return angle;
}

$(document).ready(function () {
    load_map_and_street_view_from_address("150 Glen Road, Toronto");

    $('#change_street').click(function () {
       alert("How do I pass the new address to the street view code?");
    });

});

Can someone please explain to me how to fix this jsfiddle so that I can pass a new address with the button press?  Thank you.
 解决方案 
There may be multiple solutions, I would suggest to store the maps-, marker and panorama-instances, then you only need to update their properties on further calls instead of creating new instances.



calling the function on button-click:
load_map_and_street_view_from_address($('textarea[name="new_address"]').val());

replacement for create_map_and_streetview & showPanoData:
function create_map_and_streetview(lat, lng, map_id, street_view_id) {
    var goo=google.maps,
        map=$('#'+map_id),
        pano=document.getElementById("pano"),
        addLatLng = new goo.LatLng(lat, lng),
        myOptions = {
        zoom: 14,
        center: addLatLng,
        mapTypeId: goo.MapTypeId.ROADMAP,
        backgroundColor: 'transparent',
        streetViewControl: false,
        keyboardShortcuts: false
    }
    if(!map.data('gmap')){
      //store the instances per $.data
      map.data('gmap',new goo.MVCObject());
      map.data('gmap').set('panorama',new goo.StreetViewPanorama(pano));
      map.data('gmap').set('service',new goo.StreetViewService());
      map.data('gmap').set('map',new goo.Map(map[0], myOptions));
      map.data('gmap').set('marker',new goo.Marker({
                                                  map: map.data('gmap').get('map'),
                                                  animation: goo.Animation.DROP,
                                                  position: addLatLng
                                                })
                      );
    }else{
      map.data('gmap').get('map').setCenter(addLatLng);
      map.data('gmap').get('marker').setPosition(addLatLng);
      //always create a new panorama
      //otherwise the panorama will be broken as soon as there is no picture available 
      map.data('gmap').set('panorama',new goo.StreetViewPanorama(pano));
    }

    map.data('gmap').get('service')
      .getPanoramaByLocation(addLatLng, 50, function(panoData, status){ 
         if (status != google.maps.StreetViewStatus.OK) {
            $('#pano').html('No StreetView Picture Available')
              .attr('style', 'text-align:center;font-weight:bold').show();
            return;
        }
      var angle = computeAngle(addLatLng, panoData.location.latLng);

      var panoOptions = {
        position: addLatLng,
        addressControl: false,
        linksControl: false,
        panControl: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        pov: {
            heading: angle,
            pitch: 10,
            zoom: 1
        },
        enableCloseButton: false,
        visible: true
      };

      map.data('gmap').get('panorama').setOptions(panoOptions);
    });

}







Demo: http://jsfiddle.net/R59mB/4/


                        
这篇关于根据地址使用Google Maps API显示房屋的街景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆