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地理位置和业务类型显示

回答

相关问题