webView中导入百度地图和设置样式


首先看效果图:
这里写图片描述

####怎样获取百度地图api
第一种方式:找到“百度地图api”
这里写图片描述

这里写图片描述

这里写图片描述

第二种方式:”百度地图生成器“
注意此方式生成的地图使用的是百度地图api1.1
这里写图片描述

####设置地图样式
博主使用的是用百度地图生成器生成的地图,可以先保存成html格式,查看地图是否需要改进

– 消除百度地图的logo

这里写图片描述
方法:使用Google浏览器打开刚刚保存的HTML,打开开发者模式(或者按F12)
这里写图片描述

添加样式消除logo

.BMap_cpyCtrl {
    display: none;
}

.anchorBL {
    display: none;
}

#####设置背景色
这里写图片描述
因为这个样式在百度地图api1.0中不起效,所以我把JavaScript换成了3.0

原js:

换成api3.0
 

#####设置地图的大小
这里设置充满屏幕,需要改动三个地方,是否还有其他方法不太清楚,但是博主是这样做的(可能我太菜了)
这里写图片描述
这里写图片描述
这里写图片描述

暂时博主就只设置这几个样式,最终效果图如下:
这里写图片描述

####使用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);
    }
}




    
    百度地图API自定义地图
    
    
    
    





最终效果图如下:
这里写图片描述