Google MyMaps 地理位置 // GPS答案

【问题标题】：Google MyMaps Geolocation // GPSGoogle MyMaps 地理位置 // GPS
【发布时间】：2018-02-01 05:38:19
【问题描述】：

我在 MyMaps 中创建了一个地图，并将其实现为一个 php 文档。它运作良好。但我想在它开始时设置地理位置。那可能吗？以下脚本向我显示带有地理位置的 Google 地图。我怎样才能在这里实现我的地图？感谢您的帮助！

 <script>
    function initialize(coords) 
    {
        var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
        var myOptions = 
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("pos"), myOptions);

        var marker = new google.maps.Marker(
        {
            position: latlng, 
            map: map, 
            title: "Hier bist du :)"
        }); 
    }
    navigator.geolocation.getCurrentPosition(function(position)
    { 
        initialize(position.coords);
    }, function()
    {
        document.getElementById('pos').innerHTML = 'Deine Position konnte leider nicht ermittelt werden';
    });
</script>

【问题讨论】：

我忘了：

标签： javascript php geolocation gps mymaps

【解决方案1】：

这是你应该实现的代码：

<script >
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>

SOURCE

【讨论】：

您好，感谢您的回答。但是当我进入一些 Lat´s 时，它有一个固定位置......我会将脚本实施到我的地图中......你明白吗？以便我的地图在此刻搜索我的位置
嘿，谢谢。但是当我实现这个代码时，它只显示了 2 个文本字段，我可以在其中输入一些东西。也许我必须更好地解释一下：我有一张谷歌 MYmAPS 卡。而我唯一想做的就是，在那一刻显示我的地理位置。在“正常”的谷歌地图中，它可以完美运行。但不是我的地图。你明白吗？
@Crissi 我再次编辑了我的答案，请检查并告诉我是否有帮助！此代码获取您当前的位置并在启动时将其设置为地图
@Crissi 我也用你的地图试了一下，效果很好！只需尝试在您的浏览器或 PC 中启用本地化。祝你好运
非常感谢。但它没有用。我输入了相同的代码，但它什么也没显示……我在哪里可以使用我的地图？我应该在代码中输入一些 URL 或类似的东西吗？对不起

【解决方案2】：

将嵌入的地图 iframe 添加到您的 HTML 中。
查看My Maps Documentation了解更多信息。
<iframe id="map-iframe" src="https://www.google.com/maps/d/u/2/embed?mid=YOUR_MAP_ID" width="640" height="480"></iframe>
在您的 JavaScript 文件中使用地理位置来获取用户的当前位置。
并将地图设置为显示用户的位置，方法是在地图 URL 的末尾添加 &ll=lat,long。

      // getting user's current location.
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          console.log(pos);

      // setting the map to show user's current location.
          document.getElementById('map-iframe').src = mapUrl.concat('&z=16&ll=', position.coords.latitude, ',', position.coords.longitude);

          console.log(document.getElementById('map-iframe').src);
        });
    } else {
      alert('Error: Your browser doesn't support geolocation.');
    }
  }

【讨论】：