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

在第一个示例中，如果我使用“街景图标”打开街景，标记将保留在地图上。

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

有关如何解决此问题的任何想法？

Answer 1

您需要为单独的StreetViewPanorama

创建标记

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

proof of concept fiddle

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: