Google Maps API中心標記+地理位置

Question

我試着寫變量來嘗試並放置一個標記，但它不起作用。 首先應該要求啟用位置服務，然后使用標記顯示用戶的當前位置。 我不確定是否必須單獨調用變量“marker”？ 或者語法有問題嗎？

我究竟做錯了什么？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>GMAP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Google Maps API -->
    <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%; margin-left:auto; margin-right:auto; }
    </style>

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUuNJkdVKOzHyIclOyTki6uHwrYpKxaeg&sensor=true">
    </script>

    <!-- GMaps GPS -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

    <script type="text/javascript">
      function initialize() {
      var mapOptions = {
        zoom: 6
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

      // Try HTML5 geolocation
      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition( function (position) {
          var pos = new google.maps.LatLng(position.coords.latitude,
                                           position.coords.longitude);

          var showPosition = function (position) {
            var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var marker = new google.maps.Marker({
              position: userLatLng,
              title: 'Your Location',
              map: map
            });

            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
            });

            map.setCenter(pos);
          };

        });
      }



      else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
      }
    }

        function handleNoGeolocation(errorFlag) {
          if (errorFlag) {
            var content = 'Error: The Geolocation service failed.';
          } else {
            var content = 'Error: Your browser doesn\'t support geolocation.';
          }

          var options = {
            map: map,
            position: new google.maps.LatLng(37.774929, -122.419416),
            content: content
          };

          var infowindow = new google.maps.InfoWindow(options);
          map.setCenter(options.position);
        }



      google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>

<body>

    <!-- Current Location Google Map API -->
    <br />
    <div id="map-canvas" style="width: 30%; height: 30%"></div>

  </body>
</html>

Answer 1

有兩個錯誤。

Google Maps API包含兩次，因此我們會收到消息： Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors. Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors. 其中一個包含的鏈接必須被注釋掉。

下一個是缺少調用showPosition()函數。 即使你在那里調用它也無法工作，因為變量使用pos和userLatLng ，應該更正。 這是更改的代碼：

...
    navigator.geolocation.getCurrentPosition( function (position) {
        //var pos = new google.maps.LatLng(position.coords.latitude,
        //                                 position.coords.longitude);

        //var showPosition = function (position) {

            var userLatLng = new google.maps.LatLng(position.coords.latitude,
                                           position.coords.longitude);

            var marker = new google.maps.Marker({
              position: userLatLng,
              title: 'Your Location',
              map: map
            });

            var infowindow = new google.maps.InfoWindow({
              // map: map,
              content: 'Info for this place',
              position: userLatLng
            });

            map.setCenter(userLatLng);
        //};

    }, function (err) {
        // message if user denied geolocation
        alert('Error(' + err.code + '): ' + err.message);
    });
} else {
...

Infowindow不會被打開，因為沒有標記的事件監聽器。

Answer 2

你需要調用showPosition函數，你現在只是聲明它。

Google Maps API中心標記+地理位置

問題描述

2 個解決方案

解決方案1
2 已采納 2014-01-29 08:16:27

解決方案2
0 2014-01-29 08:03:20

Google Maps API中心標記+地理位置

問題描述

2 個解決方案

解決方案1 2 已采納 2014-01-29 08:16:27

解決方案2 0 2014-01-29 08:03:20

解決方案1
2 已采納 2014-01-29 08:16:27

解決方案2
0 2014-01-29 08:03:20