我正在Google地图中创建一个我想要只有一个标记的地图。当用户第一次点击地图时,将创建一个标记(周围有一个圆圈)。当用户再次点击时,旧标记(和圆圈)将移至新位置。
基本上,这可以通过移动标记和圆圈,或删除它们并创建新的标记和圆圈来完成。
目前我正在尝试使用后一种方法,但遗憾的是它不起作用。有人可以帮忙吗?
<script>
//Initial variables (map and the markers array, which we're going to try to get rid of)
var map;
var markersArray = [];
//and GO!
function initialize()
{
//need to correct our starting location - over UK would be nice
var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions =
{
zoom: 12,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
//listen out for clicks and, when clicked, add a marker
google.maps.event.addListener(map, 'click', function(event)
{
addMarker(event.latLng);
});
}
// Add a marker to the map and push to the array.
function addMarker(location)
{
markersArray = [];
setAllMap(null);
var marker = new google.maps.Marker(
{
position: location,
map: map,
draggable: true
});
//create a circle
var circle = new google.maps.Circle(
{
map: map,
radius: 3000
});
//bind the circle to the marker we've also just created
circle.bindTo('center', marker, 'position');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
答案 0 :(得分:4)
如果您一次只需要一个标记,则不需要数组来存储标记。您必须确保使用setMap
方法清除标记和圆圈的地图属性并传递null
。圆圈错误,您没有所需的所有选项,也没有bindTo
方法。这是circle documentation。
我看到您将标记的draggable
属性设置为true,因此您还需要在标记上添加dragend
事件,以使用setCenter
将圆圈重新定位到标记新位置圆上的方法。
这是一个完整的例子:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps</title>
<style>
#map_canvas{
height:800px;
width:800px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script>
var marker, myCircle, map;
function initialize() {
var myLatlng = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function(event){
addMarker(event.latLng);
});
}
function addMarker(latLng){
//clear the previous marker and circle.
if(marker != null){
marker.setMap(null);
myCircle.setMap(null);
}
marker = new google.maps.Marker({
position: latLng,
map: map,
draggable:true
});
//circle options.
var circleOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: latLng,
radius: 3000
};
//create circle
myCircle = new google.maps.Circle(circleOptions);
//when marker has completed the drag event
//recenter the circle on the marker.
google.maps.event.addListener(marker, 'dragend', function(){
myCircle.setCenter(this.position);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>