Google点击附近的更改类型

我正在研究一个项目，我想在Google地图上显示选定的活动并提供一些其他信息。（例如所有加油站半径2公里）。谷歌不允许多种类型的附近搜索。Google点击附近的更改类型

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

因此，现在我想改变类型（例如gas_station或store），如果我点击我添加的自定义按钮。（使用谷歌文档例子）

截图：http://imgur.com/qYwLuw4

问题： 这是改变的类型和刷新用新信息的地图的最佳方式？

来源

2017-06-01 Stefano Rutishauser

我想向您介绍我们的解决方案。我们写了一个clear（）和一个showType（）函数，它将清除所有标记并让正确的标记出现在点击中。顺便说一句，我们给这个按钮一个叫做“selected”的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>

来源

2017-06-27 11:57:33

Google点击附近的更改类型

回答

相关问题