2张地图一页一张地图是从第一张地图的标记产生的（第二张地图没有出现）[关闭]

Posted 2023-02-23

【中文标题】2张地图一页一张地图是从第一张地图的标记产生的（第二张地图没有出现）[关闭]

【英文标题】：2 maps one page one map is spawned from the marker of the first (2nd map not showing up) [closed]

【发布时间】：2012-12-02 18:02:24

【问题描述】：

您好，有人可以帮忙吗？我有一张地图，其中标记记下每个位置（duh），然后在标记内是一个获取路线链接，它会产生一个弹出窗口。一切正常，除了位于弹出窗口中方向上方的地图（包含方向的第二张地图）未显示。它只是一个带有方向标记的灰色框。

这是js：

/* ::::::::::::::::::::::::::::::::::::DIRECTIONS:::::::::::::::::::::::::::::: */

var mapContainer = document.getElementById('map-container');
var dirContainer = document.getElementById('dir-container');
var fromInput = document.getElementById('from-input');
var toInput = document.getElementById('to-input');

// API Objects
var dirService = new google.maps.DirectionsService();
var dirRenderer = new google.maps.DirectionsRenderer();
var map2 = null;

function showDirections(dirResult, dirStatus) 
    if (dirStatus != google.maps.DirectionsStatus.OK) 
        alert('Directions failed: ' + dirStatus);
        return;
    

    // Show directions
    dirRenderer.setMap(map2);
    dirRenderer.setPanel(dirContainer);
    dirRenderer.setDirections(dirResult);
;

function getSelectedTravelMode() 
    value = google.maps.DirectionsTravelMode.DRIVING;
    return value;
;

function getDirections() 
    var fromStr = fromInput.value;
    var toStr = toInput.value;
    var dirRequest = 
        origin: fromStr,
        destination: toStr,
        travelMode: getSelectedTravelMode()
    ;
    dirService.route(dirRequest, showDirections);
;

function init() 
    var latLng2 = new google.maps.LatLng(37.77493, -122.419415);
    map2 = new google.maps.Map(mapContainer, myOptions2);

    var myOptions2 = 
        zoom: 13,
        center: latLng2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    ;
    // Show directions onload
    getDirections();





/* :::::::::::::::::::::::::::MAIN MAP::::::::::::::::::::::::::::::::::::::: */



var address;
var markers;
var windows;
var mapMarkers = new Array();
var map, marker, i;
var infoWindow = new google.maps.InfoWindow();


function initialize() 
    var map_center = new google.maps.LatLng(37.0902, -95.7129);
    var myOptions = 
        zoom: 4,
        center: map_center,
        scrollwheel: false,
        mapTypeControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    

    // Create a lettered icon for this point using our icon class
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var bounds = new google.maps.LatLngBounds();

    if (markers !== null && windows !== null) 

        for (i = 0; i < markers.length; i++) 

            marker = new google.maps.Marker(
                position: markers[i],
                map: map,
                draggable: false,
                animation: google.maps.Animation.DROP
            );

            mapMarkers.push(marker);

            bounds.extend(markers[i]);

            google.maps.event.addListener(marker, 'click', (function (marker, i) 
                return function (e) 
                    infoWindow.setContent(windows[i]);
                    infoWindow.open(map, marker);

                    g = document.getElementById("info");
                    address = g.getAttribute("rel");
                    //console.log(address);
                
            )(marker, i));
        

        google.maps.event.addListener(infoWindow, 'domready', function () 
            $("#info").on("click", function (e) 
                toInput.value = address;
                $(".dir-overlay").css("visibility", "visible");

                // init();
                // $('#to-text').text(address); 

                e.preventDefault();
            )
        );


        $(".closeDirections").click(function () 
            $(".dir-overlay").css("visibility", "hidden");
        );

        if (markers !== null && markers.length === 1) 
            map.setCenter(markers[0]);
            map.setZoom(11);
         else 
            map.fitBounds(bounds);
        
    


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

这是 html（缩写）：

  <div id="map_canvas"></div>


<div class="dir-overlay">
    <div class="overlaymap-wrapper">

        <div class="titlebar">
            <a href="#" class="closeDirections">close</a>
        </div>  
        <div class="innermap-wrapper">
        <div class="directions-inputs">
            <span class="blue-text">Starting Location</span> <input id="from-input" type="text" value="1202 edgewood ave chicago heights il" /> 
            <input id="to-input" type="hidden" value="1600 Amphitheatre Pkwy, Mountain View, CA"/>
            <a href="#" onClick="init();" class="blue-button">Get Directions</a>
            </div>
            <div id="map-container"></div>
            <div id="dir-container"></div>
        </div>

    </div>
</div>

标记正在被填充并从后面的 aspx 代码中提取。

【参考方案1】：

在您的 init() 方法中，myOptions2 在调用 google.maps.Map() 之后才被声明，它使用 myOptions2。 将myOptions2 的声明上移一行，就在调用google.maps.Map() 之前。

function init() 
    var latLng2 = new google.maps.LatLng(37.77493, -122.419415);
    var myOptions2 = 
        zoom: 13,
        center: latLng2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    ;

    map2 = new google.maps.Map(mapContainer, myOptions2);

    // Show directions onload
    getDirections();