Question

我对JavaScript和GoogleMaps有疑问！

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

我能够显示地图和第一个标记，但我无法显示其他标记，完美的thig将只能显示一个或（如果所选项目为“全部”）显示全部驱动程序。

这是我的代码：

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');
            }
        }

但似乎没有出现......

Answer 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);

...

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

1 个答案: