Google Maps JavaScript API 地理位置标记答案

【问题标题】：Google Maps JavaScript API Geolocation MarkerGoogle Maps JavaScript API 地理位置标记
【发布时间】：2017-09-16 12:22:25
【问题描述】：

我试图让它在我的 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
                  });

                  }
                }
              };

【问题讨论】：

How to highlight a user's current location in google maps? 的可能重复项
它类似，我的问题是我正在尝试创建一个标记，以便在地图上已经存在的标记之外使用。那么是否需要在 var 标记数组或其他地方有一个代码来指示用户的位置，同时仍然显示数组中 3 个位置的位置。
How to highlight a user's current location in google maps?的可能重复
您的问题中没有任何代码可以为地理定位结果添加标记。
那么我应该在“infoWindow.setPosition(pos);”之后添加一个代码吗？大多数人告诉我放一个“var = new google.maps.Marker”命令，但我已经有了它来识别数组。

标签： javascript google-maps geolocation

【解决方案1】：

试试这个。注意：确定您的位置的不是谷歌地图。我是标准的 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);          
}, 
...

【讨论】：

工作就像一个魅力，欣赏它。