Question

我正在尝试在 JavaFx-WebView 上加载 google map ，并且除我在html文件中编码的html正文的背景颜色外，它什么都不显示。我也在Google搜索上尝试了一些示例，所有结果都比较旧。没有一个有效。 我的Java版本是“ 1.8.0_121”

我编写了一个html文件并运行它。它成功加载了谷歌地图。然后，我使用webEngine.load（“ path”）方法将html文件加载到webview。除了背景色，它什么也没显示。

之后，我尝试了 http://rterp.github.io/GMapsFX

运行ClusteredMainApp.java（输入我的Google api密钥）
控制台输出为：
“ hier”
“ clustererimages / m”
“称为隐藏路线”
“ loadMapLibrary”
“ loadMapLibrary完成”
“ initMap”
“ LatLong：（47.606189，-122.33584200000001）”
“ netscape.javascript.JSException：错误：Google Maps JavaScript API不支持此浏览器。（undefined，0）”

我也找不到针对此错误的任何解决方案

HTML文件

CSS：

#map_canvas { height: 100%; background-color: blue; }

javascript：

function initialize() {
                var latlng = new google.maps.LatLng(37.39822, -121.9643936);
                var myOptions = {
                    zoom: 14,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false,
                    navigationControl: false,
                    streetViewControl: false,
                    backgroundColor: "#666970"
                };

                document.geocoder = new google.maps.Geocoder();
                document.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

html：

<body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
   </body>

JavaFX：

public class WebMap extends Application {

    @Override public void start(Stage stage) {
        // create web engine and view
        final WebView webView = new WebView();
        final WebEngine webEngine = webView.getEngine();
        webEngine.load(getClass().getResource("WebMap.html").toString());
        // create scene
        stage.setTitle("Web Map");
        Scene scene = new Scene(webView,1000,700, Color.web("#666970"));
        stage.setScene(scene);
        // show stage
        stage.show();
    }

    public static void main(String[] args){
        Application.launch(args);
    }
}

Answer 1

如果您想使用GMapsFX，则可以从链接中下载示例代码。

如果您仔细看，您会发现lib拥有一个类GoogleMapView，其中包含了自己的WebView

GMapsFX中的一些代码

public class GoogleMapView extends AnchorPane {

private static final Logger LOG = LoggerFactory.getLogger(GoogleMapView.class);

protected static final String GOOGLE_MAPS_API_LINK = "https://maps.googleapis.com/maps/api/js?v=3.exp";
protected static final String GOOGLE_MAPS_API_VERSION = "3.exp";

private boolean usingCustomHtml;

protected String language;
protected final String region;
protected String key;
protected WebView webview; <-- Own WebView
protected JavaFxWebEngine webengine;
protected boolean initialized = false;
protected final CyclicBarrier barrier = new CyclicBarrier(2);
protected final List<MapComponentInitializedListener> mapInitializedListeners = new ArrayList<>();
protected final List<MapReadyListener> mapReadyListeners = new ArrayList<>();
protected GoogleMap map;
protected DirectionsPane direc;
protected boolean disableDoubleClick = false;

因此，如果您想使用该库，则不应创建自己的WebView。

您可以从示例开始

import com.lynden.gmapsfx.GoogleMapView;
import com.lynden.gmapsfx.javascript.event.GMapMouseEvent;
import com.lynden.gmapsfx.javascript.event.UIEventType;
import com.lynden.gmapsfx.javascript.object.GoogleMap;
import com.lynden.gmapsfx.javascript.object.LatLong;
import com.lynden.gmapsfx.javascript.object.MapOptions;
import com.lynden.gmapsfx.javascript.object.MapTypeIdEnum;
import java.net.URL;
import java.text.DecimalFormat;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.web.WebView;

public class LatLongFXMLController implements Initializable {

    @FXML
    private Label latitudeLabel;

    @FXML
    private Label longitudeLabel;

    @FXML
    private GoogleMapView googleMapView;

    private GoogleMap map;

    private DecimalFormat formatter = new DecimalFormat("###.00000");

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        googleMapView.addMapInitializedListener(() -> configureMap());
    }

    protected void configureMap() {
        MapOptions mapOptions = new MapOptions();

        mapOptions.center(new LatLong(47.6097, -122.3331))
                .mapType(MapTypeIdEnum.ROADMAP)
                .zoom(9);
        map = googleMapView.createMap(mapOptions, false);

        map.addMouseEventHandler(UIEventType.click, (GMapMouseEvent event) -> {
            LatLong latLong = event.getLatLong();
            latitudeLabel.setText(formatter.format(latLong.getLatitude()));
            longitudeLabel.setText(formatter.format(latLong.getLongitude()));
        });

    }
}

Answer 2

Google Maps API放弃了对旧版浏览器的支持，这开始导致“ Google Maps JavaScript API不支持该浏览器”。错误。查看https://developers.google.com/maps/documentation/javascript/releases和https://developers.google.com/maps/documentation/javascript/versions。

您使用的库正在使用3.exp版（实验版）。

在更新的Java版本上运行可以解决此问题（目前）。

Google Map的javascript版本是否可以在JavaFx-WebView上使用

2 个答案: