通过执行 webengine.executescript 方法从 javaFX 应用程序在 google 地图中添加多个标记

Question

我正在尝试通过 webengine.executescript() 方法从我的 javaFX 应用程序中添加多个标记。我已将该方法置于一个循环中以显示所有标记，但它只显示最后定位的标记。这里是我的 javaFx 代码吗

 Button refresh = new Button("Refresh");
        refresh.setOnAction(new EventHandler<ActionEvent>() {
                                @Override
                                public void handle(ActionEvent arg0) {

                                    String[] latitude = {"23.806744","10"};
                                    String[] longitude = {"90.3685549","20"};
                                    //networking should be here

                                    for (int i = 0; i < latitude.length; i++) {
                                        lat = Double.parseDouble(latitude[i]);
                                        lon = Double.parseDouble(longitude[i]);

                                        System.out.printf("%.2f %.2f%n", lat, lon);

                                        webEngine.executeScript("" +
                                                        "window.lat = " + lat + ";" +
                                                        "window.lon = " + lon + ";" +
                                                        "document.goToLocation(window.lat,window. lon);"
                                        );
                                    }
                                }
                            }
        );

function initMap() {


  var latlng = new google.maps.LatLng(35.857908, 10.598997);

  var origin_place_id = null;
  var destination_place_id = null;
  var travel_mode = google.maps.TravelMode.DRIVING;
  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    center: {lat: -33.8688, lng: 151.2195},
    zoom: 13
  });


  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  directionsDisplay.setMap(map);

  var origin_input = document.getElementById('origin-input');
  var destination_input = document.getElementById('destination-input');
  var modes = document.getElementById('mode-selector');

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(origin_input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(destination_input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(modes);

  var origin_autocomplete = new google.maps.places.Autocomplete(origin_input);
  origin_autocomplete.bindTo('bounds', map);
  var destination_autocomplete =
      new google.maps.places.Autocomplete(destination_input);
  destination_autocomplete.bindTo('bounds', map);



  function expandViewportToFitPlace(map, place) {
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }
  }

  origin_autocomplete.addListener('place_changed', function() {
    var place = origin_autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }
    expandViewportToFitPlace(map, place);

    // If the place has a geometry, store its place ID and route if we have
    // the other place ID
    origin_place_id = place.place_id;
    route(origin_place_id, destination_place_id, travel_mode,
          directionsService, directionsDisplay);
  });

  destination_autocomplete.addListener('place_changed', function() {
    var place = destination_autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }
    expandViewportToFitPlace(map, place);

    // If the place has a geometry, store its place ID and route if we have
    // the other place ID
    destination_place_id = place.place_id;
    route(origin_place_id, destination_place_id, travel_mode,
          directionsService, directionsDisplay);
  });

  function route(origin_place_id, destination_place_id, travel_mode,
                 directionsService, directionsDisplay) {
    if (!origin_place_id || !destination_place_id) {
      return;
    }



    directionsService.route({
          origin: {'placeId': origin_place_id},
          destination: {'placeId': destination_place_id},
          provideRouteAlternatives: true,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
      for (var i = 0, len = response.routes.length; i < len; i++) {
            new google.maps.DirectionsRenderer({
                    map: map,
                    directions: response,
                    routeIndex: i
                });


            }

      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });

}
     var marker = new google.maps.Marker({
            position: new google.maps.LatLng(0,0),
            map: map,
            draggable: false,
            title: "",
            autoPan: false

        });


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

}

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        width:100%;
      }
.controls {
  margin-top: 15px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#origin-input,
#destination-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 200px;
}

#origin-input:focus,
#destination-input:focus {
  border-color: #4d90fe;
}

#mode-selector {
  color: #fff;
  background-color: #4d90fe;
  margin-left: 12px;
  padding: 5px 11px 0px 11px;
}

#mode-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}


    </style>
  </head>
  <body>
    <input id="origin-input" class="controls" type="text"
        placeholder="Enter an origin location">

    <input id="destination-input" class="controls" type="text"
        placeholder="Enter a destination location">



    <div id="map"></div>

如果有人能帮忙就好了

Answer 1

您的问题是您只创建了一次标记。然后在循环中调用 document.goToLocation ，每次只更新那个标记的位置。在循环结束时，它具有这些位置中最后一个的位置。

如果你想在每个位置都有一个标记，在 document.goToLocation 函数中创建一个标记：

document.goToLocation = function(x, y) {
   alert("goToLocation, x: " + x +", y:" + y);

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

通过执行 webengine.executescript 方法从 javaFX 应用程序在 google 地图中添加多个标记

Adding multiple markers in google map from javaFX application by executing webengine.executescript method

google-maps

google-maps-api-3

javafx-webengine