0

さまざまなカテゴリのマーカーを作成し、さまざまな場所の種類ごとに異なるマーカーアイコンを使用する場合。条件付きでGoogleマッププレイスタイプをテストする方法

 function createMarker(place) { 
     var placeLoc = place.geometry.location; 
     var marker = new google.maps.Marker({ 
      map: mapit, 
      position: place.geometry.location, 
      icon: "link-to-icon" 
     }); 
     } 

場所が異なるタイプであるかどうかをテストするために上記のコードに含めることはできますか?正しいの構文は何

 function createMarker(place) { 
     var placeLoc = place.geometry.location; 
     var marker = new google.maps.Marker({ 
      map: mapit, 
      position: place.geometry.location, 
      icon: "link-to-icon" 
     }); 
     if (place.type == ['cafe']) { 
      marker.setIcon("link-to-cafe-icon]"); 
     } 
     if (place.type == ['night_club']) { 
      marker.setIcon("link-to-night-club-icon]"); 
     } 
     } 

それとも

 function createMarker(place) { 
     var placeLoc = place.geometry.location; 
     if (place.type == ['cafe']) { 
      var marker = new google.maps.Marker({ 
      map: mapit, 
      position: place.geometry.location, 
      icon: "link-to-cafe-icon" 
      }); 
     } 
     if (place.type == ['night_club']) { 
      var marker = new google.maps.Marker({ 
      map: mapit, 
      position: place.geometry.location, 
      icon: "link-to-night-club-icon" 
      }); 
     } 
     } 

:ちょうど2つのタイプの「night_club」と「カフェ」私はこれらの線に沿って何かのために行くんだと例えば

place.type?私は、Google Maps APIのドキュメントで、そのようなものやplace.getTypeなど、条件文のプレースタイプを取得するものは表示されません。

条件を作成して、さまざまな場所の種類のマーカーに異なるアイコンを表示するにはどうすればよいですか?

答えて

1

に場所APIを示唆してはそれぞれの結果ではなく、typeためtypes配列を返します。これは、1つの場所に["restaurant", "lodging"]のような複数のタイプを割り当てることができるためです。 supported typesのリストは次のとおりです。 「場所の検索」を使用する場合はhere、「場所の詳細」を使用する場合はhereを参照してください。

アイコンを決定するためのコードは、単純なスイッチよりも複雑にする必要があります。たぶん、types配列に特定のタイプの存在を見ることができます。これはあなたのニーズに応じて決まります。多分あなたのようなものを決める必要があります(jQueryライブラリを使用してください):

function isInArray(a, b) { 
    return !!~a.indexOf(b) 
} 

function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var placeIcon = "link-to-default-icon"; //some default icon, if you don't find a match 
    if(isInArray(place.types, "cafe")){ 
     placeIcon = "link-to-cafe-icon"; 
    }else if(isInArray(place.types, "night_club")){ 
     placeIcon = "link-to-night-club-icon"; 
    }//and so on for other icons 
    var marker = new google.maps.Marker({ 
     map: mapit, 
     position: place.geometry.location, 
     icon: placeIcon 
    }); 
    } 
+0

私はjQuery.inArrayを使って、それぞれの一致する型を見つけました。 – javaandy

+0

私はお手伝いできました。 jQueryを使用しない場合は、プレーンjを使用する答えを更新しました。 –

1

私はこのよう

function createMarker(place) { 
     var myIcon; 
     var placeLoc = place.geometry.location; 
     switch (place.type) { 
     case 'cafe': 
      myIcon = "link-to-cafe-icon"; 
      break; 
     case 'night_club': 
      myIcon = "link-to-night-club-icon"; 
      break; 

     } 
     var marker = new google.maps.Marker({ 
     map: mapit, 
     position: place.geometry.location, 
     icon: myIcon 
     }); 

    } 
+0

ありがとうございました。出力が赤のデフォルトのGoogleマーカー – javaandy

+0

でしたが、一度パズルのキーを取得しましたが、実装であなたの素敵なmyIcon構造を使用しました。 – javaandy

関連する問題