将搜索附近的侧面板添加到自定义 Google 地图

Question

我在将 Google Places API 与 Google Map API 集成时遇到了困难。

我有以下用于自定义样式地图的自定义代码。但是，我尝试在附近添加餐厅、酒吧等搜索的部分不起作用。我一直在关注并阅读此页面上的文档https://developers.google.com/maps/documentation/javascript/places#TextSearchRequests 以尝试理解并且它正在工作。我希望在我的地图中有实际的侧面板。谢谢！

 <script>
window.onload = function () {
    var styles = [
        {
            featureType: 'water',
            elementType: 'all',
            stylers: [
                { hue: '#7da6d3' },
                { saturation: 8 },
                { lightness: -13 },
                { visibility: 'on' }
            ]
        },{
            featureType: 'landscape.man_made',
            elementType: 'all',
            stylers: [
                { hue: '#ffffff' },
                { saturation: -100 },
                { lightness: 100 },
                { visibility: 'on' }
            ]
        },{
            featureType: 'road',
            elementType: 'all',
            stylers: [
                { hue: '#7e90ad' },
                { saturation: -78 },
                { lightness: -8 },
                { visibility: 'simplified' }
            ]
        },{
            featureType: 'poi.park',
            elementType: 'all',
            stylers: [
                { hue: '#83cca5' },
                { saturation: -3 },
                { lightness: -16 },
                { visibility: 'simplified' }
            ]
        },{
            featureType: 'poi.school',
            elementType: 'all',
            stylers: [
                { hue: '#dddddd' },
                { saturation: -100 },
                { lightness: 22 },
                { visibility: 'on' }
            ]
        },{
            featureType: 'poi.place_of_worship',
            elementType: 'all',
            stylers: [
                { hue: '#dddddd' },
                { saturation: -100 },
                { lightness: 11 },
                { visibility: 'simplified' }
            ]
        },{
            featureType: 'poi.business',
            elementType: 'geometry',
            stylers: [
                { hue: '#96A6C5' },
                { saturation: 16 },
                { lightness: -20 },
                { visibility: 'on' }
            ]
        },{
            featureType: 'transit',
            elementType: 'geometry',
            stylers: [
                { hue: '#7da6d3' },
                { saturation: 49 },
                { lightness: -12 },
                { visibility: 'on' }
            ]
        }
    ];

var options = {
    mapTypeControlOptions: {
        mapTypeIds: ['Styled']
    },
    center: new google.maps.LatLng(39.9534988, -75.1748003),
    zoom: 16,
    disableDefaultUI: false,
    mapTypeId: 'Styled'
};
var div = document.getElementById('googleMap');
var map = new google.maps.Map(div, options);

var building = {lat: 39.9534988, lng: -75.1748003};
var image = 'images/marker.jpg';
var marker = new google.maps.Marker({
    position: building,
    map: map,
    icon: image
});



var styledMapType = new google.maps.StyledMapType(styles, { name: '1919 Market' });
map.mapTypes.set('Styled', styledMapType);
}

var request = {
     location: building,
     radius: '500',
     query: 'restaurant'
 };

var service = new google.maps.places.PlacesService(map);
service.radarSearch(request, callback);


</script>

Answer 1

查看您的代码，您似乎需要修复很多问题。对于初学者，我建议您需要完整的示例here，只需修改它以包含您想要的自定义。

注意：不要使用 window.onload，而是使用脚本中的回调属性来指定将在 api 准备好使用后调用的函数。 （参见下面代码中的 initMap）。

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

更新：

您可能需要学习Google Places API 来实现您想要的。这是example 中关于地点搜索的工作原理。