Question

我正在尝试将Google地图嵌入到JavaFX WebView中。我在markers[] - 数组中有一个标记显示在我的程序开头。

当我点击地图时，会出现一个新标记。所以我有两个。

如果我点击调用方法deleteOldMarkers()的按钮，则会删除第一个标记。到目前为止一切都很好。

我要做的是删除旧标记并创建一个新标记，而不是一直点击按钮。

但如果我与deleteOldMarker() - 函数一起调用函数addNewMarkers()，它只会添加标记，但不会删除旧标记。

我的FXML项目如下所示：

FXMLDocument.fxml：

<AnchorPane id="AnchorPane" prefHeight="578.0" prefWidth="905.0"    
xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com 
/fxml/1" fx:controller="googlemapstestproject.FXMLDocumentController">
    <children>
        <WebView fx:id="view" layoutX="32.0" layoutY="16.0"    
prefHeight="553.0" prefWidth="848.0" />
    </children>
</AnchorPane>

GoogleMapsTestProject.java：

public class GoogleMapsTestProject extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root =  
FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.show();
    }
}

FXMLDocumentController.java：

@FXML
private WebView view;
@FXML
private WebEngine webEngine;
final URL urlGoogleMaps = getClass().getResource("Map.html");

@Override
public void initialize(URL url, ResourceBundle rb) {

    webEngine = view.getEngine();
    webEngine.setJavaScriptEnabled(true);

    webEngine.load(urlGoogleMaps.toString());
    }

}

最后是Map.html：

<html>
    <head>
        <title></title>
        <script src="https://maps.googleapis.com/maps/api/js?key=  
    AIzaSyAOzn0IHzu49M3kuocoMdcDC_BPMUVNA84&signed_in=true"></script>
        <style>#mapcanvas { height: 100%; width: 100%}</style>

    </head>
    <body>
        <h1></h1>
        <div id="mapcanvas">
            <script type="text/javascript">

                var markers = [];

                document.map = new 
google.maps.Map(document.getElementById("mapcanvas"));
                var latlng = new google.maps.LatLng(48.8, 9.2);
                var Options = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    streetViewControl: false,
                    zoomControl: false,
                    mapTypeControl: false,
                };
                var map = new  
google.maps.Map(document.getElementById("mapcanvas"), Options);

                map.addListener('click', function (event) {
                    deleteMarker();
                    addNewMarkers(event.latLng)
                });


                var map;
                var markers = [];

                // Adds a new marker at the current mouse position when 
                   clicked
                map.addListener('click', function (event) {
                    deleteMarker();
                    addNewMarkers(event.latLng);
                });

                // Adds a marker to the map and pushes it into markers 
                   array
                function addNewMarkers(location) {
                    var marker = new google.maps.Marker({
                        position: location,
                        map: map,
                        icon: "http://maps.google.com/mapfiles/ms/icons
                               /yellow-dot.png",
                    });
                    markers.push(marker);
                }

                function deleteMarker() {
                    var i;
                    for (i = 0; i < markers.length; i++) {
                        markers[i].setMap(null);
                    }
                    markers = [];
                }
                ;

            </script>
        </div>
    </body>
</html>

Answer 1

更改deleteMarker以删除所有标记（您不希望第一个标记留在周围，如果您已将其添加到最后一个标记，则需要数组）
在致电deleteMarker

addNewMarkers

您不需要deleteOldMarkers

proof of concept fiddle

代码段

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  map.addListener('click', function(event) {
    deleteMarker();
    addNewMarkers(event.latLng)
  });
}
var map;
var markers = [];
google.maps.event.addDomListener(window, "load", initialize);

// Adds a marker to the map and pushes it into markers array
function addNewMarkers(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
  });
  markers.push(marker);
}

function deleteMarker() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
};

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Google地图只需点击一下鼠标即可添加新标记并删除旧标记

1 个答案: