Java JxBrowser Google Maps Side Project

內容目錄

Preface

原本是看到JxMaps這個套件

結果2020的時候就EOF了

然後開發團隊teamdev就專心做JxBrowser這個套件

萬幸這個套件就有Google Maps的教學

當然這個套件是commercial的

不過有30 Day Trial可以用

算有良心

直接進到官網就可以註冊

https://www.teamdev.com/jxbrowser

email會收到teamdev發來的license key

Resource Download

因為我是純vim派的

故我compile需要的jar都要自己附上

所以我會很需要整個專案所需的jar files

https://jxbrowser-support.teamdev.com/release-notes/2022/v7-25.html

到JxBrowser最新release note版本上去找整個resource

因為我主要應用是Google Maps

所以我需要的就只有jxbrowser-7.25.jar跟jxbrowser-swing-7.25.jar這兩個檔案

不過還是把整個JxBrowser zip載下來了

Google Maps Example Setup

官方寄給你30 days trial會要你試Swing建HTML模板跟license key正不正常

我直接給你試google maps能不能跑

https://jxbrowser-support.teamdev.com/docs/tutorials/maps.html

參考官方這篇google maps example

注意兩個重點即可

  1. 要到Google Cloud Platform註冊Google Maps JavaScript API
  2. 官方的google maps source code要自己把license key放進去

Google Cloud Platform Sign Up Key

要注意是啟用Google Maps JavaScript API

不是啟用Google Static Maps API

static maps比較麻煩還要註冊signature

Google Cloud Platform新增project後

點左邊的menu找到APIs & Services

然後選擇Enable APIs & Services

因為google maps API通常預設不會開啟

所以要自己將其enable

Menu→APIs & Services → Enabled APIs & Services

進去後即可以Enabled APIs & Services

Maps的功能就在row 1

點View All就可以看到全部的APIs了

點進你想要enable的API

如果還沒啟用過是顯示可以enable

但我已經enable過了所以是顯示manage

回到APIs &Services

可以找到Enabled APIs & Services

會顯示你所有已經enabled的APIs

我們點進Maps JavaScript API

沒錯就是Filter下面的

確認該API已經有Enable起來

然後到Credentials

選擇哪一個APIs

這裡選擇Maps JavaScript API

接著按右邊的Create Credentials

會出現下拉選單

我們要建的是API Key

成功建出來的話就會顯示你的key是多少

然後就可以看到存在這把API key了

點進該key的name進行編輯

name可以自行改什麼都可以

比較重要的是下面restrict key

你想要讓這把key只做什麼事情

在API restrictions下面選擇Restrict Key

然後下面下拉選單選要針對什麼API

像我這把key就只回應Maps JavaScript API的request

到這裡save起來這把key就建成功了

JxBrowser License Key

https://jxbrowser-support.teamdev.com/docs/guides/introduction/licensing.html#adding-the-license-to-a-project

參考官方的放license

直接把license key放進code裡面

透過JxBrowser System.setProperty設定

System.setProperty("jxbrowser.license.key", "your_license_key");

以及放進有call Engine Object的code裡面

Engine engine = Engine.newInstance(
        EngineOptions.newBuilder(HARDWARE_ACCELERATED)
                .licenseKey("your_license_key")
                .build());

Google Maps Example via JxBrowser

主要準備兩個檔案

  1. maps.html
  2. JxBrowser GoogleMaps Code.java

可以看到下圖是JxBrowser的架構

如果想要call Google Maps API

其實是透過HTML file call Google Maps JavaScript API

render好整個HTML file

再把HTML file放進Java swing JFrame裡面

所以參照官方Google Maps Example寫maps.html

API_Key的地方要填剛才在Google Cloud Platform申請的Google Maps JavaScript API

<!-- maps.html -->
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
   <style type="text/css">
       html { height: 100% }
       body { height: 100%; margin: 0; padding: 0 }
       #map-canvas { height: 100% }
   </style>
   <script type="text/javascript"
           src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
   <script type="text/javascript">
     var map;
     function initialize() {
       var mapOptions = {
         center: new google.maps.LatLng(48.209331, 16.381302),
         zoom: 4
       };
       map = new google.maps.Map(
              document.getElementById("map-canvas"), mapOptions);
     }
     google.maps.event.addDomListener(window, 'load', initialize);

   </script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

然後是call google maps的source code

要注意要把license key也放進去

//GoogleMaps.java
import static com.teamdev.jxbrowser.engine.RenderingMode.*;

import com.teamdev.jxbrowser.browser.Browser;
import com.teamdev.jxbrowser.engine.Engine;
import com.teamdev.jxbrowser.engine.EngineOptions;
import com.teamdev.jxbrowser.view.swing.BrowserView;
import java.awt.BorderLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class GoogleMaps {

    private static final int MIN_ZOOM = 0;
    private static final int MAX_ZOOM = 21;
    private static final String setMarkerScript =
            "var myLatlng = new google.maps.LatLng(48.4431727,23.0488126);\n" +
                    "var marker = new google.maps.Marker({\n" +
                    "    position: myLatlng,\n" +
                    "    map: map,\n" +
                    "    title: 'Hello World!'\n" +
                    "});";

    /**
     * In map.html file default zoom value is set to 4.
     */
    private static int zoomValue = 4;

    public static void main(String[] args) {
        //license_key replace to your license key
	System.setProperty("jxbrowser.license.key", "your_license_key");

        EngineOptions options = EngineOptions.newBuilder(HARDWARE_ACCELERATED).licenseKey("your_license_key").build();
        Engine engine = Engine.newInstance(options);
        Browser browser = engine.newBrowser();

        SwingUtilities.invokeLater(() -> {
            BrowserView view = BrowserView.newInstance(browser);

            JButton zoomInButton = new JButton("Zoom In");
            zoomInButton.addActionListener(e -> {
                if (zoomValue < MAX_ZOOM) {
                    browser.mainFrame().ifPresent(frame ->
                            frame.executeJavaScript("map.setZoom(" +
                                    ++zoomValue + ")"));
                }
            });

            JButton zoomOutButton = new JButton("Zoom Out");
            zoomOutButton.addActionListener(e -> {
                if (zoomValue > MIN_ZOOM) {
                    browser.mainFrame().ifPresent(frame ->
                            frame.executeJavaScript("map.setZoom(" +
                                    --zoomValue + ")"));
                }
            });

            JButton setMarkerButton = new JButton("Set Marker");
            setMarkerButton.addActionListener(e ->
                    browser.mainFrame().ifPresent(frame ->
                            frame.executeJavaScript(setMarkerScript)));

            JPanel toolBar = new JPanel();
            toolBar.add(zoomInButton);
            toolBar.add(zoomOutButton);
            toolBar.add(setMarkerButton);

            JFrame frame = new JFrame("Google Maps");
            frame.add(toolBar, BorderLayout.SOUTH);
            frame.add(view, BorderLayout.CENTER);
            frame.setSize(800, 500);
            frame.setVisible(true);

            browser.navigation().loadUrl("file:///Users/me/map.html");
        });
    }
}

loadUrl的話建議是放absolute path

都儲存完之後就compile

要把JxBrowser的jar file也附上classpath

javac -d . -classpath .:jxbrowser-7.25.jar:jxbrowser-swing-7.25.jar GoogleMaps.java

run it

java -classpath .:jxbrowser-7.25.jar:jxbrowser-swing-7.25.jar com.teamdev.jxbrowser.GoogleMaps

Result

都成功的話就可以看到結果

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。