爲當前位置導入Google地圖的infowindow信息

我正在使用Google Maps JavaScript API。示例代碼;我想讓我接近，但沒有達到我所希望的。爲當前位置導入Google地圖的infowindow信息

我硬編碼'placeid' 我希望能夠引入當前位置。我確實將示例代碼中的當前位置帶入，但Infowindow信息是硬編碼的。

我希望學習如何在不需要對其進行硬編碼的情況下動態地引入「當前位置」標記和「Infowindow」位置信息。

我破碎的腳本如下>>

<script> 
    function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: { 
       lat: 42.0491125, 
       lng: -92.91123340000001 
      }, 
      zoom: 12 
     }); 

     var infowindow = new google.maps.InfoWindow(); 
     //  var infoWindow = new google.maps.InfoWindow({map: map}); 
     var service = new google.maps.places.PlacesService(map); 
     service.getDetails({ 
      // I would like to bring in the current position not a static place id 
      placeId: 'EioxMDEgRSBNYWluIFN0LCBNYXJzaGFsbHRvd24sIElBIDUwMTU4LCBVU0E' 
     }, function(place, status) { 
      if (status === google.maps.places.PlacesServiceStatus.OK) { 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: place.geometry.location 
       }); 
       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 
         'lat lng: ' + place.geometry.location + '<br>' + 
         place.formatted_address + '</div>'); 
        infowindow.open(map, this); 
       }); 
      } 
     }); 

     var infoWindow = new google.maps.InfoWindow({ 
      map: map 
     }); 

     // Try HTML5 geolocation. 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
       var pos = { 
        lat: position.coords.latitude, 
        lng: position.coords.longitude 
       }; 

       infoWindow.setPosition(pos); 
       infoWindow.setContent('Home Point.'); 
       map.setCenter(pos); 

       var marker = new google.maps.Marker({ 

        title: 'Your current location', 
        map: map, 
        // title: 'Your current location' 
       }); 

      }, function() { 
       handleLocationError(true, infoWindow, map.getCenter()); 
      }); 
     } else { 
      // Browser doesn't support Geolocation 
      handleLocationError(false, infoWindow, map.getCenter()); 
     } 
    } 

    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
     infoWindow.setPosition(pos); 
     infoWindow.setContent(browserHasGeolocation ? 
      'Error: The Geolocation service failed.' : 
      'Error: Your browser doesn\'t support geolocation.'); 
    } 
</script> 
</head> 

<body> 
    <div id="map"></div> 
    <script async defer src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&libraries=places&callback=initMap"> 
    </script> 
</body> 

</html>

來源

2016-03-06 Chris S

您是否試過[nearbySearch]（https://developers.google.com/maps/documentation/javascript/places#place_search_requests）？ – geocodezip

看着'nearbySearch'我找到一個顯示我想要的'infowindow'的類型。 https://developers.google.com/places/place-id#example-using-the-places-library-in-the-google-maps-javascript-api但是，而不是搜索我想做的地理位置，如https：/ /developers.google.com/maps/documentation/javascript/examples/map-geolocation。但請注意GeoLocation示例，它只說'找到位置'。不是地方，PlaceID和地址。 –

您可以結合Geolocation service來確定當前位置，然後Reverse Geocoding解析地址信息（INC。的地方ID）爲證明以下

function initMap() { 
 
\t var map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t center: { lat: 42.0491125, lng: -92.91123340000001 }, 
 
\t \t zoom: 12 
 
\t }); 
 

 

 

 
\t var infoWindow = new google.maps.InfoWindow({ map: map }); 
 

 

 
\t // Try HTML5 geolocation. 
 
\t if (navigator.geolocation) { 
 
\t \t navigator.geolocation.getCurrentPosition(function (position) { 
 
\t \t \t var pos = { 
 
\t \t \t \t lat: position.coords.latitude, 
 
\t \t \t \t lng: position.coords.longitude 
 
\t \t \t }; 
 

 

 
\t \t \t resolvePlace(pos, 
 
\t \t \t \t function (place) { 
 

 
\t \t \t \t \t var marker = new google.maps.Marker({ 
 
\t \t \t \t \t \t title: place.formatted_address, 
 
\t \t \t \t \t \t map: map, 
 
\t \t \t \t \t \t position: pos 
 
\t \t \t \t \t }); 
 

 

 
\t \t \t \t \t //infoWindow.setPosition(pos); 
 
\t \t \t \t \t infoWindow.setContent(place.formatted_address); 
 
\t \t \t \t \t map.setCenter(pos); 
 
\t \t \t \t \t infoWindow.open(map,marker); 
 

 
\t \t \t \t }, 
 
\t \t \t \t function (status) { 
 
\t \t \t \t \t infoWindow.setPosition(pos); 
 
\t \t \t \t \t infoWindow.setContent('Geocoder failed due to: ' + status); 
 
\t \t \t \t }); 
 

 

 
\t \t }, function() { 
 
\t \t \t handleLocationError(true, infoWindow, map.getCenter()); 
 
\t \t }); 
 
\t } else { 
 
\t \t // Browser doesn't support Geolocation 
 
\t \t handleLocationError(false, infoWindow, map.getCenter()); 
 
\t } 
 
} 
 

 

 
function resolvePlace(pos, success, error) { 
 

 
\t var geocoder = new google.maps.Geocoder; 
 
\t geocoder.geocode({ 'location': pos }, function (results, status) { 
 
\t \t if (status === google.maps.GeocoderStatus.OK) { 
 
\t \t \t if (results[0]) { 
 
\t \t \t \t success(results[0]); 
 
\t \t \t } else { 
 
\t \t \t \t error('No results found'); 
 
\t \t \t } 
 
\t \t } else { 
 
\t \t \t error(status); 
 
\t \t } 
 
\t }); 
 

 
} 
 

 

 

 

 
function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
 
\t infoWindow.setPosition(pos); 
 
\t infoWindow.setContent(browserHasGeolocation ? 
 
\t \t 'Error: The Geolocation service failed.' : 
 
\t \t 'Error: Your browser doesn\'t support geolocation.'); 
 
}

html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
} 
 
#map { 
 
     height: 100%; 
 
}

<div id="map"></div> 
 
<script async defer 
 
src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"> 
 
</script>

Plunker

來源

2016-03-07 22:21:50

爲當前位置導入Google地圖的infowindow信息

回答

相關問題