如果设置了自定义选项，Google 地图街景中不会显示标记

Question

如果我在 Google 地图上包含自定义街景选项，我会运行遇到一个奇怪的问题。

我创建了一个 codepen 来显示错误：

var map1, 
    map2;

function initialize() {

  /* Map #1 */
  var mapElement1 = document.getElementById('map1');
  var mapOptions1 = {
    zoom: 16,
    center: new google.maps.LatLng(20.6726166, -100.3846899)
  };
  map1 = new google.maps.Map(mapElement1, mapOptions1);
  var markerMap1 = new google.maps.Marker({
    map: map1,
    title: "Marker #1",
    position: map1.getCenter()
  });

  /* Map #2 */
  var mapElement2 = document.getElementById('map2');
  var streetViewOptions = {
    visible: false, //set to false so streetview is not triggered on the initial map load
    fullscreenControl: false,
    enableCloseButton: true,
    addressControl: false,
    addressControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM
    }
  };  
  var street = new google.maps.StreetViewPanorama(mapElement2, streetViewOptions);
  var mapOptions2 = {
    zoom: 16,
    center: new google.maps.LatLng(20.6726166, -100.3846899),
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    streetView: street
  };
  map2 = new google.maps.Map(mapElement2, mapOptions2);
  var markerMap2 = new google.maps.Marker({
    map: map2,
    title: "Marker #2",
    position: map2.getCenter()
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

在第一个示例中，如果我使用 "street view icon" 打开街景视图，标记将保留在地图上。

在第二个示例中，如果我打开街景（但仅限于街景模式），标记将在地图上消失。

关于如何解决这个问题有什么想法吗？

Answer 1

您需要为单独的 StreetViewPanorama

创建一个标记

var markerMap2sv = new google.maps.Marker({
  map: street,
  title: "Marker #2",
  position: map2.getCenter()
});

proof of concept fiddle

代码片段：

var map1,
  map2;

function initialize() {

  /* Map #1 */
  var mapElement1 = document.getElementById('map1');
  var mapOptions1 = {
    zoom: 16,
    center: new google.maps.LatLng(20.6726166, -100.3846899)
  };
  map1 = new google.maps.Map(mapElement1, mapOptions1);
  var markerMap1 = new google.maps.Marker({
    map: map1,
    title: "Marker #1",
    position: map1.getCenter()
  });

  /* Map #2 */
  var mapElement2 = document.getElementById('map2');
  var streetViewOptions = {
    visible: false, //set to false so streetview is not triggered on the initial map load
    fullscreenControl: false,
    enableCloseButton: true,
    addressControl: false,
    addressControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM
    }
  };
  var street = new google.maps.StreetViewPanorama(mapElement2, streetViewOptions);
  var mapOptions2 = {
    zoom: 16,
    center: new google.maps.LatLng(20.6726166, -100.3846899),
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    streetView: street
  };
  map2 = new google.maps.Map(mapElement2, mapOptions2);
  var markerMap2 = new google.maps.Marker({
    map: map2,
    title: "Marker #2",
    position: map2.getCenter()
  });
  var markerMap2sv = new google.maps.Marker({
    map: street,
    title: "Marker #2",
    position: map2.getCenter()
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#map1,
#map2 {
  height: 50%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map1"></div>
<div id="map2"></div>

如果设置了自定义选项，Google 地图街景中不会显示标记

Marker not showing on Google Maps streetview if custom options is set

google-maps

google-maps-markers

google-street-view