如何使用 JavaScript 在 Google Maps API 中仅获取一个标记
Posted
技术标签:
【中文标题】如何使用 JavaScript 在 Google Maps API 中仅获取一个标记【英文标题】：How to get only one marker in the Google Maps API with JavaScript 【发布时间】：2016-01-16 14:20:19 【问题描述】：我的代码：
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
var mapProp =
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addListener(map, 'click', function(event)
placeMarker(event.latLng);
);
function placeMarker(location)
var marker = new google.maps.Marker(
position: location,
map: map,
);
var infowindow = new google.maps.InfoWindow(
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
);
infowindow.open(map,marker);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
我每公里都有一个新标记。如果我再次单击它，如何删除另一个？
顺便说一句：请阅读：Google Maps how to get to show only one marker?
想使用它，但它不起作用（在控制台中：CurrentPosition() 和 watchPosition() 在不安全的来源上已弃用，并且支持将在未来被删除。您应该考虑将您的应用程序切换到安全来源，例如 HTTPS。有关详细信息，请参阅https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins。）
【问题讨论】：
【参考方案1】：如果您只需要一个标记，则可以选择一个，只需创建一个并根据需要移动它。
proof of concept fiddle
代码 sn-p：
var map;
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var marker;
var infowindow;
function initialize()
var mapProp =
center: myCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
google.maps.event.addListener(map, 'click', function(event)
placeMarker(event.latLng);
);
function placeMarker(location)
if (!marker || !marker.setPosition)
marker = new google.maps.Marker(
position: location,
map: map,
);
else
marker.setPosition(location);
if (!!infowindow && !!infowindow.close)
infowindow.close();
infowindow = new google.maps.InfoWindow(
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
);
infowindow.open(map, marker);
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#googleMap
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="googleMap"></div>【讨论】：
【参考方案2】：而不是这个：
google.maps.event.addListener(map, 'click', function(event)
placeMarker(event.latLng);
);
尝试使用这个：
google.maps.event.addListener(map, 'click', function(event)
setMapOnAll(null);
placeMarker(event.latLng);
因此，您将在点击时删除所有当前标记并在 x,y 位置添加新标记
【讨论】：
出现此失败：newevent:227 Uncaught ReferenceError: setMapOnAll is not defined 您可以尝试删除 setmaponall 并使用 placeMarker(null)以上是关于如何使用 JavaScript 在 Google Maps API 中仅获取一个标记的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 JavaScript 从 Google 日历页面获取事件 ID？
如何使用 Google 的 Closure Compiler 将我的 javascript 拆分为模块？
如何使用 JavaScript 在 Google Maps API 中仅获取一个标记
Google Analytics 使用 GTag，如何在 JavaScript 中为自定义细分添加代码？