Question

当放置在地图初始化之外的函数中时，我很难为地图指定标记。

我有一个固定的制造商，在加载地图时放置，工作正常。我还希望将标记放在访问该页面的用户的位置。我已将第二部分放在一个名为getUserLocation（）的单独函数中。

我试过在getUserLocation（）函数中调用getMap（）函数，但它不起作用。我认为我所追求的是可能的吗？示例如下。

// Get user location
function getUserLocation() {

    if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(function(position) {

            // Users location
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };

            console.log(pos);

            var userLocationMarker = new google.maps.Marker({ map: map, position: pos });

            getMap();

        }, function() {             
            handleLocationError(true, infoWindow, map.getCenter());
      });
    }
}

// Initialise Google Maps
function getMap() {

    var mapOptions = {
        center: {lat: 50.7367030, lng: -3.5171710}, 
        zoom: 13
    }

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    // Home marker
    var marker = new google.maps.Marker({
        map: map,
        position: {lat: 50.7367030, lng: -3.5171710}
    });
}

Answer 1

Getmap初始化一个新的地图实例，只需调用一次。要更改标记的位置，您必须使用其他方法。

function getUserLocation() {

if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(function(position) {

        // Users location
        var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };

        console.log(pos);

        var userLocationMarker = new google.maps.Marker({ map: map, position: pos });

        var myLatlng = new google.maps.LatLng(pos.lat, pos.lng);
        userlocationmarker.setPosition(myLatlng);

    }, function() {             
        handleLocationError(true, infoWindow, map.getCenter());
  });
}

}

这个新方法（setPosition）只是将标记的位置设置为新的位置（在这种情况下，用户的位置）

Answer 2

我在昨天here已经回答了关于标记的类似问题。

我刚刚根据您的需要对其进行了编辑。

$('#button').click(function() {
  addmarker('-22.3157017', '-49.0660877');
});
$('#button2').click(function() {
  addmarker('-23.5936152', '-46.5856465');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" style="width:80px;height:30px;cursor:pointer;">
  Click
</button>
<button id="button2" style="width:80px;height:30px;cursor:pointer;">
  Click2
</button>
<div id="map" style="width:555px;height:500px"></div>
<script>
  function getMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(50.7367030, -3.5171710),
      zoom: 13
    });

    addmarker(50.7367030, -3.5171710);
  }

  function addmarker(lat, lon) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lon),
      map: map
    });

    map.panTo(marker.getPosition());
  }

  function getUserLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        //call function sending coordinates
        addmarker(position.coords.latitude, position.coords.longitude)
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    }
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDL5dMHBCV7crlostybmkuGBAXjOP3yawQ&callback=getMap"></script>

Google map API在函数之间传递信息

2 个答案: