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.其中一个包含的链接必须被注释掉。

下一个缺少调用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 个答案: