Qt Writing Map Comprehensive Application 6-Baidu Online Map

1. Preface

Baidu Online Map has been used for a long time, and it has been continuously improved until today. In addition to basic map loading and setting some related attributes, various js functions are added to load data directly and asynchronously, such as dynamically adding points, rectangles, circles, administrative divisions and so on.Of course, the most important thing is to add support for offline maps. That offline map took a long time to do, and finally it was done.

Online maps do not have too many difficulties. It is absolutely a matter of minutes and lines of code to make a simple online map demo. In the process of using it, there are a few small improvements, such as map margin, need to set an additional line of css to html,body{height:100%;width:100%;margin:0px;padding:0px;}, for example, there is a logo of Baidu in the lower left corner, if you want to remove it, add a line of css as.anchorBL{display:none;} Otherwise, publish it, others will see how there is no face in the logo of Baidu.Another example is the style of scrollbars. Many people say that I explicitly set the scrollbar style of Qt. Why is the scrollbar here ineffective?In fact, the scrollbars in this page are web pages and are not controlled. You need to set the scrollbar css of the web page as follows.

::-webkit-scrollbar{width:0.8em;}
::-webkit-scrollbar-track{background:rgb(241,241,241);}
::-webkit-scrollbar-thumb{background:rgb(188,188,188);}

2. Functional features

Both online and offline map modes are supported.
The webkit, webengine and IE cores are also supported.
Support for setting multiple labeling points, including name, address, longitude and latitude.
You can set whether the map can be clicked, dragged, and zoomed by the mouse wheel.
Protocol versions, keys, theme styles, central coordinates, central cities, geocoded locations, and so on can be set.
You can set the scale and level of the map, and the visibility of thumbnails, scales, road information, and other controls.
Support map interaction, such as pressing the mouse to get the latitude and longitude of the corresponding location.
Query routes are supported, including starting and ending locations, route modes, route modes, route schemes (minimum time, minimum transfer, minimum walking, no metro, minimum distance, avoid high speed).
The Points, Lines, and Surfaces tool can be displayed, drawing lines, points, rectangles, circles, and so on directly on the map.
You can set up administrative divisions, specify a city area to draw layers, and the online map automatically outputs the boundary points of administrative divisions collected into js files for offline map use.
Multiple covers can be added statically or dynamically.Supports point, polyline, polygon, rectangle, circle, arc, point aggregation, etc.
Function interface is friendly and unified, easy to use, just one class.
Support js dynamic interactive add point, delete point, empty point, reset point, do not need to refresh the page.
Supports any Qt version, any system, any compiler.

3. Experience Address

Experience address: https://pan.baidu.com/s/1uQsDQO5E5crUBN2J-nPeLQ Extraction code: 1jkp file name: bin_map.zip
Domestic site: https://gitee.com/feiyangqingyun
International site: https://github.com/feiyangqingyun
Personal home page: https://blog.csdn.net/feiyangqingyun
Knowing Home Page: https://www.zhihu.com/people/feiyangqingyun/

IV. Effect Charts

V. Related Codes

void MapBaiDu::addBody(QStringList &list)
{
    //Build the main body of a web page
    list << QString("<body>");
    list << QString("  <div id=\"map\"></div>");

    if (!startAddr.isEmpty()) {
        list << QString("  <div id=\"result\"></div>");
    }

    list << QString("</body>");
    //Baidu Map JS Script
    list << QString("<script type=\"text/javascript\">");

    //Generate QWebChannel Communication Object
    //Duplicate incoming objects may prompt js: Uncaught TypeError: Cannot read property'receiveDataFromJs'of undefined
#ifdef webengine
    QString objName = callFun.split(".").first();
    objName = objName.isEmpty() ? "objName" : objName;
    list << QString("  new QWebChannel(qt.webChannelTransport, function(channel){window.%1 = channel.objects.%1;})").arg(objName);
#endif
}

void MapBaiDu::addProperty(QStringList &list)
{
    //Define Baidu Map Objects
    list << QString("  var map = new BMap.Map(\"map\", {minZoom:%1, maxZoom:%2, enableMapClick:%3});")
         .arg(mapMinZoom).arg(mapMaxZoom).arg(enableMapClick ? "true" : "false");

    //Initialize the map, set the center point coordinates or the center city and map level. Priority is set according to the center coordinates
    //Offline maps need to be in the form of center point coordinates
    if (mapLocal) {
        list << QString("  map.centerAndZoom(new BMap.Point(%1), %2);").arg(mapCenterPoint).arg(mapZoom);
    } else if (mapGeocoder.isEmpty()) {
        if (!mapCenterPoint.isEmpty()) {
            list << QString("  map.centerAndZoom(new BMap.Point(%1), %2);").arg(mapCenterPoint).arg(mapZoom);
        } else {
            list << QString("  map.centerAndZoom(\"%1\", %2);").arg(mapCenterCity).arg(mapZoom);
        }
    }

    //Enable map drag events, enabled by default (not writable)
    if (enableDragging) {
        list << QString("  map.enableDragging(true);");
    }

    //Enable wheel zoom in and out
    if (enableScrollWheelZoom) {
        list << QString("  map.enableScrollWheelZoom(true);");
    }

    //Enable mouse double-click zoom-in, enabled by default (not writable)
    if (enableDoubleClickZoom) {
        list << QString("  map.enableDoubleClickZoom(true);");
    }

    //Enable keyboard movement
    if (enableKeyboard) {
        list << QString("  map.enableKeyboard(true);");
    }

    //Add a zoom control to the map
    if (showNavigationControl) {
        list << QString("  map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT, type:BMAP_NAVIGATION_CONTROL_LARGE}));");
    }

    //Add a thumbnail control to the map
    if (showOverviewMapControl) {
        list << QString("  map.addControl(new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT, isOpen:1}));");
    }

    //Add a scale control to the map
    if (showScaleControl) {
        list << QString("  map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}));");
    }

    //Add map type control, blank by default Street + Satellite + 3D
    if (showMapTypeControl) {
        //Street Map: BMAP_NORMAL_MAP Satellite Map: BMAP_SATELLITE_MAP Hybrid Map: BMAP_HYBRID_MAP 3D Map: BMAP_PERSPECTIVE_MAP
        list << QString("  map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]}));");
    }

    //Add Panorama Control
    if (showPanoramaCoverageLayer) {
        list << QString("  map.addTileLayer(new BMap.PanoramaCoverageLayer());");
        list << QString("  var ctrlPan = new BMap.PanoramaControl();");
        list << QString("  ctrlPan.setOffset(new BMap.Size(20, 50));");
        list << QString("  map.addControl(ctrlPan);");
    }

    //Add a road condition control, offline maps do not have real-time road conditions
    if (showTrafficControl && !mapLocal) {
        list << QString("  var ctrlTra = new BMapLib.TrafficControl({showPanel:false});");
        list << QString("  ctrlTra.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);");
        list << QString("  map.addControl(ctrlTra);");
    }

    //Set the color theme, start charging in 2019-6, just block the line below
    if (!mapStyleName.isEmpty()) {
        //list<<QString(QString("    map.setMapStyle({style:'%1'});").arg(mapStyleName));
    }

    //Set up mouse click to get latitude and longitude, send out by signal
    if (enableClickPoint && !callFun.isEmpty()) {
        list << QString("  map.addEventListener(\"click\", function(e) {");
        list << QString("    window.%1('point', e.point.lng + \",\" + e.point.lat);").arg(callFun);
        list << QString("  });");
    }
}

Posted by Roscoe on Wed, 08 Apr 2020 18:59:46 -0700

Programmer Group