一 、首先，需要在自己的map.html文件内添加：
var bdmapcfg;// 切换地图类型function satemap(){//百度地图api配置bdmapcfg = {'home':'../../baidumapv2/', //api主目录'imgext':'.jpg', //瓦片地图后缀'tiles_dir':'../../baidumapv2/satellite' //瓦片图目录};bdmapcfg.tiles_dir="../../baidumapv2/satellite";loadJScript();}function normalmap(){//百度地图api配置bdmapcfg = {'home':'../../baidumapv2/', //api主目录'imgext':'.png', //瓦片地图后缀'tiles_dir':'../../baidumapv2/roadmap' //瓦片图目录};bdmapcfg.tiles_dir="../../baidumapv2/roadmap";loadJScript();}//百度地图api功能function loadJScript(){var script = document.createElement("script");script.type = "text/javascript";script.src = "../../baidumapv2/baidumap_offline_v2_0921_min.js";document.body.appendChild(script);//异步加载增加代码window.BMap=window.BMap||{};window.BMap.apiLoad = function(){delete window.BMap.apiLoad;if(typeof init == "function"){init();}}}function init(){var lon = 116.403694,lat = 39.914271;var onlinemap = new OnlineMap(lon,lat,"map_demo");onlinemap.init();}//异步加载地图window.onload = loadJScript;
二、QT中添加两个QRadioButton，用来切换地图类型：
connect(ui->radioButton,SIGNAL(clicked(bool)),this,SLOT(checkMapType()));connect(ui->radioButton_2,SIGNAL(clicked(bool)),this,SLOT(checkMapType()));
void MainWindow::checkMapType(){if(ui->radioButton->isChecked()){QString command = QString("normalmap()");ui->widget->page()->runJavaScript(command);}else if(ui->radioButton_2->isChecked()){QString command = QString("satemap()");ui->widget->page()->runJavaScript(command);}}
三、最后还需要添加一个js文件：
mapControl.js :
function OnlineMap( lon, lat, dom, mapType) {debugger;var isShow = false;var t1;//地图上加载一个要素function addCircle() {remove_overlay();var SW = new BMap.Point(lon - 0.022146, lat - 0.018801);var NE = new BMap.Point(lon + 0.022317, lat + 0.018025);groundOverlayOptions = {opacity : 0.3,displayOnMinLevel : 13,displayOnMaxLevel : 18}// 初始化GroundOverlayvar groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE),groundOverlayOptions);// 设置GroundOverlay的图片地址groundOverlay.setImageURL("images/leida_white.gif");map.addOverlay(groundOverlay);}//清除覆盖物function remove_overlay() {map.clearOverlays();}//自动刷新要素信息function refreshFlyInfo() {var level = map.getZoom();if (level < 13) {//remove_overlay();isShow = false;//window.clearInterval(t1);} else {isShow = true;}if (isShow) {addCircle();}}OnlineMap.prototype.init = function(mapType) {map = "";map = new BMap.Map(dom,{enableMapClick:false}); // 创建Map实例point = new BMap.Point(lon, lat);map.centerAndZoom(point, 18);map.setMaxZoom(21);if(mapType){map.setMapType(mapType);}map.enableScrollWheelZoom(); //启用滚轮放大缩小t1 = window.setInterval(function() {refreshFlyInfo();}, 3000);map.addEventListener("zoomend", function() {window.clearInterval(t1);if (this.getZoom() < 13) {//remove_overlay();} else {for (var i = 0; i < map.getOverlays().length; i++) {map.getOverlays()[i].show();}t1 = window.setInterval(function() {refreshFlyInfo();}, 1000);addCircle();}});addCircle();}//显示点图标和文字信息OnlineMap.prototype.pointsInfo = function(flyInfo) {addCircle();if (flyInfo.length > 0) {for (var i = 0; i < flyInfo.length; i++) {var point1 = new BMap.Point(Number(flyInfo[i].x),Number(flyInfo[i].y));var marker = new BMap.Marker(point1); // 创建标注marker.setTop(true);var icon = new BMap.Icon("images/fly.png",new BMap.Size(80, 80));var iconshaow = new BMap.Icon("/images/fly_shadow.png", new BMap.Size(50, 50));marker.setIcon(icon);marker.setZIndex(100);marker.setShadow(iconshaow);if (map.getZoom() >= 13) {map.addOverlay(marker); // 将标注添加到地图中}var label = new BMap.Label(flyInfo[i].message, {offset : new BMap.Size(20, -10)});marker.setLabel(label);}}}}
对了，别忘了在map.html中添加: 这是加载mapControl.js的路径
<script type="text/javascript" src="../mapControl.js"></script>
