Google Maps添加新标记并用一只鼠标单击删除旧标记

我正在尝试将Google Maps嵌入Javafx WebView中。我在程序开头显示的markers[]-阵列中有一个标记。

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

如果我单击一个按钮，该按钮调用方法deleteOldMarkers()删除了第一个标记。到目前为止还不错。

我要做的是删除旧标记，并在不始终单击按钮的情况下创建新标记。

但是，如果我调用函数 deleteOldMarker()和 addNewMarkers() function，它只会添加标记，但不会删除旧的标记。

我的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>

将 deleteMarker更改为删除 all 标记（您不希望留下的第一个标记，如果您已经将其添加到数组中，则需要剩下最后的标记）
呼叫deleteMarker在您致电addNewMarkers
您不需要deleteOldMarkers

概念证明小提琴

代码段：

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>

相关内容

最新更新

热门标签：