插入显示我当前位置的谷歌地图

时间:2013-07-07 12:33:20

标签: google-maps position location

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

有没有人有一个直截了当的解决方案来做到这一点。我知道如何使用“我的位置”创建地图并在我的页面中插入,但是到目前为止我们已经避免了必须参与使用Maps API。我对HTML和Javascript有一些了解,但它很小,所以如果可以,我宁愿避免这种情况。

有没有人有解决方案?

3 个答案:

答案 0 :(得分:1)

继我在your other question的回答之后,您可能会发现此示例中的一些内容很有用: - hypoCampus

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

(Manifest有一个错误 - "显示":"独立"在mo Chrome bug

希望Firebase承诺绕过W3C / IETF的速度限制,并很快为我们提供ServiceWorker背景地理位置跟踪。

答案 1 :(得分:-1)

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

通过以下方式获取:

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

答案 2 :(得分:-2)

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>