Javascript 谷歌地图只需单击鼠标，即可添加新标记并删除旧标记
我正在尝试将Google地图嵌入JavaFX网络视图。我在程序开始时显示的Javascript 谷歌地图只需单击鼠标，即可添加新标记并删除旧标记,javascript,google-maps,google-maps-markers,Javascript,Google Maps,Google Maps Markers,我正在尝试将Google地图嵌入JavaFX网络视图。我在程序开始时显示的markers[]-数组中有一个标记 当我点击地图时，会出现一个新的标记。所以我有两个 如果我单击一个按钮，该按钮调用方法deleteOldMarkers（）第一个标记将被删除。到目前为止还不错 我想做的是删除旧标记，同时创建一个新标记，而不必一直单击按钮。 但是如果我将函数deleteOldMarker（）与addNewMarkers（）-函数一起调用，它只会添加标记，而不会删除旧的标记 我的FXML项目如下所示： FX
markers[]deleteOldMarkers（）deleteOldMarker（）addNewMarkers（）<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>
@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());
}
<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>
#mapcanvas{高度：100%；宽度：100%}
var标记=[]；
document.map=新建
google.maps.Map（document.getElementById（“mapcanvas”）；
var latlng=新的google.maps.latlng（48.8,9.2）；
变量选项={
缩放：15，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP，
街景控制：错误，
动物控制：错误，
mapTypeControl:false，
};
var-map=new
Map（document.getElementById（“mapcanvas”），选项）；
map.addListener（'click'，函数（事件）{
删除标记（）；
addNewMarkers（event.latLng）
});
var映射；
var标记=[]；
//在以下情况下，在当前鼠标位置添加新标记：
点击
map.addListener（'click'，函数（事件）{
删除标记（）；
添加新标记（事件latLng）；
});
//将标记添加到地图并将其推入标记中
排列
函数addNewMarkers（位置）{
var marker=new google.maps.marker({
位置:位置,，
地图：地图，
图标：“http://maps.google.com/mapfiles/ms/icons
/黄点.png“，
});
标记器。推（标记器）；
}
函数deleteMarker（）{
var i；
对于（i=0；ideleteMarkeraddNewMarkersdeleteOldMarkers函数初始化（）{
map=新建google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
map.addListener（'click'，函数（事件）{
删除标记（）；
addNewMarkers（event.latLng）
});
}
var映射；
var标记=[]；
google.maps.event.addDomListener（窗口“加载”，初始化）；
//将标记添加到地图并将其推入标记数组
函数addNewMarkers（位置）{
var marker=new google.maps.marker({
位置:位置,，
地图：地图，
图标：“http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
});
标记器。推（标记器）；
}
函数deleteMarker（）{
对于（var i=0；i
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
deleteMarker（）应该在addNewMarkers（）之后调用，但是如果我在addNewMarkers（event.latLng）之后编写deleteMarker（），旧的标记仍然没有被删除，它只是继续创建新的标记。请检查标记数组的长度，以及它是否是全局的，请提供一个示例来说明您的问题。@geocodezip，我添加了整个项目的代码，现在应该可以通过复制和粘贴来运行了。我快疯了，我可以看到你的代码工作得很完美，我看不出我的代码有什么不同。但它与我的代码不兼容。我照你的建议做了。deleteMarker（）-函数删除所有标记。但它只在我不将函数放在addNewMarkers（）函数前面的情况下工作。如果我将deleteMarker（）函数放在addListener中addNewMarkers（location，map）-函数的前面，那么旧的标记将保留。即使我通过单击“delete”按钮调用deleteOldMarkers方法，也只会删除最后一个标记，其他所有标记现在都被删除了，我看到了问题所在。标记将被删除，但仅在我放大/缩小时才会被“删除”。为什么在您的示例@geocodezip中它会自动刷新？问题是否可能是我正在JavaFX WebView中显示它，而它没有在应该的时候重新加载？您的问题没有说明任何关于JavaFX WebView的内容。是的，对此表示歉意，我编辑了我的原始帖子。
<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>