One, foreword

Baidu Map has built-in suspension toolbar, which can be opened by itself, including offline map can also be opened, using the library DrawingManager, mouse drawing toolbar library, which provides the open source code library for mouse drawing points, lines, surfaces, polygons (rectangles, circles) editing toolbar. In addition, users can use JavaScript API to set properties (such as color, line width, etc.) and edit (such as opening line vertex editing, etc.) of the corresponding overlay (point, line, plane, etc.) class interface. You need to introduce the CSS and JS files of the toolbar library.

Two, functional characteristics

  1. Both online map and offline map modes are supported.
  2. Support webKit kernel, WebEngine kernel, miniblink kernel, IE kernel.
  3. You can set multiple annotation points, including name, address, longitude and latitude.
  4. You can set whether the map can be zoomed by clicking, dragging or mouse wheel.
  5. You can set the protocol version, key, theme style, central coordinate, central city, geocoding location, etc.
  6. Map zoom scale and level can be set, thumbnail, scale, road information and other controls visible.
  7. Support map interaction, such as mouse down to get the longitude and latitude of the corresponding location.
  8. Support route query, you can set the starting point location, destination location, route mode, route mode, route scheme (minimum time, minimum transfer, minimum walking, no subway, shortest distance, avoid high-speed).
  9. Can display point line plane tool, can directly on the map line, point, rectangle, circle, etc.
  10. Administrative divisions can be set up to specify a certain urban area to draw layers. The online map automatically outputs the boundary points of administrative divisions to JS files for offline map use.
  11. Multiple coverings can be added statically or dynamically. Supports point, polygon, rectangle, circle, arc, point aggregation, etc.
  12. Provides a function interface to handle latitude and longitude resolution into addresses and address resolution into latitude and longitude coordinates.
  13. The demo can directly select individual points to perform corresponding processing such as route query.
  14. You can get the point coordinate information set queried by the route, such as for robot coordinate navigation.
  15. Encapsulates rich functions such as delete specified point and all points, delete specified overlay and all overlay, etc.
  16. Annotate popbox information can be customized content, standard HTML format.
  17. Annotation point Click event Optional 0- Do not process 1- Own pop-up 2- Send signal.
  18. Annotation point can set animation effect 0- no processing 1- jump 2- fall
  19. Note points can be set to local image files.
  20. Function interface friendly and unified, easy to use, a class.
  21. Js dynamic interaction to add points, delete points, empty points, reset points, do not need to refresh the page.
  22. Support any Qt version, any system, any compiler.

3. Experience address

  1. Experience address: pan.baidu.com/s/1ZxG-oyUK… Extraction code: O05q File name: bin_map.zip
  2. Domestic site: gitee.com/feiyangqing…
  3. International site: github.com/feiyangqing…
  4. Profile: blog.csdn.net/feiyangqing…
  5. Zhihu homepage: www.zhihu.com/people/feiy…

Four, effect drawing

5. Relevant codes

void MapBaiDu::addHead(QStringList &list)
{
    // Build the page header
    list << QString("<html>"); list << QString("<head>"); list << QString("<title>%1</title>").arg(title); list << QString("<meta charset=\"utf-8\">");
    list << QString("<meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width\">"); List << QString("<style type=\"text/css\">");
    // global font + page width/height ratio + margins, etcList << QString(" HTML,body{max-width: 100%; clear: both; height:100%; width:100%; margin:0px; padding:0px; } "); Opacity :0; // Hide opacity list << QString(". AnchorBL {opacity:0; } ");if(startAddr.isEmpty()) { list << QString(" #map{height:100%; width:100%; } "); }else{ list << QString(" #map{height:%1px; width:100%; }").arg(height); list << QString(" #result,#result table{width:100%; font-size:12px; } "); } // list << QString(" ::-webkit-scrollbar{width:0.8em; } "); A list < < QString (" : : - its - scrollbar - track {background: RGB (241241241); } "); A list < < QString (" : : - its - the scrollbar thumb {background: RGB (188188188); } "); list << QString("</style>"); #ifdef webengine list << QString("<script type=\"text/javascript\" SRC =\"qwebchannel.js\"></script>");  #endif // The file path for online and offline map loading is differentifList << QString("<script type= "text/javascript "SRC = "map_load.js "></script>"); List << QString("<script type=\"text/javascript\"); src=\"tools/CurveLine.min.js\"></script>"); // Load point aggregation requires the following two JS files list << QString("<script type=\"text/javascript\" SRC =\"tools/ texticonoverlay_min.js \"></script>"); list << QString("<script type=\"text/javascript\" src=\"tools/MarkerClusterer_min.js\"></script>"); List << QString("<script type=\"text/javascript\" SRC =\"citypointjs/%1.js\"></script>").arg(cityJsName);  // Introduce the mouse drawing tool JS fileif(showOverlayTool) { list << QString("<script type=\"text/javascript\" src=\"tools/DrawingManager_min.js\"></script>"); list << QString("<link rel=\"stylesheet\" type=\"text/css\" href=\"tools/DrawingManager_min.css\"/>"); }}else{// Introduce map JS file 0- default 1- Earth 3- metroif (mapType == 0) {
            if (mapFlag == "BMapGL") {
                list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?type=webgl&v=%1\"></script>").arg(mapVersionKey); } else { list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?v=%1\"></script>").arg(mapVersionKey); }}else if (mapType == 1 || mapType == 2) {
            list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?type=webgl&v=%1\"></script>").arg(mapVersionKey);
        } else if (mapType == 3) {
            list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?type=subway&v=%1\"></script>").arg(mapVersionKey);
        }

        // Introduce the CurveLine JS file, which is only needed when drawing arcs, and can be commented if no arcs are neededlist << QString("<script type=\"text/javascript\" SRC = \ \ "http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js\" > < / script >"); List << QString("<script type=\SRC = "text/javascript \" \ "http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js\" > < / script >"); list << QString("<script type=\"text/javascript\" SRC = \ \ "http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js\" > < / script >"); List << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js\"></script>");

        // Introduce the real-time traffic condition JS file
        if(showTrafficControl) { list << QString("<script type=\"text/javascript\" SRC = \ \ "http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js\" > < / script >"); list << QString("<link rel=\"stylesheet\" type=\"text/css\" Href = \ \ "http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css\" / >");
        }

        // Introduce the mouse drawing tool JS file
        if(showOverlayTool) { list << QString("<script type=\"text/javascript\" SRC = \ \ "http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js\" > < / script >"); list << QString("<link rel=\"stylesheet\" type=\"text/css\" Href = \ \ "http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css\" / >");
        }
    }

    list << QString("</head>");
}
Copy the code