Google Maps JavaScript API地理位置标记



我正在尝试制作它,以便当我的Google Maps JavaScript API确定用户位置时出现标记。当我打开HTML时,它可以拉起用户的位置,但是没有标记显示用户的位置。我有几个标记显示了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
                  });
                  }
                }
              };

尝试一下。注意:确定您的立场的不是Google地图。i'ts标准html/javaScript功能;您的Webbrowser读取它。

...
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);          
}, 
...

最新更新