如何在注册时使用 google maps api 在全球地图中显示自动注册用户的地理位置？

Posted 2023-02-23

【中文标题】如何在注册时使用 google maps api 在全球地图中显示自动注册用户的地理位置？

【英文标题】：How can I show automatically registered users geolocation in a global map with google maps api as they register?

【发布时间】：2017-10-17 08:09:14

【问题描述】：

我正在尝试在地图中显示来自网站的所有用户的地理位置。通过谷歌地图 API 文档，我可以将我的位置显示为用户。但是，我如何让它显示网站上注册人的所有地理位置？

<div id="map"></div>
<script>

  function initMap() 
    var map = new google.maps.Map(document.getElementById('map'), 
      center: lat: -34.397, lng: 150.644,
      zoom: 6
    );
    var infoWindow = new google.maps.InfoWindow(map: map);

    // Try html5 geolocation.
    if (navigator.geolocation) 
      navigator.geolocation.getCurrentPosition(function(position) 
        var pos = 
          lat: position.coords.latitude,
          lng: position.coords.longitude
        ;

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        map.setCenter(pos);
      , function() 
        handleLocationError(true, infoWindow, map.getCenter());
      );
     else 
      // Browser doesn't support Geolocation
      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.');
  
</script>

【问题讨论】：

您好，欢迎来到 ***。请参阅***.com/help/how-to-ask，了解如何提出正确的问题并根据指南改进您的问题。作为第一步，请对您的代码应用正确的格式和标识，现在阅读起来很混乱。

对不起。希望现在更好。

如果我理解正确，您想在地图上注册用户的坐标处添加标记？如果是：与您显示自己的地理位置的方式相同，只需添加带有注册用户的纬度/经度坐标的标记。

请参阅下面关于如何设置其他标记的答案

您需要将地理定位结果发送回您的服务器并存储以供显示。请注意，有些用户对您这样做有隐私方面的顾虑。

【参考方案1】：

创建google.maps.Marker() 类型的对象，使用它的setPosition 函数设置一个位置，然后使用setMap 函数将其添加到您的地图中。

示例（Lat/Lng 是德国的中心 - 在此处插入您的用户坐标）：

var marker=new google.maps.Marker();  
// use your registered user coordinates here
marker.setPosition(new google.maps.LatLng(48.14544, 8.19208)); 
marker.setMap(map);

此外，您可以使用边界来使地图自动缩放以使每个标记都可见：

var bounds=new google.maps.LatLngBounds();
...
bounds.extend(marker.getPosition());
...
map.fitBounds(bounds);