-1
我想根據Google地圖中的標記點並排放置街景視圖窗口。這是我需要幫助的代碼：將Google街景和谷歌地圖並排放置標記點
<div id="property_map"></div>
<script>
/* Property Detail Page - Google Map for Property Location */
function initialize_property_map(){
var propertyMarkerInfo = <?php echo json_encode($property_marker); ?>
var url = propertyMarkerInfo.icon;
var size = new google.maps.Size(42, 57);
// retina
if(window.devicePixelRatio > 1.5) {
if (propertyMarkerInfo.retinaIcon) {
url = propertyMarkerInfo.retinaIcon;
size = new google.maps.Size(83, 113);
}
}
var image = {
url: url,
size: size,
scaledSize: new google.maps.Size(42, 57),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(21, 56)
};
var propertyLocation = new google.maps.LatLng(propertyMarkerInfo.lat, propertyMarkerInfo.lang);
var propertyMapOptions = {
center: propertyLocation,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var propertyMap = new google.maps.Map(document.getElementById("property_map"), propertyMapOptions);
var propertyMarker = new google.maps.Marker({
position: propertyLocation,
map: propertyMap,
icon: image
});
}
window.onload = initialize_property_map();
</script>
在developers.google.com我發現並排顯示谷歌地圖和街景側面驗證碼，這就是我想要的東西來實現，但我需要這是動態和更新，每當我移動標記點。
<div id="map"></div>
<div id="pano"></div>
<script>
function initialize() {
var fenway = {lat: 42.345573, lng: -71.098326};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>
我試圖複製/粘貼一段代碼負責街景全景，但沒有success.I將不勝感激任何幫助。
UPDATE： 我想這兩個代碼在一個組合，其結果是，谷歌地圖凍結（不能用鼠標拖動以上）和標記不見了以及街景窗口是空白的，以及。這是我試過的代碼：
<div id="property_map"></div>
<div id="pano" style="float:left; height:100%; width:45%"></div>
<script>
/* Property Detail Page - Google Map for Property Location */
function initialize_property_map(){
var propertyMarkerInfo = <?php echo json_encode($property_marker); ?>
var url = propertyMarkerInfo.icon;
var size = new google.maps.Size(42, 57);
// retina
if(window.devicePixelRatio > 1.5) {
if (propertyMarkerInfo.retinaIcon) {
url = propertyMarkerInfo.retinaIcon;
size = new google.maps.Size(83, 113);
}
}
var image = {
url: url,
size: size,
scaledSize: new google.maps.Size(42, 57),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(21, 56)
};
var propertyLocation = new google.maps.LatLng(propertyMarkerInfo.lat, propertyMarkerInfo.lang);
var propertyMapOptions = {
center: propertyLocation,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var propertyMap = new google.maps.Map(document.getElementById("property_map"), propertyMapOptions);
var propertyMarker = new google.maps.Marker({
position: propertyLocation,
map: propertyMap,
icon: image
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: propertyLocation,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
window.onload = initialize_property_map();
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=IremovedmyAPI&callback=initialize">
</script>
UPDATE：貌似問題是，我有兩個函數調用，我需要幫助，把它變成一個呼叫。
你覺得爲什麼你發佈的街景代碼不能正常工作？它適用於我（使用適當的CSS）。請提供一個[最小，完整，測試和可讀的示例]（http://stackoverflow.com/help/mcve），以說明您嘗試解決的問題。 – geocodezip
@geocodezip我沒有說街景代碼不起作用。此代碼可作爲獨立解決方案使用。我想說的是，我需要通過將streetview圖像添加到函數initialize_property_map（）來調整第一個代碼，方式是使用屬性位置的標記將Google地圖和街景圖像輸出到它旁邊。對不起，不夠清楚。 – Radi
你嘗試過的是什麼沒有奏效？ – geocodezip