Google Maps API中心标记+地理位置

Question

I tried to write variables to try and place a marker but it's not working. 我试着写变量来尝试并放置一个标记，但它不起作用。 It should first ask to enable location services, then display the user's current location with a marker. 首先应该要求启用位置服务，然后使用标记显示用户的当前位置。 I'm not sure whether I have to call the variable "marker" separately? 我不确定是否必须单独调用变量“marker”？ Or is there something wrong with grammar? 或者语法有问题吗？

What am I doing wrong? 我究竟做错了什么？

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

There are two errors. 有两个错误。

Google Maps API is included two times so we get message: Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors. 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. One of included links has to be commented out. 其中一个包含的链接必须被注释掉。

The next one is missing call showPosition() function. 下一个是缺少调用showPosition()函数。 Even if you put call there it will not work because variables are using pos and userLatLng which should be corrected. 即使你在那里调用它也无法工作，因为变量使用pos和userLatLng ，应该更正。 Here is changed code: 这是更改的代码：

...
    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 won't be opened because there is no event listener for marker. 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