首先看效果图:
####怎样获取百度地图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"></script>
#####设置地图的大小
这里设置充满屏幕,需要改动三个地方,是否还有其他方法不太清楚,但是博主是这样做的(可能我太菜了)
暂时博主就只设置这几个样式,最终效果图如下:
####使用webView加载百度地图
这里我使用Javafx中的webView组件,详情可见:WebView组件概览
目录结构:
package work.javaee.maptest;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class Main extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
//设置窗体布局
BorderPane borderPane = new BorderPane();
//创建scene
Scene scene = new Scene(borderPane);
//创建WebView和WebEngine对象
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
//使用类加载器加载本地HTML代码
webEngine.load(ClassLoader.getSystemClassLoader().getResource("html/map.html").toExternalForm());
borderPane.setCenter(webView);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
<!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=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO"></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>
最终效果图如下: