添加自定義標記，以谷歌街景

Question

請幫我一個標記添加到谷歌街景，但是當我把它放在什麼工作，我得到一個 未捕獲的ReferenceError：地圖沒有定義

繼承人的標誌可變

var cafe = new google.maps.LatLng(34.935196, -107.539546); 

繼承人的代碼來設置標記

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

赫雷什定製谷歌街景

<script src="https://maps.googleapis.com/maps/api/js? v=3.exp&signed_in=true"></script> 
<script> 


function initialize() { 
    var fenway = new google.maps.LatLng(34.938447, -107.535998); 

    var panoOptions = { 
     position: fenway, 
     addressControlOptions: { 
     position: google.maps.ControlPosition.BOTTOM_CENTER 
     }, 
     linksControl: false, 
     panControl: false, 
     zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.SMALL 
     }, 
     enableCloseButton: false 
    }; 

    var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map-canvas'), panoOptions); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

Answer 1

1. 要查看街景標記，你必須將它添加到全景。 Uncaught ReferenceError: map is not defined告訴你代碼中沒有定義變量map，這個變量需要是panorama。

   var cafeMarker = new google.maps.Marker({ 
       position: cafe, 
       map: panorama, // your code doesn't have a 'map' variable 
       icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', 
       title: 'Cafe' 
   }); 
   

2. 一旦我這樣做，你的標記太遠，看不到。如果我將pano的位置移近（並將其指向標記），我就會看到它。

   function initialize() { 
       var fenway = new google.maps.LatLng(34.9355,-107.539254); 
   
       var panoOptions = { 
        position: fenway, 
        addressControlOptions: { 
         position: google.maps.ControlPosition.BOTTOM_CENTER 
        }, 
        linksControl: false, 
        panControl: false, 
        zoomControlOptions: { 
        style: google.maps.ZoomControlStyle.SMALL 
        }, 
        enableCloseButton: false 
       }; 
   
       var panorama = new google.maps.StreetViewPanorama(
       document.getElementById('map-canvas'), panoOptions); 
   
       var cafe = new google.maps.LatLng(34.935196, -107.539546); 
   
       var cafeMarker = new google.maps.Marker({ 
        position: cafe, 
        map: panorama, 
        icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', 
        title: 'Cafe' 
       }); 
        var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(),cafe); 
   
       panorama.setPov({ 
        heading: heading, 
        pitch: 0, 
        zoom: 1 
       }); 
   
   } 
   

proof of concept fiddle

代碼片段：

function initialize() { 
 
    var fenway = new google.maps.LatLng(34.9355, -107.539254); 
 
    // var fenway = new google.maps.LatLng(34.938447, -107.535998); 
 

 
    var panoOptions = { 
 
    position: fenway, 
 
    addressControlOptions: { 
 
     position: google.maps.ControlPosition.BOTTOM_CENTER 
 
    }, 
 
    linksControl: false, 
 
    panControl: false, 
 
    zoomControlOptions: { 
 
     style: google.maps.ZoomControlStyle.SMALL 
 
    }, 
 
    enableCloseButton: false 
 
    }; 
 

 
    var panorama = new google.maps.StreetViewPanorama(
 
    document.getElementById('map-canvas'), panoOptions); 
 

 
    var cafe = new google.maps.LatLng(34.935196, -107.539546); 
 

 
    var cafeMarker = new google.maps.Marker({ 
 
    position: cafe, 
 
    map: panorama, 
 
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', 
 
    title: 'Cafe' 
 
    }); 
 
    var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), cafe); 
 

 
    panorama.setPov({ 
 
    heading: heading, 
 
    pitch: 0, 
 
    zoom: 1 
 
    }); 
 

 
    // Set up the map 
 
    var myOptions = { 
 
    zoom: 15, 
 
    center: cafe 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map_canvas'), 
 
    myOptions); 
 
    var cafeMarkerMap = 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 panoMarker = new google.maps.Marker({ 
 
    position: panorama.getPosition(), 
 
    map: map, 
 
    icon: { 
 
     url: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png', 
 
     size: new google.maps.Size(7, 7), 
 
     anchor: new google.maps.Point(3.5, 3.5) 
 
    }, 
 
    title: 'Pano' 
 
    }); 
 
    document.getElementById('info').innerHTML = google.maps.geometry.spherical.computeDistanceBetween(panorama.getPosition(), cafe).toFixed(2) + " meters"; 
 

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

html, 
 
body, 
 
#map-canvas, 
 
#map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div> 
 
<div id="info"></div>