webView中匯入百度地圖和設定樣式
阿新 • • 發佈：2018-11-02
首先看效果圖：
怎樣獲取百度地圖api
第一種方式：找到“百度地圖api”
第二種方式：”百度地圖生成器“
注意此方式生成的地圖使用的是百度地圖api1.1
設定地圖樣式
博主使用的是用百度地圖生成器生成的地圖，可以先儲存成html格式，檢視地圖是否需要改進
- 消除百度地圖的logo
方法：使用Google瀏覽器開啟剛剛儲存的HTML，開啟開發者模式（或者按F12）
新增樣式消除logo
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none 設定背景色
因為這個樣式在百度地圖api1.0中不起效，所以我把JavaScript換成了3.0
原js:
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
換成api3.0
<script type="text/javascript"src="http://api.map.baidu.com/api?v=3.0&ak=SWxEiZYKTcujcC6rTY5MvBsWHETIlT97"> 設定地圖的大小
這裡設定充滿螢幕，需要改動三個地方，是否還有其他方法不太清楚，但是博主是這樣做的（可能我太菜了）
暫時博主就只設置這幾個樣式，最終效果圖如下：
使用webView載入百度地圖
這裡我使用Javafx中的webView元件，詳情可見：WebView元件概覽
目錄結構：
package work.javaee.maptest;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>百度地圖API自定義地圖</title>
<!--引用百度地圖API-->
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.iw_poi_title {
color: #CC5522;
font-size: 14px;
font-weight: bold;
overflow: hidden;
padding-right: 13px;
white-space: nowrap
}
.iw_poi_content {
font: 12px arial, sans-serif;
overflow: visible;
padding-top: 4px;
white-space: -moz-pre-wrap;
word-wrap: break-word
}
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}
body {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=3.0&ak=SWxEiZYKTcujcC6rTY5MvBsWHETIlT97"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
</head>
<body>
<!--百度地圖容器-->
<div style="width:100%;height:100%;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
//建立和初始化地圖函式
function initMap() {
createMap();//建立地圖
setMapEvent();//設定地圖事件
addMapControl();//向地圖新增控制元件
}
//建立地圖函式＿
function createMap() {
var map = new BMap.Map("dituContent");//在百度地圖容器中建立一個地圖
var mapStyle = {style: "dark"};
map.setMapStyle(mapStyle);
var point = new BMap.Point(115.915423, 28.681691);//定義一箇中心點座標
map.centerAndZoom(point, 7);//設定地圖的中心點和座標並將地圖顯示在地圖容器
window.map = map;//將map變數儲存在全域性
}
//地圖事件設定函式
function setMapEvent() {
map.enableDragging();//啟用地圖拖拽事件，預設啟用(可不寫)
map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小
map.enableDoubleClickZoom();//啟用滑鼠雙擊放大，預設啟用(可不寫)
map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖
}
//地圖控制元件新增函式：
function addMapControl() {
//向地圖中新增縮放控制元件
var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
map.addControl(ctrl_nav);
//向地圖中新增縮圖控制元件
var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 0});
map.addControl(ctrl_ove);
//向地圖中新增比例尺控制元件
var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
map.addControl(ctrl_sca);
}
initMap();//建立和初始化地圖
</script>
</html>最終效果圖如下：
