Question

在这里，我创建了一个代码，用于在地图和侧边栏中显示google places api中的地点。

但我不知道如何在侧边栏中显示没有照片的地方，并提供有关此内容的信息

看看这个：http://jsbin.com/umaruq/1，所以当我在地图上输入“条形图”显示所有条形图时，但在侧边栏中我无法获得没有照片的条形图

消息来源：http://jsbin.com/umaruq/1/edit DEMO：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)但是有错误

有没有办法解决这个问题并在侧边栏中显示所有地方（有照片和没有照片）？

Answer 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

在谷歌旁边的api中显示侧边栏中的照片

1 个答案: