在 javaFX 桌面应用程序的谷歌地图中显示标记答案

【问题标题】：show marker in a google map in javaFX desktop app在 javaFX 桌面应用程序的谷歌地图中显示标记
【发布时间】：2014-05-25 13:22:50
【问题描述】：

我有一个关于 JavaScript 和 GoogleMaps 的问题！

我正在尝试加载谷歌地图并在 JavaFX 应用程序中显示驱动程序的位置。我对 JavaScript == null 的了解。我有一个 WebView、一个组合框和一个按钮。该按钮显示所选驱动程序在 ComboBox 中的位置。

我可以显示地图和第一个标记，但我不能显示其他标记，完美的方法是只能显示一个或（如果所选项目是“全部”）显示所有司机。

这是我的代码：

JavaFX 文件：

public class MapController  implements Initializable{

@FXML
Button changeConductorButton;

@FXML
ComboBox<String> conductorComboBox;

@FXML
WebView mapaWebView;

WebEngine engine;

double lat;
double lon;
@Override
public void initialize(URL arg0, ResourceBundle arg1) {
    fillComboBoxConductor();
    final URL urlGoogleMaps = getClass().getResource("googlemapscript.html");
    engine = mapaWebView.getEngine();
    lat = 22.46589;
    lon =   -22.35939;
    engine.getLoadWorker().stateProperty().addListener(
            new ChangeListener<State>() {
                public void changed(ObservableValue ov, State oldState, State newState) {
                    if (newState == Worker.State.SUCCEEDED) {
                        engine.executeScript("" + 
                                "window.lat = " + lat + ";" +
                                "window.lon = " + lon + ";" +
                                "document.goToLocation(window.lat, window.lon);"
                                );
                    }
                }
            });

    engine.setJavaScriptEnabled(true);
    engine.load(urlGoogleMaps.toExternalForm());
}

private void fillComboBoxConductor() {
    //code to fill ComboBox
}

@FXML
private void changeConductor(){
    lat = lat+5;
    lon = lon + 5;
    engine = mapaWebView.getEngine();
    engine.executeScript("addMarker("+lat+","+lon+");");
    System.out.println("added marker");
}

}

还有我的 hmtl 文件

    <!DOCTYPE html>
    <html>
    <head>
<title>Java-Buddy: Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
    #mapcanvas {
        height: 600px;
        width: 100%
    }
    </style>
    </head>

<body>
    <h1>Java-Buddy: Google Maps</h1>
    <div id="mapcanvas">

        <script type="text/javascript">
            document.map = new google.maps.Map(document
                    .getElementById("mapcanvas"));
            var latlng = new google.maps.LatLng(35.857908, 10.598997);
            var Options = {
                zoom : 15,
                center : latlng,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("mapcanvas"),
                    Options);
            //var carMarkerImage = new google.maps.MarkerImage('resources/images/car.png');
            var marker = new google.maps.Marker({
                position : new google.maps.LatLng(35.857908, 10.598997),
                map : map,
                draggable : false,
                //icon: carMarkerImage,
                title : "",
                autoPan : true

            });
            var nombreconductor = "Victor"
            var infobulle = new google.maps.InfoWindow({
                content : nombreconductor
            });
            google.maps.event.addListener(marker, 'mouseover', function() {
                infobulle.open(map, marker);
            });


            document.goToLocation = function(x, y) {
                alert("goToLocation, x: " + x + ", y:" + y);
                var latLng = new google.maps.LatLng(x, y);
                marker.setPosition(latLng);
                map.setCenter(latLng);
            }


            // Function for adding a marker to the page.
           function addMarker(x,y) {
            var latLng2 = new google.maps.LatLng(x, y);
            marker.setPosition(latLng2);
        }

        </script>


    </div>
</body>
</html>'

现在我正在尝试同时显示多个标记，我有一个数组，我可以在其中推送多个位置我从 JavaFX 应用程序填充一个数组并调用一个函数来显示这些点：

@FXML
private void showAllConductores(){
    for(int i=0;i<6;i++) {
        lat = lat+5;
        lon = lon + 5;
        engine.executeScript("arrayConductores.push({x:5, y:3});");

    }
    engine.executeScript("addAllMarkers();");

}

在html文件中：

        // Function for adding a marker to the page.
        function addMarker(x, y) {
            var latLng2 = new google.maps.LatLng(x, y);
            marker.setPosition(latLng2);
            alert("addMarker JAVAScript, x: " + x + ", y:" + y);
        }
        var arrayConductores = [];
        function addAllMarkers() {
            for ( var x in arrayConductores) {
                addMarker(x.x,x.y);
                console.error('message');
            }
        }

但是什么都没有出现……

【问题讨论】：

如果在创建标记后处理它们（如隐藏、重新显示等），最好将标记对象保存在数组中。否则，将addMarker() 函数中的全局marker 对象更改为本地可能会解决您的问题：var marker ...
解决了一个标记！我现在将编辑答案！现在我正在尝试显示一组标记传递一串点

标签： javascript google-maps javafx

【解决方案1】：

由于您将添加多个标记，因此请在 addMarker() 函数中创建所有标记。将信息气泡移动到函数中，以便每个标记都有唯一的信息气泡：

....

var map = new google.maps.Map(document.getElementById("mapcanvas"),
                Options);

document.goToLocation = function(x, y) {
    alert("goToLocation, x: " + x + ", y:" + y);
    var latLng = new google.maps.LatLng(x, y);
    map.setCenter(latLng);
    // Since you have multiple markers, markers will remain as they are
}

function addMarker(x, y) {
    var marker = new google.maps.Marker({
       position : new google.maps.LatLng(x, y),
       map : map,
       draggable : false,
       //icon: carMarkerImage,
       title : "",
       autoPan : true
    });

    var infobulle = new google.maps.InfoWindow({
       // You can pass some content to the function like addMarker(x, y, content)
       content : "some content for your marker"
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
       infobulle.open(map, marker);
    });
}

addMarker(35.857908, 10.598997);

...

【讨论】：

感谢您的回答，我已更新问题以显示多个标记
您的addMarker() 函数只会更改第一个标记的当前位置，不会添加新标记。其次，在showAllConductores() 中，您在 for 循环中每转按 3 作为纬度，按 5 作为经度，所以在再次修改代码之前，您可以检查位置 (3, 5) 是否有任何标记？您的警报和控制台消息是否正常工作？
@vlopezla 我对JavaFX一无所知，但我在pastebin中编写了您的代码，请检查：pastebin.com/XELUun5v。可能存在语法错误，但它应该提供有关 javascript 端应该如何的想法。