谷歌地图api v3 - 只有一个标记的地图

我正在Google地图上创建一个地图，我只想要一个标记。当用户第一次点击地图时，会创建一个标记（周围有一个圆圈）。当用户再次点击时，旧标记（和圆圈）将被移至新位置。谷歌地图api v3 - 只有一个标记的地图

所以基本上，这可以通过移动标记和圆，或删除它们并创建一个新的标记和圆来完成。

此刻我试图使用后一种方法，但不幸的是它不工作。谁能帮忙？

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

来源

2012-07-29 user1560834

一个完整的例子会更容易帮助。什么是setAllMap？清除数组后，您可能不想调用它。如果你只想要一个标记，为什么你有一个markerArrays？最简单的方法是只有一个“标记”变量，然后移动它（或删除它并重新创建它）。 – geocodezip 2012-07-29 11:07:40

如果您一次只需要一个标记，则不需要数组来存储标记。您必须确保使用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>

来源

2012-07-30 13:27:47

谷歌地图api v3 - 只有一个标记的地图

回答

相关问题