QWebView + JS 实现简单地图

最新推荐文章于 2024-07-29 14:13:30 发布

Newtown-Gao

最新推荐文章于 2024-07-29 14:13:30 发布

阅读量1.8k

点赞数

分类专栏： Qt

本文链接：https://blog.csdn.net/fuyunzhishang1/article/details/43952011

版权

Qt 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍如何结合QWebView组件与JavaScript技术，在Qt应用中实现一个简单地图的功能。通过加载外部地图API，利用JavaScript交互，实现了地图的显示和基本操作。

摘要由CSDN通过智能技术生成

直接上代码：

map.html

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"></span>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        #l-map {
            height: 100%;
            width: 78%;
            float: left;
            border-right: 2px solid #bcbcbc;
        }

        #r-result {
            height: 100%;
            width: 20%;
            float: left;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <title>百度地图的Hello, World</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

  /*  var map = new BMap.Map("allmap");            // 创建Map实例
    map.enableScrollWheelZoom();                            //启用滚轮放大缩小
    map.enableKeyboard();								//启用键盘控制
    var point = new BMap.Point(123.452155, 29.482552);    // 创建点坐标
    map.centerAndZoom("上海", 8);                     // 初始化地图,设置中心点坐标和地图级别。

    var marker1 = new BMap.Marker(new BMap.Point(123.452155, 29.482552));  // 创建标注
    map.addOverlay(marker1);
    var infoWindow1 = new BMap.InfoWindow("我在这哦!");
    marker1.addEventListener("click", function () { this.openInfoWindow(infoWindow1); });//给mark添加鼠标单击事件
    */
    var map = new BMap.Map("allmap");            // 创建Map实例  
    initialize();
    function location1(s1, s2) {					//根据经纬度定位
        map.clearOverlays();
        var point = new BMap.Point(s1, s2);
        var marker2 = new BMap.Marker(point); // 创建标注
        marker2.enableDragging();
        var title = "经度：" + marker2.getPosition().lng + " " + "纬度 :" + marker2.getPosition().lat;
        marker2.setTitle(title);

        var menu = new BMap.ContextMenu();
        menu.addItem(new BMap.MenuItem("点我", function () { alert("You are welcome !");}));
        marker2.addContextMenu(menu);

        map.addOverlay(marker2);
        map.centerAndZoom(point, 10);
    }

     function locationBycity(ss) {					//查找某个城市
		initialize();
        map.clearOverlays();
        map.centerAndZoom(ss);
		return true;
    }

    var local = new BMap.LocalSearch(map, {
        renderOptions: { map: map, autoViewport: true }
    });

    function findCity(name) {		//查找某个城市
        local.search(name);
    }
	
	function lookBy3D(lng,lat,city) {			//显示城市3D图形
	    map.clearOverlays();
		map.setCurrentCity(city);  //设置当前城市
		var point = new BMap.Point(lng, lat);  // 创建点坐标
		map.centerAndZoom(point, 18);                 // 初始化地图，设置中心点坐标和地图级别
		
		map.setMapType(BMAP_PERSPECTIVE_MAP);     //修改地图类型为3D地图
	}

    function initialize() {
        //---------------------------------------------基础示例---------------------------------------------  
        //map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时，即可设置中心点和地图缩放级别。  
        map.centerAndZoom("上海", 13);                     // 初始化地图,设置中心点坐标和地图级别。  
        map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动  

        //---------------------------------------------鼠标右键操作---------------------------------------------  
        var menu = new BMap.ContextMenu(); //右键菜单  
        var txtMenuItem = [  //右键菜单项目  
            {
                text: '放大',
                callback: function () { map.zoomIn() }
            },
            {
                text: '缩小',
                callback: function () { map.zoomOut() }
            },
            {
                text: '放置到最大级',
                callback: function () { map.setZoom(18) }
            },
            {
                text: '查看全国',
                callback: function () { map.setZoom(5) }
            },
            {
                text: '在此添加标注',
                callback: function (p) {
                    var marker = new BMap.Marker(p), px = map.pointToPixel(p);
                    var menu1 = new BMap.ContextMenu();
                    menu1.addItem(new BMap.MenuItem("删除", function () { map.removeOverlay(marker); }));
                    marker.addContextMenu(menu1);
                    map.addOverlay(marker);
                }
            }
        ];


        for (var i = 0; i < txtMenuItem.length; i++) {
            menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)); //菜单添加项目  
            if (i == 1 || i == 3) {
                menu.addSeparator();  //添加右键菜单的分割线  
            }
        }

        map.addContextMenu(menu);

        //---------------------------------------------改变鼠标样式---------------------------------------------  
        //需要自己制作。cur格式的静态光标  
        //map.setDefaultCursor("url('01.cur')");        //设置地图默认的鼠标指针样式   
        //map.setDraggingCursor("url('03.cur')");         //设置地图拖拽时的鼠标指针样式  
    }
</script>

MainWidow.cpp

#include "mainwindow.h"

#include "ui_mainwindow.h"

#include <QDebug>

#include <QWebFrame>

MainWindow::MainWindow(QWidget *parent) :

    QMainWindow(parent),

    ui(new Ui::MainWindow)

    ui->setupUi(this);

    setWindowTitle("地图");

    init();

MainWindow::~MainWindow()

    delete ui;

void MainWindow::init()         //加载地图html文档

    QString path = QString("file:///%1/map.html").arg(QApplication::applicationDirPath());

    ui->webView->load(QUrl(path));

    qDebug()<<Q_FUNC_INFO<<path;

void MainWindow::on_pushButton_clicked()    //经纬度定位

    QString lng = ui->lng_lineEdit->text();

    QString lat = ui->lat_lineEdit->text();

    QString method = QString("location1(\"%1\", \"%2\")").arg(lng).arg(lat);

    QVariant var= ui->webView->page()->mainFrame()->evaluateJavaScript(method);

    qDebug()<<Q_FUNC_INFO<<var.toBool();

void MainWindow::on_pushButton_2_clicked()  //城市名查找

    QString city = ui->city_le->text();

    QString method = QString("findCity(\"%1\")").arg(city);

    ui->webView->page()->mainFrame()->evaluateJavaScript(method);

void MainWindow::on_comboBox_currentTextChanged(const QString &arg1)    //显示城市的3D图形

    if(ui->comboBox->currentIndex() == 0)

        return;

    QString lng = "116.404";

    QString lat = "39.915";

    if(ui->comboBox->currentIndex()==2)

        lng = "121.5075";

        lat = "31.245199";

    else if(ui->comboBox->currentIndex() == 3)

        lng = "113.330995";

        lat = "23.112229";

    QString method = QString("lookBy3D(\"%1\",\"%2\",\"%3\")").arg(lng).arg(lat).arg(arg1);

    QVariant var= ui->webView->page()->mainFrame()->evaluateJavaScript(method);

    qDebug()<<Q_FUNC_INFO<<lng<<lat<<arg1;

Newtown-Gao

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录