javascript - 如何在街景中找到自定义叠加层？

Question

嗨，我已经搜索了所有的网络和 stackoverflow。

任何人都知道如何在谷歌地图街景中的特定位置定位自定义叠加层？

这是一个例子：

夜行

在此导览中，您可以看到一些图标和项目位于特定位置。

有谁知道这是怎么做到的吗 ？这太棒了，我想知道该怎么做。

我有使用 Google maps javascript API 的经验，但我不能这样做。

---

我用这个库解决了这个问题https://github.com/marmat/google-maps-api-addons

这是结果： http: //www.paneek.net/#/home

Answer 1

我在寻找如何实现类似的事情时发现了这一点：

• http://projects.teammaps.com/projects/streetviewoverlay/streetviewoverlay.htm
• http://projects.teammaps.com/projects/streetviewtour/tour.htm

我仍在寻找解决方案，并且我在谷歌服务之外找到了一些不错的库：

• http://leandigo.github.io/leanorama/ 不错，但是好像不支持firefox
• http://photo-sphere-viewer.js.org/markers.html - 恕我直言的最佳选择

事实上，使用谷歌 API 之外的解决方案有利有弊 - 但这个评估取决于你。

Answer 2

我认为这可能是相关的： https ://developers.google.com/maps/documentation/javascript/examples/streetview-overlays

这是在街景地图上放置位置标记的示例。它首先定义一个地点的位置，然后定义标记，为其赋予图标和名称等属性。

var map;
var panorama;
var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);

function initialize() {

  // Set up the map
  var mapOptions = {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Setup the markers on the map
  var cafeMarker = new google.maps.Marker({
      position: cafe,
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
      title: 'Cafe'
  });

  var bankMarker = new google.maps.Marker({
      position: bank,
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
      title: 'Bank'
  });

  var busMarker = new google.maps.Marker({
      position: busStop,
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
      title: 'Bus Stop'
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(astorPlace);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

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