Google Maps JavaScript API地理位置標記

Question

我正在嘗試這樣做，以便當我的Google Maps Javascript API確定用戶位置時出現標記。 當我打開HTML時，它可以拉出用戶的位置，但是沒有標記顯示用戶所在的位置。 我有幾個標記可以顯示3個體育館的位置，但我想向用戶展示它們相對於3個體育館的位置。

我應該在“ var markers =”數組中添加用戶的位置嗎？ 還是應該在“ infoWindow.setPosition（pos）;”之后添加某種類型的代碼？ 到目前為止，這是我的代碼；

<script>
  var map, infoWindow;
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat:34.0522,lng:-118.2437},
      zoom: 15,
      disableDefaultUI: true,
      gestureHandling: 'cooperative',
    });
    infoWindow = new google.maps.InfoWindow;

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);

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

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                      'Error: The Geolocation service failed.' :
                      'Error: Your browser doesn\'t support geolocation.');
  infoWindow.open(map);  }

    var markers = [
                  {
                    coords:{lat:34.051937,lng:-118.472118},
                    iconImage:'GymBoxNBurn.png',
                    content:'Box N Burn Boxing Gym'
                  },
                  {
                    coords:{lat:33.938454,lng:-118.277857},
                    iconImage:'GymBroadwayBoxing.png',
                    content:'Broadway Boxing Gym'
                  },
                  {
                    coords:{lat:34.015644,lng:-118.487396},
                    iconImage:'GymBoxNBurn.png',
                    content:'Box N Burn Boxing Gym'
                  }
                ];


    for(var i = 0;i < markers.length;i++){
        addMarker(markers[i]);
          }

            function addMarker(props){
              var marker = new google.maps.Marker({
                position:props.coords,
                map:map,
              });


              if(props.iconImage){
                marker.setIcon(props.iconImage);
                }

              if(props.content){
                var infoWindow = new google.maps.InfoWindow({
                  content:props.content
                  });

                  }
                }
              };

Answer 1

嘗試這個。 注意：決定您的位置的不是Google Maps。 我沒有標准的HTML / javascript功能； 您的網絡瀏覽器會讀取它。

...
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };
  infoWindow.setPosition(pos);
  addMarker({
    coords: pos,
    content:'YOU ARE HERE'
  });  
  // if you want this, center the map.  Else remove next line
  map.setCenter(pos);          
}, 
...