Google Places API中每种位置类型的单独标记 [英] Seperate marker for each location type in Google Places API

问题描述

我有以下代码来显示学校和清真寺在某个位置附近.

i have the following code to show school and mosque near to some location.

<script src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

<script>
      var map;
      var infowindow;

      function initialize() {
        var pyrmont = new google.maps.LatLng(<?php echo $lat;?>, <?php echo $lng;?>);

        map = new google.maps.Map(document.getElementById('map1'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: pyrmont,
          zoom: 15
        });

        var request = {
          location: pyrmont,
          radius: 500,
          types: ['school' , 'mosque']
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.search(request, callback);
      }

      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }
      base_Icon = "<?php echo JURI::base();?>components/com_properties/includes/img/school.png";        
        shadow_Icon = "<?php echo JURI::base();?>components/com_properties/includes/img/house-shadow.png";

      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location,
        shadow: shadow_Icon,
        icon: base_Icon 
        });

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

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

<div id="map1" style=" width:<?php echo $params->get('WidthMap','100%');?>; height:<?php echo $params->get('HeightMap','300px');?>;margin:0px;padding:0px;"></div>

现在，它显示离该地点最近的学校和清真寺，并在所有位置(针对所有学校和清真寺)添加图像标记.我想做的是为每种位置类型显示单独的标记.一个用于学校的png图像和一个用于清真寺的第二个png图像.

Right now its showing schools and mosques nearest to location and adding marker of image to all locations (for all schools and mosques). what i want to do is to show separate marker for each location type. one png image for shools and 2nd png image for mosques.

什么是最好的方法?我不知道可能是我需要为每个标记创建两个不同的功能来显示.

what may be the best way to do this? i have no clue may be i need to create two different functions for each marker to show.

谢谢.

推荐答案

在createMarker函数中，您可以引用 place.types -类型数组.注意:有些地方可能不止一种.您应该检查该数组是否包含学校"或清真寺"，并适当地设置要用于该标记的图标.

In your createMarker function, you can refer to place.types - an array of types. NB: some of the places will be of more than one type. You should check to see if that array contains either 'school' or 'mosque', and set the icon to use for that marker as appropriate.

    base_Icon_school = "<?php echo JURI::base();?>components/com_properties/includes/img/school.png";        
    base_Icon_mosque = "<?php echo JURI::base();?>components/com_properties/includes/img/mosque.png";  
    shadow_Icon = "<?php echo JURI::base();?>components/com_properties/includes/img/house-shadow.png";

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker;
    var icon_to_use;

    if (place.types.indexOf('school') != -1) {
           icon_to_use =  base_Icon_school;
    } else if (place.types.indexOf('mosque') != -1) {
           icon_to_use =  base_Icon_mosque;
    }

    marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location,
    shadow: shadow_Icon,
    icon: icon_to_use  
    });

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

请参阅: https://developers.google.com/maps/documentation/javascript/reference#PlaceResult

这篇关于Google Places API中每种位置类型的单独标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！