【问题标题】:Insert google map showing my current location插入显示我当前位置的谷歌地图
【发布时间】:2013-07-07 12:33:20
【问题描述】:

我正在全球旅行,需要在我的网页上插入显示我当前位置(而不是读者的位置)的谷歌地图,以便其他人可以看到我的位置。

有没有人有一个简单的解决方案来做到这一点。我知道如何使用“我的地点”来创建地图并插入到我的页面中,但到目前为止,我还避免参与使用 Maps API。我对 HTML 和 Javascript 有一些了解,但它很少,所以如果可以的话,我宁愿避免这种情况。

有没有人可以解决这个问题?

【问题讨论】:

标签: google-maps position location


【解决方案1】:

your other question 进一步回答我的问题,您可能会发现此示例的一些有用信息:-hypoCampus

小蓝人/人/图标跟随您的位置。如果您滚动地图,您可以按下静态蓝色地图控制人员重新定位您的位置。当您移动时(节流位置更新正在更改),该图标正在行走,否则它处于站立状态。

(Manifest 有一个错误 - "display" : "standalone" at the mo Chrome bug

希望 Firebase 已承诺绕过 W3C/IETF 的减速带,并很快为我们提供 ServiceWorker 背景地理定位跟踪。

【讨论】:

  • 22 小时后我可以奖励赏金:D
  • 干杯。不要太在意赏金。不管怎么说,还是要谢谢你。对于那些想要运行 hypoCampus 的人,请确保您启用了位置服务并授予应用程序访问权限。此外,由于需要 localStorage,因此您不能进行私人浏览。最后,使用 Chrome、Opera 或三星浏览器添加到主屏幕以改善体验。下一个版本的 Chrome(或 n+1)Web 应用程序将显示为一流的应用程序。 (就像 Firefox 仍然有 registerApp 方法)
【解决方案2】:

您必须告诉地图您当前的位置。为此,您必须获取您的位置纬度和经度,以便通过地图显示。

得到那个:

http://maps.googleapis.com/maps/api/geocode/xml?address=+" + MapAddress + "&sensor=false

在您的页面中尝试此 html 代码。 str_lat 和 str_lng 是您的位置:

<head>
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
    <style type='text/css'>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type='text/javascript' src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false>
    </script>
    <script type='text/javascript'>
      function initialize() {
        var myLatlng = new google.maps.LatLng(str_lat,str_lng);
        var mapOptions = {
          center: myLatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title:'Location!'
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id='map-canvas'/>
  </body>
</html>;

【讨论】:

    【解决方案3】:

    看这里https://developers.google.com/maps/documentation/javascript/tutorial

    并查看此代码以判断您的技能不要担心上面链接中解释的新术语

       <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map-canvas { height: 100% }
        </style>
        <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
        </script>
        <script type="text/javascript">
          function initialize() {
            var mapOptions = {
              center: new google.maps.LatLng(-34.397, 150.644),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
          }
          google.maps.event.addDomListener(window, 'load', initialize);
        </script>
      </head>
      <body>
        <div id="map-canvas"/>
      </body>
    </html>
    

    【讨论】:

      猜你喜欢
      • 2018-02-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-08-14
      • 2020-02-29
      • 2017-08-29
      • 1970-01-01
      相关资源
      最近更新 更多