1

ここでは、Google Places API の場所をマップとサイドバーに表示するコードを作成します。

しかし、サイドバーに写真のない場所を表示し、これに関する情報を表示する方法がわかりません

これを見てください：http://jsbin.com/umaruq/1、マップに「バー」と入力するとすべてのバーが表示されますが、サイドバーでは写真なしでバーを取得できません

ソースコード: http://jsbin.com/umaruq/1/editデモ: http://jsbin.com/umaruq/1

それがこのコードの問題だと思います：

 $("#side_bar").empty();
      for (var i = 0, place; place = places[i]; i++) {
        if (place.photos) {
          markers.push(new PhotoMarker(place, map, modalWindow));
          setLink(i);              
        bounds.extend(place.geometry.location);
        } else {
          markers.push(new google.maps.Marker({
            position: place.geometry.location,
            map: map,
            icon: new google.maps.MarkerImage(
                'http://carsedia.com/code/voyage/icons/7.png',
                null, null, new google.maps.Point(3.5,3.5)),
            clickable: false
          }));
        } 
      }

私は試してみました: if (place.name)しかし、エラーがあります

これを解決してすべての場所 (写真ありと写真なし) をサイドバーに表示する方法はありますか?

4

1 に答える 1

1

写真がある場合のみリンクを貼ってください。次のようなものを試すことができます：

  for (var i = 0, place; place = places[i]; i++) {
    if (place.photos) {
      markers.push(new PhotoMarker(place, map, modalWindow));
      setLink(i, true);              
    bounds.extend(place.geometry.location);
    } else {
      markers.push(new google.maps.Marker({
        position: place.geometry.location,
        map: map,
        icon: new google.maps.MarkerImage(
            'http://carsedia.com/code/voyage/icons/7.png',
            null, null, new google.maps.Point(3.5,3.5)),
        clickable: false
      }));
      /* if no photo, put false as 2nd argument */
      setLink(i, false);              
    } 
  }

「setLink」関数を編集します。

function setLink(i, has_photo) {
    var photo = has_photo ? place.photos[0].getUrl({ 'maxWidth': 50, 'maxHeight': 50 }) : 'http://carsedia.com/code/voyage/icons/7.png';
    var sideClick = jQuery("<a class=side_click href='#'></a>");
    $(sideClick).html(place.name+place.opening_hours);
    $("#side_bar").append(sideClick).append("<br>").append("<div class='draggable'><img src="+photo+" style='width:50px'></img></div><br><p></p>");
    $(sideClick).on("click", function() {
        markers[i].modalWindow_.getDetails(markers[i].place_);
    });
 }

見てください：http://jsbin.com/umaruq/3

于 2013-08-12T12:44:51.593 に答える