Question

此地图部分正常运作。它显示两个地图但我无法弄清楚为什么标记和信息窗口没有显示在路线图上。你能帮帮我吗？

jsFiddle ：http://jsfiddle.net/btqVx/2/

使用Javascript：

//<![CDATA[
// ************************   Variables   ************************
//****** Map Options ******//
var roadmap =
        {
        infoWindow: new google.maps.InfoWindow(),
        options:
            {
            map:
                {
                center: new google.maps.LatLng( 34.021868, -118.29322300000001 ),
                zoom: 15,
                mapTypeId: 'roadmap'
                }
            }
        };
        roadmap.options.marker =
            {
            position: roadmap.options.center,
            title: 'Hello',
            icon: 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
            shadow: 'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png'
            };

//****** Street view Options ******//
var StreetView =
        {
        options:
            {
            position: roadmap.options.map.center,
            zoom: 1
            },
        geometry:
            {
            MaxDistance: 30,
            cameraHeading: 0
            }
        };
        StreetView.StreetViewService = new google.maps.StreetViewService();


// ************************   Functions   ************************
//****** InfoWindow ******//
function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
        infoWindow.getContent();marker.openInfoWindowTabsHtml(infoTabs);
    });
}


//****** onLoad ******//
function googleMaps()
{
    // ************************   Road map   ************************
    roadmap.map = new google.maps.Map(document.getElementById("map"), roadmap.options.map );


    // ************************   Road map's Marker   ************************
    roadmap.options.marker.map = new google.maps.Map(document.getElementById("map"), roadmap.options.map );
    roadmap.marker = new google.maps.Marker( roadmap.options.marker );


    // ************************   Add infoWindow & click Listener to Marker   ************************
    bindInfoWindow( roadmap.marker, roadmap.map, roadmap.infoWindow, roadmap.options.marker.title );


    // ************************   Street view map   ************************
    var building = StreetView.options.position;

    function getHeading(buildingLatLng, callback) {
        StreetView.StreetViewService.getPanoramaByLocation(buildingLatLng, StreetView.geometry.MaxDistance, function (streetViewPanoramaData, status) {
            if(status === google.maps.StreetViewStatus.OK) {
                var car = streetViewPanoramaData.location.latLng;
                callback(google.maps.geometry.spherical.computeHeading(car, building));         
            }
        });
    }

    getHeading(building, function(carHeading) {
      StreetView.map = new google.maps.StreetViewPanorama(document.getElementById("map_StreetView"), {
        position: StreetView.options.position,
        pov: { heading: carHeading, pitch: 0, zoom: 1 }
      });
    });

} //end of load()


// ************************   Load   ************************
//Call googleMaps after document is loaded
google.maps.event.addDomListener(window, 'load', function(){
    googleMaps();
    //you can add more code here
    });
//]]>

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Street View & Road map</title>

    <!-- START: Google Maps API -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="street_view.js"></script>
    <!-- __END: Google Maps API -->
</head>

<body>
    <div id="map-container" >
        <div id="map_StreetView" style="width: 350px; height: 250px"></div><br/>
        <div id="map" style="width: 350px; height: 250px"></div>
    </div>
</body>
</html>

Answer 1

再次问好:)这是我更新的演示http://jsfiddle.net/RgaCe/

我做了这些改变：

（1）icon / shadow变为MarkerImage s因为它们没有对齐

    var bluePin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
      new google.maps.Size(32, 32),
      new google.maps.Point(0, 0),
      new google.maps.Point(15, 32));

    var pinShadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
      new google.maps.Size(59, 32),
      new google.maps.Point(0, 0),
      new google.maps.Point(15, 32));

（2）

roadmap.options.marker = 
        {
        // CHANGE add .map.
        position: roadmap.options.map.center,

（3）注释未定义的此函数//marker.openInfoWindowTabsHtml(infoTabs);

（4）

// CHANGE roadmap.map TO roadmap.options.marker.map
    bindInfoWindow( roadmap.marker, roadmap.options.marker.map, 
      roadmap.infoWindow, roadmap.options.marker.title );

Google Maps v3：Marker和infowindow未显示

1 个答案: