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

我試圖編寫變量來嘗試放置標記，但它不起作用。它應該首先要求啓用位置服務，然後用標記顯示用戶的當前位置。我不確定是否必須單獨調用變量「marker」？或者語法有問題嗎？Google Maps API集中標記+地理位置

我在做什麼錯？

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

來源

2014-01-29 Phillipe Dongwoo Han

什麼不行？我們不知道。創建一個[jsfiddle]（http://jsfiddle.net）來說明問題。 – MrUpsidown

報告了一個錯誤：'警告：您已在此頁面上多次包含Google Maps API。這可能會導致意外的錯誤。' –

有兩個錯誤。

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 { 
...

信息窗口將不會打開，因爲沒有事件偵聽器標記。

來源

2014-01-29 08:16:27

不能相信我忘了實際打電話！非常感謝！ –

您需要致電showPosition函數，您現在只聲明它。

來源

2014-01-29 08:03:20 Jonathan

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

回答

相關問題