谷歌地圖API：想要地理位置在

以下的數據層自動點擊我試圖建立一個基於地圖的網站，標識用戶的地理位置，在他/她的位置繪製一個標記，然後使用該標記/位置點擊在數據層（在這種情況下，是一個GeoJSON層）。實質上，如果用戶位於geojson文件所描述的區域，用戶的位置應自動觸發infowindow。理想情況下，每次用戶更改位置時，都會點擊地圖來檢查此GeoJSON圖層以獲取信息。谷歌地圖API：想要地理位置在

到目前爲止，我可以成功獲取用戶的位置。地圖集中在那個位置。手動點擊GeoJSON圖層也會正確填充信息窗口。但是在獲取用戶位置時不會自動點擊。

我見過大量的例子，強制點擊標記發生，但我似乎無法找到一個點擊數據層。不幸的是，我更喜歡分配給這個編碼工作的GIS人員，這是我的聯盟出路，所以我正在努力弄清楚我會在哪裏出錯。

這裏的劇本，也許我犯了一個錯誤的位置：

$<script type="text/javascript"> 

    //centers the map on Iowa City 
     var map, 
      currentPositionMarker, 
      mapCenter = new google.maps.LatLng(41.661354, -91.534729), 
      map; 

     function initializeMap() 
     { 
      map = new google.maps.Map(document.getElementById('map_canvas'), { 
       zoom: 18, 
       center: mapCenter, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      map.data.loadGeoJson('test2.json'); 
      map.data.setStyle({ 
      strokeColor: '#2687bf', 
      strokeWeight: 5 
      }); 

      map.data.addListener('click', function(event) { 
      document.getElementById('info-box').textContent = 
      event.feature.getProperty('description'); 
     }); 

     } 

     function locError(error) { 
      // the current position could not be located 
      alert("The current position could not be found!"); 
     } 

     function setCurrentPosition(pos) { 
      currentPositionMarker = new google.maps.Marker({ 
       map: map, 
       draggable: true, 
       position: new google.maps.LatLng(
        pos.coords.latitude, 
        pos.coords.longitude 
       ), 
       title: "Current Position" 
      }); 
      new google.maps.event.trigger('test2.json', 'click'); 

      map.panTo(new google.maps.LatLng(
        pos.coords.latitude, 
        pos.coords.longitude 
       )); 

     } 

     function displayAndWatch(position) { 
      // set current position 
      setCurrentPosition(position); 
      // watch position 
      watchCurrentPosition(); 
     } 

     function watchCurrentPosition() { 
      var positionTimer = navigator.geolocation.watchPosition(
       function (position) { 
        setMarkerPosition(
         currentPositionMarker, 
         position 
        ); 
       }); 
     } 

     function setMarkerPosition(marker, position) { 
      marker.setPosition(
       new google.maps.LatLng(
        position.coords.latitude, 
        position.coords.longitude) 
      ); 
     } 

     function initLocationProcedure() { 
      initializeMap(); 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(displayAndWatch, locError); 
      } else { 
       alert("Your browser does not support the Geolocation API"); 
      } 
     } 

     $(document).ready(function() { 
      initLocationProcedure(); 
     }); 

    </script> 
</head> 

<body> 
    <div id="map_canvas" style="height:600px;"></div> 
    <div id="info-box" style="height:250px;">INFO</div> 

</body> 

</html>

這裏是鏈接到我的JSON和完整的HTML文件如下： https://sites.google.com/site/ecocritkml/coding

的JSON顯然是特定於愛荷華州愛荷華市，但它可以在文本編輯器中輕鬆修改。任何想法在這裏都會很有幫助。

來源

2015-11-23 gis4lib

我想我明白了。

我不得不使用一些技巧（一些也許有點髒）

我把500ms的延遲與setTimeout的;這本來可以做更多的優雅，無疑
我做一個臨時的多邊形，因爲它允許使用containsLocation（）
我不調用點擊，但有一個環在多邊形功能，我閱讀說明那裏，然後將其設置到div

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Google maps</title> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script type="text/javascript" src=http://maps.google.com/maps/api/js?v=3&sensor=true&language=en"></script> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map_canvas { 
     height: 100%; 
     } 
     #info-box { 
     background-color: white; 
     border: 1px solid black; 
     bottom: 30px; 
     height: 20px; 
     padding: 10px; 
     position: absolute; 
     left: 30px; 
     } 
    </style> 

<script type="text/javascript"> 


    //centers the map on Iowa City 
    var map, 
     currentPositionMarker, 
     mapCenter = new google.maps.LatLng(41.661354, -91.534729), 
     map; 

    function initializeMap() { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 18, 
     center: mapCenter, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     map.data.loadGeoJson('test2.json'); 
     map.data.setStyle({ 
     strokeColor: '#2687bf', 
     strokeWeight: 5 
     }); 
     map.data.addListener('click', function(event) { 
     document.getElementById('info-box').textContent = event.feature.getProperty('description'); 
     }); 

    } 
    function locError(error) { 
     // the current position could not be located 
    } 
    function setCurrentPosition(pos) { 

     currentPositionMarker = new google.maps.Marker({ 
     map: map, 
     draggable: true, 
     position: new google.maps.LatLng(
      pos.coords.latitude, 
      pos.coords.longitude 
     ), 
     title: "Current Position" 
     }); 

     // Wait half a second, then take a loop of the features, see if the marker is inside one of them 
     setTimeout(function() { 
     map.data.forEach(function(feature){ 
      var figure = feature.getGeometry(); 
      if(figure.getType() == 'Polygon') { 

      // make a temporary polygon, see if the marker is inside 
      var tempPolygon = new google.maps.Polygon({ 
       paths: figure.getAt(0).getArray(), // @see http://stackoverflow.com/questions/33249127/using-containslocation-with-a-google-maps-data-polygon 
       map: null 
      }); 

      if(google.maps.geometry.poly.containsLocation(currentPositionMarker.getPosition(), tempPolygon)) { 
       // marker is inside this feature 
       // invoke a click. well, just pretend ... 
       document.getElementById('info-box').textContent = feature.getProperty('description'); 
      } 
      } 
      var b; 
     }) 
     }, 500); 

     map.panTo(new google.maps.LatLng(
     pos.coords.latitude, 
     pos.coords.longitude 
    )); 
    } 
    function displayAndWatch(position) { 
     // set current position 
     setCurrentPosition(position); 
     // watch position 
     watchCurrentPosition(); 
    } 
    function watchCurrentPosition() { 
     var positionTimer = navigator.geolocation.watchPosition(function (position) { 
     setMarkerPosition(
      currentPositionMarker, 
      position 
     ); 
     }); 
    } 
    function setMarkerPosition(marker, position) { 
     marker.setPosition(
      new google.maps.LatLng(
      position.coords.latitude, 
      position.coords.longitude 
     ) 
     ); 
     // now we see if the marker is inside one of the polygons 
     var a = 0; 
    } 
    function initLocationProcedure() { 
     initializeMap(); 
     if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(displayAndWatch, locError); 

     } 
     else { 
     // alert("Your browser does not support the Geolocation API"); 
     } 
    } 
    $(document).ready(function() { 
     initLocationProcedure(); 
    }); 
    </script> 
    </head> 
    <body> 
     <div id="map_canvas" style="height:600px;"></div> 
    <div id="info-box" style="height:250px;">INFO</div> 
    </body> 
</html>

來源

2015-11-24 15:24:30

是。非常感謝！這看起來工作得很好。我在手機上進行了現場測試，雖然有時候有點碰撞或缺失，但我認爲這不是代碼問題。事實上，它正常工作對我來說已經足夠了。嘿，骯髒與否，這將幫助我非常。我非常感謝你的時間。 – gis4lib

谷歌地圖API：想要地理位置在

回答

相關問題