qt显示高德地图

注意:1.4.3版本高德地图似乎存在内存泄漏的情况,地图不断缩放之后,内存减少,不会恢复,最终耗尽内存,卡死系统,使用webview加载的此版本高德地图,将webview所在的widget删除,地图占用的内存也不释放,存在严重问题。另外使用QWebSettings::globalSettings()->clearMemoryCaches()等API(参考:http://juke.outofmemory.cn/entry/146265)设置或清除内存均无效。
最终换用最新版1.4.15的API后,未再发现此问题。

与显示百度地图类似,只需要将对应的地图html文件显示高德地图就可以了:
在webview中加载html:

ui->webView->load(QUrl("qrc:/images/Gaode.html"));

html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>给多个点添加信息窗体</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.4.3&key=9eaa110d1034e9e62a1ce026035d62ed"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    var mymap = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11
    });
    function fitView() {
        mymap.setFitView();
    }
    function loadfinishtip() {
        alert("amap load finish.");
    }
    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    function markerClick(e) {
        if(infoWindow.getIsOpen()){
            infoWindow.close();
        }else{
            infoWindow.setContent(e.target.content);
            infoWindow.open(mymap, e.target.getPosition());
        }
    }
    var markers = [];
    var str;
    function addMarker(id,name,latitude,longitude,iconPath){
        var gps = [longitude,latitude];
        AMap.convertFrom(gps, 'gps', function (status, result) {
            var lnglats = gps;
            if (result.info === 'ok') {
                var lnglats = result.locations; // Array.<LngLat>
                latitude = lnglats[0]["lat"];
                longitude = lnglats[0]["lng"];
            }
            var marker = new AMap.Marker({
                position: [longitude,latitude],
                icon: new AMap.Icon({
                   image: iconPath,
                   size: new AMap.Size(128, 128), //图标大小
                   imageSize: new AMap.Size(64,64)
                })
            });
            marker.setLabel({
                   offset: new AMap.Pixel(60, 40),
                   content: name
            });
            str = "编号:" + "&nbsp&nbsp" + id + "<br>";
            str = str + "名称:" + "&nbsp&nbsp" + name + "<br>";
            str = str + "经度:" + "&nbsp&nbsp" + longitude + "<br>";
            str = str + "纬度:" + "&nbsp&nbsp" + latitude + "<br>";
            marker.title = name;
            marker.content = str;
            marker.on('mousedown', markerClick);
            mymap.add(marker);
            markers.push(marker);
       });
    }
    function delMarker(info){
        for(var i = 0;i< markers.length; i++){
            if(markers[i].title == info){
                mymap.remove(markers[i]);
                markers.splice(i,1);
                --i;
            }
        }
        if(infoWindow.getIsOpen()){
            infoWindow.close();
        }
    }
    function delAllMarker(){
        mymap.remove(markers);
        markers = [];
    }
    function boost(){
        mymap.zoomIn();
    }
    function reduce(){
        mymap.zoomOut();
    }
    function updateMarker(){
        marker.setPosition([108.761462, 34.452136]);
        mymap.setCenter([108.761462, 34.452136]);
    }
    mymap.on('click', function(e) {
        var lng = e.lnglat.getLng();
        var lat = e.lnglat.getLat();
        infoWindow.close();
    });
</script>
</body>
</html>
<think>好的,我需要帮助用户在Qt中集成高德地图的解决方案。根据用户提供的引用内容,我需要整理出几种同的方法,并给出具体的步骤和示例。首先,我需要确定用户的需求是什么。用户可能希望在自己的Qt应用程序中显示高德地图,或者使用高德地图的API来获取地图数据、静态地图,或者实现更复杂的功能如导航、地点搜索等。 接下来,我需要查看用户提供的引用内容。引用[1]提到了高德地图-Qt地图插件,这是一个开源项目,支持多平台,包括Windows、Linux、Android、iOS等,主要编程语言未明确说明,但可能涉及C++和QML。引用[2]和[3]是关于使用Qt QML通过高德地图的WebAPI获取静态地图的示例代码,需要配置API Key,并展示了如何集成到QML中。引用[4]提到在QT中使用QWebEngine控件显示高德地图,需要在pro文件中添加模块依赖。 用户的问题是如何在Qt中集成或连接高德地图,因此需要将这些引用中的信息整合成几种可行的解决方案,并给出每种方案的具体步骤和示例代码。 首先,方案一:使用高德地图-Qt地图插件(QtLocation插件)。根据引用[1],这个插件是专门为Qt设计的,支持多种平台。需要从GitHub下载源码,集成到项目中,然后在QML中导入插件并使用Map组件,配置高德地图的参数如API Key、缩放级别等。同时需要处理跨平台适配,比如Android可能需要额外配置权限和Gradle设置。 其次,方案二:通过WebAPI获取静态地图(QML实现)。引用[2]和[3]详细描述了如何通过高德地图的WebAPI获取静态地图图片,并在QML中显示。需要注册高德开发者账号获取API Key,使用Qt的网络模块发送HTTP请求,获取地图图片URL,然后在QML的Image组件中加载。示例代码可能包括QML文件中的Image元素和JavaScript函数处理请求。 第三,方案三:使用QWebEngineView加载高德地图网页。引用[4]提到在QT中使用QWebEngine控件,这可能涉及在Qt Widgets应用中嵌入一个浏览器控件,加载高德地图的JavaScript API页面。需要配置pro文件添加webenginewidgets模块,创建QWebEngineView实例,并加载高德地图的URL,可能需要处理JavaScript交互。 此外,还需要考虑同场景下的选择建议,比如需要动态交互地图的话,方案一或三更合适;如果只需要显示静态地图,方案二更简单。跨平台需求的话,方案一更优,而WebEngine方案可能有性能或兼容性问题。 在整合过程中,要确保每个步骤的准确性,比如如何配置API Key,如何在QML中导入插件,如何处理网络请求等。同时需要注意用户可能遇到的常见问题,比如API Key未配置导致的失败,跨平台编译问题,或者网络权限问题。 最后,生成相关问题,帮助用户深入理解,比如如何获取高德API Key,如何处理动态地图交互,跨平台适配问题等。这些问题应该覆盖用户可能进一步探索的方向。 总结起来,我需要将四个引用中的信息组织成三个清晰的解决方案,每个方案包括步骤、示例代码和注意事项,然后给出选择建议和相关问题。确保使用正确的中文表达,符合LaTeX格式要求,并自然添加引用标识。</think>以下是Qt集成高德地图的三种主流方案及详细实现步骤: --- ### 方案一:使用高德地图QtLocation插件(推荐动态交互) **步骤说明:** 1. **获取插件源码** 访问[高德地图Qt插件GitHub仓库](https://github.com/amap-qt)下载源码,将`AmapMaps`目录添加到项目依赖中[^1]。 2. **配置项目文件** 在`.pro`文件中添加插件依赖: ```qmake QT += location qml quick include(AmapMaps/AmapMaps.pri) ``` 3. **QML地图集成** ```qml import AmapMaps 1.0 Map { id: amap apiKey: "您的高德API_KEY" zoomLevel: 12 center: QtPositioning.coordinate(39.90469, 116.40717) // 北京坐标 } ``` **注意:** Android平台需在`AndroidManifest.xml`添加定位权限: ```xml <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> ``` --- ### 方案二:通过WebAPI获取静态地图(适合简单展示) **实现流程:** 1. **注册API Key** 登录[高德开放平台](https://lbs.amap.com),创建应用并获取Web服务API Key[^2]。 2. **QML网络请求实现** ```qml Image { id: staticMap source: "https://restapi.amap.com/v3/staticmap?location=116.481485,39.990464&zoom=10&size=400*300&key=YOUR_API_KEY" } ``` 3. **动态参数构建**(示例函数): ```qml function updateMap(lng, lat) { staticMap.source = `https://restapi.amap.com/v3/staticmap?location=${lng},${lat}&zoom=14&size=600*400&markers=mid,,A:${lng},${lat}&key=${apiKey}` } ``` --- ### 方案三:QWebEngineView嵌入网页版地图(快速原型开发) **操作步骤:** 1. **配置WebEngine模块** 在`.pro`文件中添加: ```qmake QT += webenginewidgets ``` 2. **C++端地图加载** ```cpp #include <QWebEngineView> QWebEngineView *mapView = new QWebEngineView(this); mapView->load(QUrl("https://uri.amap.com/map?p=116.481485,39.990464,15")); mapView->show(); ``` 3. **JavaScript交互**(示例): ```cpp mapView->page()->runJavaScript("AMap.event.addListener(map,'click',function(e){console.log(e.lnglat);});"); ``` --- ### 方案选择建议 | 场景 | 推荐方案 | 优势 | 局限 | |---------------------|----------|-------------------------------|--------------------------| | 需要地图交互功能 | 方案一 | 原生QML支持,手势操作流畅 | 需处理跨平台编译问题 | | 仅需静态地图展示 | 方案二 | 实现简单,资源消耗低 | 支持动态交互 | | 快速实现网页版功能 | 方案三 | 可直接使用高德JS API全部功能 | 应用体积增大,性能较低 | --- ### 常见问题解决 1. **地图显示** - 检查API Key是否配置正确(所有方案共用同一个Key) - Android平台确认网络权限已开启[^1] 2. **跨平台编译错误** - iOS需在`Info.plist`中添加`NSLocationWhenInUseUsageDescription`字段 - Windows需安装VC++ 2015运行时库 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值