QT5.5.1 QWebView中嵌入百度地图，交互添加图标

最新推荐文章于 2022-05-11 23:16:04 发布

御风@户外

最新推荐文章于 2022-05-11 23:16:04 发布

阅读量1.2k

点赞数 1

分类专栏： qt

本文链接：https://blog.csdn.net/weixin_43172531/article/details/107044981

版权

qt 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

代码

#pragma once

#include <QWidget>
#include <QtWebKitWidgets/QWebView>
#include "ui_baiduwebmapwidget.h"

//http://api.map.baidu.com/lbsapi/getpoint/  获得点的坐标

class BaiduMapView : public QWebView
{
	Q_OBJECT
public:
	explicit BaiduMapView(QWidget* parent = 0);
	virtual ~BaiduMapView();
protected:
	void resizeEvent(QResizeEvent *re);
};

class BaiduWebMapWidget : public QWidget
{
	Q_OBJECT
public:
	void MapNode(const std::string &lon_str, const std::string &lat_str);
public:
	BaiduWebMapWidget(QWidget *parent = Q_NULLPTR);
	virtual ~BaiduWebMapWidget();
private:
	BaiduMapView* m_pWebView;    // QWebView对象
private slots:
	void onPageLoadFinished(bool arg);    // 地图加载完毕槽函数
public slots:
	void onMapClickCallback();    // 点击地图时槽函数，必须是public的
	void onMapClicked(QString msg);
private:
	Ui::BaiduWebMapWidget ui_;
};

#include "baiduwebmapwidget.h"
#include <QMessageBox>
#include <QFile>
#include <QFileInfo>
#include <QResizeEvent>
#include <QtWebKitWidgets/QWebFrame>
#include "yufenglib/inc/global_data.h"

//http://lbsyun.baidu.com/apiconsole/key#/home  获得开发者key的页面

BaiduWebMapWidget::BaiduWebMapWidget(QWidget *parent)
	: QWidget(parent)
{
	ui_.setupUi(this);
	m_pWebView = new BaiduMapView(this);
	//m_pWebView->show();
	//m_pWebView->showMaximized();
	connect(m_pWebView, SIGNAL(loadFinished(bool)), this, SLOT(onPageLoadFinished(bool)));
	connect(m_pWebView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(addObjectToJs()));
	//
	m_pWebView->settings()->setAttribute(QWebSettings::JavascriptEnabled, true);
	m_pWebView->settings()->setAttribute(QWebSettings::JavaEnabled, true);
	m_pWebView->settings()->setAttribute(QWebSettings::JavascriptCanOpenWindows, true);
	m_pWebView->settings()->setAttribute(QWebSettings::JavascriptCanAccessClipboard, true);
	m_pWebView->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
	m_pWebView->settings()->setAttribute(QWebSettings::LocalContentCanAccessRemoteUrls, true);
	m_pWebView->settings()->setAttribute(QWebSettings::LocalContentCanAccessFileUrls, true);
	m_pWebView->settings()->setAttribute(QWebSettings::JavascriptCanCloseWindows, true);
	m_pWebView->settings()->setAttribute(QWebSettings::AutoLoadImages, true);
	m_pWebView->settings()->setAttribute(QWebSettings::PluginsEnabled, true);
	//
	m_pWebView->settings()->setAttribute(QWebSettings::CSSGridLayoutEnabled, true);

	QString file_name = (yf::global_data::get_config_folder() + "/baiduwebmap_test.html").c_str();
	//
	QFileInfo file(file_name);
	QString url = "file:///";
	url += file.absoluteFilePath();
	m_pWebView->setUrl(QUrl(url));
}

BaiduWebMapWidget::~BaiduWebMapWidget()
{
}

void BaiduWebMapWidget::onPageLoadFinished(bool arg)
{
	m_pWebView->page()->mainFrame()->evaluateJavaScript(QString("loadfinishtip()"));    // 加载完成后，执行页面js函数loadfinishtip    
	m_pWebView->page()->mainFrame()->addToJavaScriptWindowObject("Dialog", this);    // js中添加窗口对象，用于回调Qt槽函数

	//114.437911, 30.532664
	QString fun = QString("doLocal(\"%1\",\"%2\");").arg(114.437911).arg(30.532664);
	m_pWebView->page()->mainFrame()->evaluateJavaScript(fun);
}

void BaiduWebMapWidget::onMapClickCallback()
{

}

void BaiduWebMapWidget::onMapClicked(QString msg)
{
	QMessageBox::information(NULL, QStringLiteral("经纬度"), msg);
}

void BaiduWebMapWidget::MapNode(const std::string &lon_str, const std::string &lat_str)
{
	if (lon_str.length() > 0 && lat_str.length() > 0)
	{
		//114.437911, 30.532664
		QString fun = QString("doLocal(\"%1\",\"%2\");").arg(lon_str.c_str()).arg(lat_str.c_str());
		m_pWebView->page()->mainFrame()->evaluateJavaScript(fun);
	}
}

BaiduMapView::BaiduMapView(QWidget* parent /*= 0*/)
	:QWebView(parent)
{

}

BaiduMapView::~BaiduMapView()
{

}

void BaiduMapView::resizeEvent(QResizeEvent *re)
{
	QWebView::resizeEvent(re);

	setFixedSize(re->size());
}

html代码：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=l？？bqlFL？？？？2NHdOBHDcq5g"></script>
	<title>百度地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");     // 创建Map实例
map.setCurrentCity("武汉",13);          // 设置地图显示的城市 此项是必须设置的
map.centerAndZoom(new BMap.Point(114.437911, 30.532664), 13);  // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
	scale: 0.6,//图标缩放大小		
	strokeColor:'#fff',//设置矢量图标的线填充颜色		
	strokeWeight: '2',//设置线宽	
	});	
var icons = new BMap.IconSequence(sy, '10', '30');	

var polyline;
var flag = 0;
function  drowLine(point)
{
	if (flag)
	{
		//alert(flag);
		polyline.setPath(point);
	}
	else
	{
		   flag = 1;
		   polyline =new BMap.Polyline(point, {
		   //enableEditing: false,//是否启用线编辑，默认为false
		   //enableClicking: true,//是否响应点击事件，默认为true
		   //icons:[icons],
		   strokeWeight:'3',//折线的宽度，以像素为单位
		   strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
		   strokeColor:"#18a45b" //折线颜色
		});
		bm.addOverlay(polyline);
	}
}

var marker;
    //坐标转换完之后的回调函数
    translateCallback = function (data){
      if(data.status === 0) {
		if (marker)
		{
			marker.setPosition(data.points[0]);
			poisArray.push(data.points[0]);
			drowLine(poisArray);
			if ( poisArray.length >= 10000)	 //防止内存一直增加，会卡，大于1w条时，清空一下
			{
				poisArray=[];
				poisArray.push(data.points[0]);
			}
		}
		else 
		{
			poisArray.push(data.points[0]);
			marker = new BMap.Marker(data.points[0]);
			bm.addOverlay(marker);
		}
        bm.setCenter(data.points[0]);
      }
    }
var polylineAttr = [];
var poisArray = [];
function doLocal(longitude, latitude)  //给qt调用的接口
{
	var point= new BMap.Point(longitude, latitude);
	var marker = new BMap.Marker(point); // 创建点
	map.addOverlay(marker);                 // 加载标注
	map.setCenter(point); //设置中心点
	//var OPoint = new BMap.Point(longitude,latitude);
	//map.addOverlay(OPoint);                 // 加载标注
	//var convertor = new BMap.Convertor();
	//var pointArr = [];
	//pointArr.push(OPoint);
	//convertor.translate(pointArr, 1, 5, translateCallback);	
}    

    function loadfinishtip() {
        //alert("amap load finish.");
    }

    map.on('click', function(e) {
        var lng = e.lnglat.getLng();
        var lat = e.lnglat.getLat();
        Dialog.onMapClicked(lng + "," + lat);    // 调用Qt槽函数
    });
</script>