Javascript 结合谷歌街景和地点搜索

对于我目前正在进行的一个项目，我希望将GooglePlaces的两个元素合并到GoogleStreetView中进行搜索，基本上强制（搜索后）将位置作为street/pano进行查看

谷歌有一个相当可靠的“基本”版本，但我似乎不能强迫它使用街景。任何洞察都会很棒

-似乎做得很好，但我似乎找不到任何关于这两个方面的文档。

将中的代码与中的结合起来，应该会给您一个第一印象

也许你更想要的是将这个相关问题的答案与

代码片段：

//此示例使用Google Place Autocomplete将搜索框添加到地图中
//特色。人们可以进入地理搜索。搜索框将返回一个
//包含位置和预测搜索词组合的拾取列表。
//此示例需要Places库。包括图书馆=地方
//第一次加载API时的参数。例如：
// 
var全景图；
var点击标记器；
函数initAutocomplete（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
lat:-33.8688，
液化天然气：151.2195
},
缩放：13，
mapTypeId:“路线图”
});
var sv=new google.maps.StreetViewService（）；
//创建搜索框并将其链接到UI元素。
var input=document.getElementById（'pac-input'）；
var searchBox=newgoogle.maps.places.searchBox（输入）；
//map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
//将搜索框结果偏向当前地图的视口。
addListener（'bounds_changed'，function（）{
searchBox.setBounds（map.getBounds（））；
});
var标记=[]；
//侦听用户选择预测并检索时激发的事件
//关于那个地方的更多细节。
searchBox.addListener（'places\u changed'，function（）{
var places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
//清除旧的标记。
markers.forEach（函数（marker）{
marker.setMap（空）；
});
标记=[]；
//对于每个位置，获取图标、名称和位置。
var bounds=new google.maps.LatLngBounds（）；
places.forEach（函数（位置、索引）{
如果（！place.geometry）{
log（“返回的位置不包含几何图形”）；
返回；
}
变量图标={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
//为每个地方创建一个标记。
var marker=new google.maps.marker({
地图：地图，
图标：图标，
标题：place.name，
位置：place.geometry.location
});
标记器。推（标记器）；
google.maps.event.addListener（标记，'click'，函数（e）{
单击Marker=this；
sv.getPanoramaByLocation（marker.getPosition（），50，processSVData）；
});
if（place.geometry.viewport）{
//只有地理代码具有视口。
联合（place.geometry.viewport）；
}否则{
扩展（place.geometry.location）；
}
});
映射边界（bounds）；
google.maps.event.trigger（标记[0]，'click'）；
});
}
函数ProcessVdata（数据、状态）{
if（status==google.maps.StreetViewStatus.OK）{
panorama=新的google.maps.StreetViewPanorama（document.getElementById（“pano”）；
全景.setPano（数据.location.pano）；
var camera=new google.maps.Marker({
位置：data.location.latLng，
地图：地图，
真的，
标题：“照相机”
});
var heading=google.maps.geometry.sphereal.computeHeading（data.location.latLng，clickedMarker.getPosition（））；
document.getElementById（'info'）.innerHTML=“heading:+heading+”
”+
“位置：”+clickedMarker.getPosition（）.toUrlValue（6）+“
”+
摄像头：“+数据.位置.车床.行程值（6）+”
”；
//警报（data.location.latLng+”：“+myLatLng+”：“+heading）；
全景({
标题：标题，
音高：0，
缩放：1
});
全景。设置可见（真）；
}否则{
警报（“未找到此位置的街景数据”）；
}
}

html，
身体{
身高：100%；
边际：0px；
填充：0px；
}
#地图，
#帕诺{
浮动：左；
身高：100%；
宽度：45%；
}
#描述{
字体系列：Roboto；
字体大小：15px；
字体大小：300；
}
#infowindowcontent.title{
字体大小：粗体；
}
#信息窗口内容{
显示：无；
}
#地图#信息窗口内容{
显示：内联；
}
.pac卡{
利润率：10px 10px 0；
边界半径：2px 0 0 2px；
框大小：边框框；
-moz框大小：边框框；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
背景色：#fff；
字体系列：Roboto；
}
#pac容器{
垫底：12px；
右边距：12px；
}
.pac控制{
显示：内联块；
填充：5px11px；
}
.pac控制标签{
字体系列：Roboto；
字体大小：13px；
字体大小：300；
}
#pac输入{
背景色：#fff；
字体系列：Roboto；
字体大小：15px；
字体大小：300；
左边距：12px；
填充：0 11px 0 13px；
文本溢出：省略号；
宽度：400px；
}
#pac输入：焦点{
边框颜色：#4d90fe；
}
#头衔{
颜色：#fff；
背景色：#4d90fe；
字体大小：25px；
字号：500；
填充：6px 12px；
}
#目标{
宽度：345px；
}