Question

我想根据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上，我发现此代码并排显示Google地图和街景视图，这是我想要实现的目标，但每当我移动标记点时，我都需要动态和更新。

<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>

我尝试复制/粘贴负责街景全景的一段代码，但没有成功。我将不胜感激。

更新我尝试将这两个代码组合在一起，结果是Google地图冻结（无法用鼠标拖动），标记也消失了，街景视图窗口也是空白。这是我试过的代码：

<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：看起来问题是我有两个函数调用，我需要帮助将其转换为一个调用。

Answer 1

onload函数定义中有错误。

window.onload = initialize_property_map();

应该是

window.onload = initialize_property_map;

函数之后的()使其立即执行，返回的值用作执行“onload”的函数，该函数为null，因为该函数不返回任何内容。

（而map.setStreetView(panorama);应为propertyMap.setStreetView(panorama);）

代码段

function initialize_property_map() {

  var propertyMarkerInfo = {
    lat: 42.345573,
    lang: -71.098326,
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  };

  var url = propertyMarkerInfo.icon;
  var size = new google.maps.Size(42, 57);

  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
      }
    });
  propertyMap.setStreetView(panorama);

}

window.onload = initialize_property_map;

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#property_map {
  height: 100%;
  width: 50%;
  float: left;
}
#pano {
  height: 100%;
  width: 50%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="property_map"></div>
<div id="pano"></div>

将标记点并排放置在Google街景和Google地图上

1 个答案: