Google Map地理位置和業務類型顯示

首先，我想感謝大家可以幫助我，並說我是一名開發人員。Google Map地理位置和業務類型顯示

我試圖設置代碼爲Google地圖的地理定位只顯示出租車類型的地點標記。這個想法是，當我的網頁的訪問者進入該網站時，地圖會將訪問者位置和地圖進行地理定位，並且地圖僅顯示附近的租車地點。

我得到了geolocalization谷歌代碼：

<div id="map" style="width: 100%; height: 500px;"></div> 
<script> 
    // Note: This example requires that you consent to location sharing when 
    // prompted by your browser. If you see the error "The Geolocation service 
    // failed.", it means you probably did not give permission for the browser to 
    // locate you. 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 6 
    }); 
    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('Location found.'); 
     map.setCenter(pos); 
     }, 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> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=[MYAPIKEY]&callback=initMap"> 
</script>

，它工作正常，但現在，我正在閱讀有關地方和類型，我沒有成功。

有什麼想法？任何人都可以幫助我？

此致敬意。

霍爾迪五 CarRentals.Deals

來源

2017-10-19 Car Rental Deals

在谷歌的地方JavaScript庫的功能使應用程序能夠搜索的地方包含內（這個API爲場所，地理位置或名勝景點中定義）定義的區域，例如地圖邊界或固定點附近。

Google Places API提供了一個自動完成功能，您可以使用該功能爲您的應用程序提供Google Maps搜索字段的提前輸入搜索行爲。當用戶開始輸入地址時，自動填充會填寫剩下的內容。欲瞭解更多信息，請參閱autocomplete documentation。

在我的示例中，我使用了附近的搜索 - 可以按關鍵字或類型搜索指定區域內的地點。它使用PlacesService的nearbySearch（）方法，該方法將返回一組PlaceResult對象。要了解更多，你可以檢查this鏈接。現在讓我們來看看代碼分解。

var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch({ 
        location: location, 
        radius: 500, 
        type: ['car_rental'] 
}, callback);

您可以使用屬性'bounds'或'location'，在我們的例子中，我們使用的是'location'。請注意，如果您使用的是「位置」，則還需要提供「半徑」屬性。允許的最大「半徑」是50000米。我們還使用'type'屬性。它將結果限制爲與指定類型匹配的位置。只能指定一種類型（如果提供了多種類型，忽略第一項後的所有類型）。請參閱list of supported types。

回調函數接受兩個參數。結果和狀態。你可以製作你自己的參數名稱。這個（回調）是我們將添加你想要執行的代碼的地方，如果'狀態'參數是好的。回調函數：

function(results, stat){ 
      if (stat === google.maps.places.PlacesServiceStatus.OK) { 
      for (var i = 0; i < results.length; i++) { 
       var place = results[i]; 
       createMarker(results[i], map);   
      }   
      }  
     });  

});

如果結果是好的，返回的值是一個數組，所以你需要通過每個陣列迭代並將其顯示爲谷歌標記。要詳細瞭解Google標記，您可以查看this。下面是createMarker函數的定義：

function createMarker(place, map) { 
    var placeLoc = place.geometry.location; 
    infowindow = new google.maps.InfoWindow(); 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
}); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(place.name); 
     infowindow.open(map, this); 
    }); 
}

完整的代碼在這裏：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title></title> 
    <style> 
    html,body,#map { 
     width:100%; 
     height:100%; 
    } 
    </style> 
</head> 
<body> 
<div id="map"></div> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places"> 
</script> 
<script> 
function initMap() { 
var map; 
var infowindow; 
// Try HTML5 geolocation. 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function(position) { 
var pos = { 
lat: position.coords.latitude, 
lng: position.coords.longitude 
}; 
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
map = new google.maps.Map(document.getElementById('map'), { 
    center:location, 
    zoom: 12 
}); 
var service = new google.maps.places.PlacesService(map); 
service.nearbySearch({ 
location: location, 
radius: 500, 
type: ['car_rental'] 
}, function(results, stat){ 
if (stat === google.maps.places.PlacesServiceStatus.OK) { 
for (var i = 0; i < results.length; i++) { 
var place = results[i]; 
createMarker(results[i], map);   
}   
}  
});  
}); 
} else { 
alert("Browser doesn't support Geolocation"); 
} 
} 
function createMarker(place, map) { 
var placeLoc = place.geometry.location; 
infowindow = new google.maps.InfoWindow(); 
var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location 
}); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
}); 
}  
</script> 
</body> 
</html>

工作演示here。

希望它有幫助！

來源

2017-10-23 08:13:56 rafon

嗨，非常感謝。完美的作品！希望它能幫助其他人。美好祝願。 –

如果我的回答對你有幫助，你會介意接受嗎？謝謝：） – rafon

Google Map地理位置和業務類型顯示

回答

相關問題