有没有办法可以在网站地图 (pHp) / Wordpress 上显示附近的兴趣点

Question

我是 StackOverflow 和编码领域的新手（主要是自学）。

我一直在尝试解决一个轻微的功能要求： 我正在使用地图的 Wordpress 网站上工作。我已经设置了 Google Maps API（Javascript、地点、地理编码）。

我想在我的网站上显示一张地图，该地图会获取用户的当前位置并在其周围显示 10-30 公里半径内的紧急点，例如自动取款机、警察局、医院等。我依赖于显示在该地图上的 Google 地图数据本身。

我可以从 SO 社区获得有关如何积极实现这一目标的任何见解/帮助/指导吗？任何帮助将不胜感激。

Answer 1

您可以在 JavaScript 代码 中使用 Google Maps Platform Maps JavaScript API 以及 HTML5 地理位置功能 和 Google Maps Places Library 的附近搜索请求。

这是一个sample code，我在此用例上为您提供帮助。这里也是代码的细分：

1. 获取用户位置并将其固定在地图中心

使用Geolocation code example 来实现这一点。代码如下：

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


            map.setCenter(pos);
            //Put marker of the Geolocated user location
            var userMarker = new google.maps.Marker({
                map: map,
                position: pos
            });

            google.maps.event.addListener(userMarker, 'click', function() {
                infoWindow.setContent('Your location');
                infoWindow.open(map, this);
            });

1. 使用Places Library's Nearby Search 请求获取您想要的附近地点类型。由于 Nearbysearch 在请求中仅指定 一种 类型，因此您需要创建 3 个请求变量，如下所示：

            var requestHosp = {
                location: pos,
                radius: '10000',
                type: ['hospital']
            };
            var requestAtm = {
                location: pos,
                radius: '10000',
                type: ['atm']
            };
            var requestPolice = {
                location: pos,
                radius: '10000',
                type: ['police']
            };

然后像这样发出 Places NearbySearch 请求：

            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(requestHosp, callback);
            service.nearbySearch(requestAtm, callback);
            service.nearbySearch(requestPolice, callback);

注意它正在调用一个回调函数。此函数为返回的每个地点创建一个标记。这个函数应该是这样的：

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

对于createMarker 函数，首先您需要检查地点类型数组上的特定地点类型，以确定您将在您的地点使用的图标。它应该是这样的：

 var type = place.types;
    var iconStyle;
    //loop to all the type of the place
    for (var i = 0; i < type.length; i++) {
        //put array of Place types in placeType variable
        var placeType = type[i];        
        //Check the placeType and set the icon according to the placeType value
        switch (placeType) {
            case "hospital":
                iconStyle = "http://maps.google.com/mapfiles/kml/shapes/pharmacy_rx.png"
                break;
            case "atm":
                iconStyle = "http://maps.google.com/mapfiles/kml/shapes/dollar.png";
                break;
            case "police":
                iconStyle = "http://maps.google.com/mapfiles/kml/shapes/police.png"
                break;
        }
    }

//put marker of the places in the map
    var marker = new google.maps.Marker({
        map: map,
        icon: iconStyle,
        position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(place.name);
        infoWindow.open(map, this);
    });
}