0

ある場所の近くにある学校とモスクを表示するために、次のコードがあります。

<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>

現在、場所に最も近い学校とモスクが表示され、すべての場所に画像のマーカーが追加されています（すべての学校とモスク）。私がやりたいのは、場所の種類ごとに別々のマーカーを表示することです。シュール用の1つのpng画像とモスク用の2番目のpng画像。

これを行うための最良の方法は何でしょうか？マーカーごとに2つの異なる関数を作成して表示する必要があるかもしれません。

前もって感謝します。

4

1 に答える 1

1

createMarker 関数ではplace.types、型の配列を参照できます。注: いくつかの場所は複数のタイプになります。その配列に「学校」または「モスク」が含まれているかどうかを確認し、そのマーカーに使用するアイコンを適切に設定する必要があります。

    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

于 2012-08-02T10:54:31.657 に答える