Google地图上的多个标记？

Question

我正在尝试在Google地图上创建多个标记，以标记河流的访问点。到目前为止，我有一个标记（myLatlng）显示和单击按钮后显示的anotehr，但是当我尝试添加多个（accessPoint1）时，它将不会出现。有谁知道如何解决这一问题？提前谢谢。

＆＃13;

＆＃13;

    function initialize() {
    
	    var myLatlng=new google.maps.LatLng(51.843143, -2.643555),
          map = new google.maps.Map(document.getElementById('map'), { 
		              zoom: 12, 
		              center: myLatlng}),
          marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title:"We are here!"
                  });
				  
				  
		var accessPoint1 = new google.maps.LatLng(51.840913, -2.638603),
          map = new google.maps.Map(document.getElementById('map'), { 
		              zoom: 12, 
		              center: accessPoint1}),
          marker = new google.maps.Marker({
                  position: accessPoint1,
                  map: map,
                  title:"Access Point 1" 
                  });
      map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);
		  
      function successCallback(position) { 
        var latlng    = new google.maps.LatLng( position.coords.latitude, 
                                                position.coords.longitude),
            
            myOptions = {
              zoom: 3,
              center: latlng,
              mapTypeControl: false,
              navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
              mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            bounds=new google.maps.LatLngBounds(latlng);
        
        bounds.extend(marker.getPosition());
        
        map.setOptions(myOptions);
        
        map.fitBounds(bounds);
        
        new google.maps.Marker({
                  position: latlng,
                  map: map,
                  title:"You are here!",
                  icon:'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
                  });
      }
      
      function errorCallback() {
        alert("I'm afraid your browser does not support geolocation.");
      }
       
		  function findMe(){
        $(this).hide();
        
        if (navigator.geolocation){
             navigator.geolocation
             .getCurrentPosition(successCallback,errorCallback,{timeout:10000});
        }
        else{
          alert("I'm afraid your browser does not support geolocation.");
        }
      }
      
      $("#findButton").click(findMe);
    }

 google.maps.event.addDomListener(window,'load',initialize);

＆＃13;

＆＃13;

＆＃13;

Answer 1

您正在为第二个访问点重新创建地图，这意味着您有两个地图，每个地图上都有一个标记，第一个地图被覆盖且不可见。您还要覆盖标记变量（这不应该导致问题）：

除非你有多个<div>的地图，否则只创建一张地图。

function initialize() {

    var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: myLatlng
        }),
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "We are here!"
        });


    var accessPoint1 = new google.maps.LatLng(51.840913, -2.638603),
        marker1 = new google.maps.Marker({
            position: accessPoint1,
            map: map,
            title: "Access Point 1"
        });
    map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);

    function successCallback(position) {
        var latlng = new google.maps.LatLng(position.coords.latitude,
        position.coords.longitude),

            myOptions = {
                zoom: 3,
                center: latlng,
                mapTypeControl: false,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            bounds = new google.maps.LatLngBounds(latlng);

        bounds.extend(marker.getPosition());

        map.setOptions(myOptions);

        map.fitBounds(bounds);

        new google.maps.Marker({
            position: latlng,
            map: map,
            title: "You are here!",
            icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
        });
    }

    function errorCallback() {
        alert("I'm afraid your browser does not support geolocation.");
    }

    function findMe() {
        $(this).hide();

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
                timeout: 10000
            });
        } else {
            alert("I'm afraid your browser does not support geolocation.");
        }
    }

    $("#findButton").click(findMe);
}

google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

<script src="http://maps.google.com/maps/api/js"></script>

<div id="map" style="border: 2px solid #3872ac;"></div>