Question

我正在开展一个项目，我想在谷歌地图上显示选择的事件以及其他一些信息。（例如，所有加油站半径2公里）。 Google不允许附近有多种类型的搜索。

将结果限制为与指定类型匹配的位置。只能指定一种类型（如果提供了多种类型，则忽略第一个条目后面的所有类型）。

所以现在我想更改类型（例如gas_station或商店），如果我点击我添加的自定义按钮。（使用谷歌文档示例）

问题： 哪个是更改类型并使用新信息刷新地图的最佳方法？

Answer 1

我想向您介绍我们的解决方案。我们编写了一个clear（）和一个showType（）函数，它将擦除所有标记，并在点击时显示正确的标记。顺便说一句，我们给按钮一个名为＆＃34;选择＆＃34;的状态类。用于CSS样式。

我们没有找到显示两者（洗涤站和燃料站）的解决方案。

<script type="text/javascript">
    var map;
    var infowindow;
    var service;
    var eventLocation = {lat: <?= $arrCoordinates['latitude']?>, lng: <?= $arrCoordinates['longitude']?>};
    var markers = [];
    var wash = document.getElementById('wash'); //washbutton
    var fuel = document.getElementById('fuel'); //fuelstation button

    function initMap() {
        map = new google.maps.Map(document.getElementById('eventmap'), {
            center: eventLocation,
            zoom: 13,
        });

        infowindow = new google.maps.InfoWindow();
        service = new google.maps.places.PlacesService(map);
        showType('gas_station');
        fuel.classList.add("selected");


        typeControl(map);
    }

    // Type control function
    function typeControl ( map ) {

        google.maps.event.addDomListener(fuel, 'click', function() {
            wash.classList.remove("selected");
            fuel.classList.remove("selected");
            clear()
            showType('gas_station')
            this.classList.add("selected");   
        });

        google.maps.event.addDomListener(wash, 'click', function() {
            wash.classList.remove("selected");
            fuel.classList.remove("selected");
            clear()
            showType('car_wash')
            this.classList.add("selected");
        });
    }

    function showType(type) {    
        service.nearbySearch({
            location: eventLocation,
            radius: 10000,
            type: [type]
        }, callback);
    }
    function clear() {
        markers.forEach(marker => marker.setMap(null));
        markers = [];
    }

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

    function createTuningEventMarker(place) {
        var eventLocation = {lat: <?= $arrCoordinates['latitude']?>, lng: <?= $arrCoordinates['longitude']?>};
        var eventIcon = {
          url: 'https://www.foo.lol/img/icons/pin.svg',
          // This marker is 20 pixels wide by 32 pixels high.
          scaledSize: new google.maps.Size(60, 60),
          // The origin for this image is (0, 0).
          origin: new google.maps.Point(0,0),
          // The anchor for this image is the base of the flagpole at (0, 32).
          anchor: new google.maps.Point(30,60)
        };

        var marker = new google.maps.Marker({
            map: map,
            icon:eventIcon,
            position: eventLocation
      });

      google.maps.event.addListener(marker, 'click', function() {

        infowindow.setContent('<?= $event['name']?>');
        infowindow.open(map, this);
      });
    }

        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
        });
        markers.push(marker);

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(place.name + "<br>Adress: " + place.vicinity);
            infowindow.open(map, this);
        });
    }

</script>

点击Google附近的更改类型

1 个答案: