Google Maps JavaScript API 地理位置标记

Posted 2023-02-23

【中文标题】Google Maps JavaScript API 地理位置标记

【英文标题】：Google Maps JavaScript API Geolocation Marker

【发布时间】：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”命令，但我已经有了它来识别数组。

【参考方案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);          
, 
...

【讨论】：

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