Question

我有以下代码显示某处附近的学校和清真寺。

<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图像为shools和第二个png图像为清真寺。

这可能是最好的方法吗？我不知道可能需要为每个标记创建两个不同的函数来显示。

提前致谢。

Answer 1

在您的createMarker函数中，您可以引用place.types - 一系列类型。注意：有些地方不止一种。您应该检查该数组是否包含“school”或“mosque”，并根据需要设置用于该标记的图标。

    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中每种位置类型的单独标记

1 个答案: