我可以将 MapBox 用于街景视图吗 Google 地图街景视图

Question

我想在地图框中实现类似 google 街景的街景。如果有人有任何想法，请相应地指导我。

Answer 1

注意（更新）：将非 google 地图与街景相结合不符合 Google 的服务条款： http://cloud.google.com/maps-platform/terms

从技术上讲是可能的：

您可以将 Google Street View Service 与自定义 mapbox 地图一起使用。

要创建街景全景图，您需要对其进行初始化：

panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
    position: { lng: 23.332791136054766, lat: 42.69581966446731 },
    pov: { heading: 165, pitch: 0 },
    addressControl: false,
    linksControl: true, // guide arrows
    panControl: false, // compass
    zoomControl: false,
    /*
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },*/
    fullscreenControl: true,
    fullscreenControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    zoom: 5,
    visible: true,
    mode: 'html5' // fixes bug in FF: 
});

然后您可以根据来自您的 mapbox 地图的事件更新全景位置：

panorama.setPov({
    heading: +building.heading || 0,
    pitch: +building.pitch || 0,
    zoom: +building.zoom || 1
});
panorama.setPosition({
    lng: +building.lng,
    lat: +building.lat
});

// NOTE: this fixes broken behavior:
panorama.setVisible(false);
panorama.setVisible(true);

或者，您可以查看 Mapillary which is a more open alternative to Google Street View. They are actually using mapbox-gl in their explorer UI。

Answer 2

2022 年更新

我知道这个问题很老了。我参加聚会迟到了，但我确实想添加一个答案，因为我一直在专门寻找这个答案，并且我找到了一个根本不需要使用 Google 的答案。如果您像我一样正在寻找 Google-free 和独立的解决方案，这就可以了。

Mapbox 和 Mapillary 实际上已经配对在一起提供 street view。

L.mapbox.accessToken = 'pk.eyJ1Ijoid2ViYjI0aCIsImEiOiJjazU3a2lkbW4wNGJrM2RvNnNrNnBzbGlxIn0.GGnF34IsMQyqKNoam241tA';
var map = L.mapbox.map('map')
    .setView([38.9, -77.0346], 13)
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

map.attributionControl
    .addAttribution('<a href="https://mapillary.com/">Images from Mapillary</a>');

var API_ENDPOINT = 'https://api.mapillary.com/v1/im/search?' +
    'min-lat=SOUTH&max-lat=NORTH&min-lon=WEST&max-lon=EAST&' +
    'max-results=100&geojson=true';

var images = L.mapbox.featureLayer()
    .on('layeradd', function(e) {
        e.layer.bindPopup('<img src="' + e.layer.feature.properties.image + '" />', {
            minWidth: 340
        });
    })
    .addTo(map);

images.loadURL(API_ENDPOINT
    .replace('SOUTH', map.getBounds().getSouth())
    .replace('NORTH', map.getBounds().getNorth())
    .replace('WEST', map.getBounds().getWest())
    .replace('EAST', map.getBounds().getEast()));

我可以将 MapBox 用于街景视图吗 Google 地图街景视图

Can I use MapBox for street view like Google Maps street view

javascript

angularjs

mapbox

2022 年更新