Question

更新：我现在有一个静态解决方案，但我仍然想知道它是否可以改进。除了用于切换视图的on click事件之外，所有代码都是相同的。

$(document).on('click', '.mobile-toggle a', function (e) {
    e.preventDefault();

    if (!$(this).hasClass("active")) {
        var target = $(this).attr("data-target");

        $("#results > div, .mobile-toggle a").removeClass("active");
        $(this).addClass("active");
        $("#" + target).addClass("active");
    }

    var center = dmap.getCenter();
    google.maps.event.trigger(dmap, 'resize');
    dmap.setCenter(center);
    dmap.setZoom(12);
});

这会使地图正确居中，这很好。变焦也很好，但它并不总是适合路线。有时路线太大而不适合，有时候地图可能会稍微放大一点。有没有办法根据路线确定应该使用的缩放值？我相当肯定这通常应该是自己发生的，但这次似乎并非如此。

以下原帖。

我已经阅读了很多关于此的问题/答案，但所提供的答案似乎都没有找到我正在寻找的答案。我会尽力解释这一点。

我目前正在写商店定位器。在桌面上，一切都很好。移动是我遇到困难的地方，因为一些不断变化的视图（显示/隐藏div）。根据我的阅读，看起来很多人都遇到了一个问题，即地图是在隐藏的div中创建的，然后它显示不正确（例如地图只占据了左上角的区域）容器）当显示div时。

商店定位器的布局如下 - 搜索位置后，您会看到所有结果的列表视图。当您点击“地图视图”时选中顶部，您会看到包含所有附近商店的Google地图视图。这很好用。如果您选择商店，然后点击“获取路线”＆＃39;从列表视图中，您可以看到要到达该商店的路线的列表视图。同样，如果您选择商店并点击“获取路线”＆＃39;在地图视图中，您会看到方向的地图。这在两种情况下都能正常工作。

问题是当我在列表视图中时，单击以获取路线，然后从路线列表视图切换到地图视图。地图用正确的路线绘制，它就像它应该填充div一样 - 但是，路线位于地图的左上方，地图本身也是缩小的。例如，如果路线位于费城地区，则地图会缩小，其中心通常位于百慕大附近。而且每次都在百慕大大致相同的地方。

这里是列表和地图视图之间按下按钮的相关代码。

$(document).on('click', '.mobile-toggle a', function (e) {
    e.preventDefault();

    if (!(this).hasClass("active")) {
        var target = $(this).attr("data-target");

        $("#results > div, .mobile-toggle a").removeClass("active");
        $(this).addClass("active");
        $("#" + target).addClass("active");
    }
    google.maps.event.trigger(dmap, 'resize');
}

dmap是一个包含方向图的全局变量，地图本身在创建时会为它分配这两个侦听器。

google.maps.event.addListener(dmap, 'idle', function () {
    google.maps.event.trigger(dmap, 'resize');
    dmapCenter = dmap.getCenter();
});
google.maps.event.addDomListener(window, 'resize', function () {
    dmap.setCenter(dmapCenter);
});

这会重新绘制地图并确保在调整窗口大小时中心保持不变，但地图本身仍然没有专注于从位置A到位置B的路线。我觉得解决方案可以＆＃39 ;与我已经尝试过的东西相比太远了（根据我所读过的内容），但我似乎无法实现这一目标。

对文字墙感到抱歉。如果您认为有任何其他代码可能有助于回答此问题，请告知我们。谢谢！

编辑：根据要求，这里是绘制地图的完整代码。

function calcRoute(start, dest) {
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();

    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(lat, lng)
    };
    var map = new google.maps.Map(document.getElementById('directions-map'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions'));

    var request = {
        origin: start,
        destination: dest,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });

    dmap = map;
    dmapCenter = map.getCenter();

    google.maps.event.addListener(map, 'idle', function () {
        google.maps.event.trigger(map, 'resize');
        dmapCenter = map.getCenter();
    });
    google.maps.event.addDomListener(window, 'resize', function () {
        map.setCenter(dmapCenter);
    });
}

lat和lng是具有搜索位置的纬度和经度的全局变量。

Answer 1

您正在使用的工作流程（恕我直言）对我来说似乎有点奇怪（恕我直言），主要是您每次计算方向时初始化地图实例的选择。

我不知道这有多大帮助，因为我无法在移动设备上测试它，但下面是制作谷歌地图的代码，在两点之间渲染方向，并在以后维护地图中心调整地图大小（通过在整页中运行代码段来调整大小，而不是调整浏览器窗口的大小）。

var DMAP,
    DMAP_RENDERER,
    DIRECTIONS_SERVICE;

/*
 Run only once when your page loads to ready global components
 for any future direction calls.
 */
function initializeDirectionsFeature(){
    //set up directions map
    var dmapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(38.8282, -98.5795) //USA center
    };
    DMAP = new google.maps.Map( $("#map").get(0), dmapOptions);
    
    //set up renderer for directions map
    var rendererOptions = {
        map: DMAP,
        panel: $("#directions").get(0)
    };
    DMAP_RENDERER = new google.maps.DirectionsRenderer(rendererOptions);
    
    //Initialize the directions service
    DIRECTIONS_SERVICE = new google.maps.DirectionsService();
    
    //Trigger map redraw when dom element is resized
    google.maps.event.addDomListener(window, 'resize', function () {
        google.maps.event.trigger(DMAP, 'resize');
    });
    
    //Preserve map perspective when after resize
    google.maps.event.addListener(DMAP, 'resize', function () {
        var center = DMAP.getCenter();
        google.maps.event.addListenerOnce(DMAP, 'center_changed', function () {
            DMAP.setCenter( center );
        });
    });
}

/*
 Gets and renders the directions between params.
 Params 'from' and 'to' can be either LatLng or
 a String that will be geocoded. Param 'renderer'
 is the `google.maps.DirectionsRenderer` to use.
 */
function calcDirections(from, to, renderer){
    var request = {
        origin: from,
        destination: to,
        travelMode: google.maps.TravelMode.DRIVING
    };
    DIRECTIONS_SERVICE.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            renderer.setDirections(response);
        }
    });
}

//for Snippet, actuall run google maps initialize function
initializeDirectionsFeature();

//For Snippet example
$("#query").submit(function(e){
    e.preventDefault();
    calcDirections(e.target.from.value, e.target.to.value, DMAP_RENDERER)
});

/* just for Snippet, gmap element just needs a height */
html, body {
  position: relative;
  width: 98%;
  height: 98%;
  min-height: 500px;
}
#map, #directions {
  width: 100%;
  height: 40%;
}
.inline-block {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js">
</script>
<form id="query">
    <div class="inline-block">
        <label for="from">From:</label>
        <input id="from" name="from" value="New York, NY"/>
    </div>
    <div class="inline-block">
        <label for="to">To:</label>
        <input id="to" name="to" value="Philadelphia, PA"/>
    </div>
    <button type="submit">Go</button>
</form>
<div id="map"></div>
<div id="directions">Directions:</div>

方向图未正确居中/缩放

1 个答案: