Question

我已尝试使用以下代码正确显示两个城市之间的方向线，但是两个城市之间的线路未正确设置。如果2个城市之间的距离足够长，那么会显示一个城市图标，并且要看到地图上显示的其他城市图标，我必须去那个地方。

请检查以下代码：

void ShowDirection::on_webView_loadFinished(bool)
{

    QStringList scriptStr;
    scriptStr
            << "var map = new google.maps.Map2(document.getElementById(\"map\"));"
            << "var bounds = new GLatLngBounds();"
            << "var colors = ['#FF0000'];"
            << "var baseStartIcon = new GIcon();"
            << "var baseEndIcon = new GIcon();"
            << "baseStartIcon.image = 'qrc:images/green.png';"
            << "baseEndIcon.image = 'qrc:images/red.png';"
            << "baseStartIcon.iconSize = new GSize(37, 37);"
            << "baseEndIcon.iconSize = new GSize(37, 64);"
            << "baseStartIcon.iconAnchor = new GPoint(18, 37);"
            << "baseEndIcon.iconAnchor = new GPoint(0, 64);"
            << "map.addControl(new GLargeMapControl());"
            << "var directions = new GDirections();"
            << "GEvent.addListener(directions,\"load\", function() {"
            << "var poly=directions.getPolyline();"
            << "map.setCenter(poly.getVertex(0),8);"
            << "map.addOverlay(new GMarker(poly.getVertex(0),baseStartIcon));"
            << "map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),baseEndIcon));"
//            << "bounds.extend(poly.getBounds());"
//            << "map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));"
            << "poly.setStrokeStyle({color:colors[0],weight:3,opacity: 0.7});"
            << "map.addOverlay(poly);"
            << "});"


    << QString ("directions.loadFromWaypoints([\"%1\",\"%2\"],{getPolyline:true});")
                                .arg(fromCurrentLocationShowDirection)
                                .arg(toEventLocationShowDirection);
    ui->webView->page()->mainFrame()->evaluateJavaScript(scriptStr.join("\n"));
}

如何在地图上绑定2个城市位置方向线，以便在地图上显示两个位置方向的距离。

...谢谢

Answer 1

修改代码后，它现在正在运行：

void ShowDirection::on_webView_loadFinished(bool)
{

    QStringList scriptStr;
    scriptStr
            << "var map = new google.maps.Map2(document.getElementById(\"map\"));"
            << "var bounds = new GLatLngBounds();"
            << "var colors = ['#FF0000'];"
            << "var baseStartIcon = new GIcon();"
            << "var baseEndIcon = new GIcon();"
            << "baseStartIcon.image = 'qrc:images/currentlocation-green.png';"
            << "baseEndIcon.image = 'qrc:images/iPhone_redFlag-events.png';"
            << "baseStartIcon.iconSize = new GSize(37, 37);"
            << "baseEndIcon.iconSize = new GSize(37, 64);"
            << "baseStartIcon.iconAnchor = new GPoint(18, 37);"
            << "baseEndIcon.iconAnchor = new GPoint(0, 64);"
            << "map.addControl(new GLargeMapControl());"
            << "var directions = new GDirections();"
            << "GEvent.addListener(directions,\"load\", function() {"
            << "var poly=directions.getPolyline();"
            << "bounds.extend(poly.getVertex(0));"
            << "bounds.extend(poly.getVertex(poly.getVertexCount()-1)); "
            << "map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));"
            << "map.addOverlay(new GMarker(poly.getVertex(0),baseStartIcon));"
            << "map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),baseEndIcon));"

            << "poly.setStrokeStyle({color:colors[0],weight:3,opacity: 0.7});"
            << "map.addOverlay(poly);"
            << "});"


    << QString ("directions.loadFromWaypoints([\"%1\",\"%2\"],{getPolyline:true});")
                                .arg(fromCurrentLocationShowDirection)
                                .arg(toEventLocationShowDirection);
    ui->webView->page()->mainFrame()->evaluateJavaScript(scriptStr.join("\n"));
}

这对任何想要使用带有自定义图标的彩色多边形线显示GDirection的人都很有用。

如何通过在Qt中使用谷歌地图将地图与2个城市绑定来正确显示方向？

1 个答案: