如何使用jquery gmap3单击链接显示信息窗口

Question

我正在使用jquery gmap3来显示一个带有标记的地图，该标记用于从我建立的搜索中找到的每个结果。 每个标记都有一个信息窗口，当有人单击地图上的标记，信息窗口会显示该信息时，该信息窗口会显示有关标记所处位置的详细信息。 在地图下方，我显示找到的结果的列表，对于找到的每个结果，我想要做的就是有一个链接，当有人单击该链接时，页面会向上滚动到地图，然后居中到结果所属的标记，并且信息窗口会自动弹出。 那可能吗？ 这是我的代码：

  var base_lat = 33.609063;
  var base_lon = -112.105135;
  var base_markers = [{"latLng":["33.609063","-112.105135"],"data":"<div class=\"estate_info\"><img src=\"\/img\/realestate\/test_estate.jpg\"><b><a href=\"\/charming-payette-lake-cabin-with-private-dock-beach-rl2\">1022 E. St. Mill Valley, CA 85282<\/a><\/b><ul><li><label>Beds:<\/label>6<\/li><li><label>Baths:<\/label>3.0<\/li><li><label>Levels:<\/label>2<\/li><\/ul><ul><li><label>Price:<\/label>$520,000<\/li><li><li><label>Sqft:<\/label>5,600<\/li><li><a href=\"\/charming-payette-lake-cabin-with-private-dock-beach-rl2\">View Details &raquo;<\/a><\/li><\/ul><\/div>","options":{"icon":"\/img\/markers\/number_1.png"}},{"latLng":["33.479913","-111.699535"],"data":"<div class=\"estate_info\"><img src=\"\/img\/realestate\/default_estate.jpg\"><b><a href=\"\/single-level-mountain-view-home-in-central-laveen-rl1\">South of Baseline Rd \/ 51st Ave Laveen, CA 85384<\/a><\/b><ul><li><label>Beds:<\/label>3<\/li><li><label>Baths:<\/label>2.5<\/li><li><label>Levels:<\/label>1<\/li><\/ul><ul><li><label>Price:<\/label>$124,563<\/li><li><li><label>Sqft:<\/label>2,500<\/li><li><a href=\"\/single-level-mountain-view-home-in-central-laveen-rl1\">View Details &raquo;<\/a><\/li><\/ul><\/div>","options":{"icon":"\/img\/markers\/number_2.png"}}];

        $('#searchmap').gmap3({

        map:{

            options:{

                center:[base_lat,base_lon],
                zoom: 9,
                mapTypeControl: true,
                mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                navigationControl: true,
                scrollwheel: true,
                streetViewControl: true
            }

        },

        marker:{

            values: base_markers,

            options:{

                draggable: false

            },

            events:{

                click: function(marker, event, context) {

                    var map = $(this).gmap3("get"),

                    infowindow = $(this).gmap3({get:{name:"infowindow"}});

                    if (infowindow) {

                        infowindow.open(map, marker);
                        infowindow.setContent(context.data);

                    }else {

                        $(this).gmap3({

                            infowindow:{

                                anchor:marker,
                                options:{content: context.data}

                            }

                        });

                    }

                }

            }

        }

    });

这是我在地图下显示的结果：

    <ul>
<li class="listing first">
                                       <div class="rphoto"><a href="#" style="background-image:url('/img/realestate/test_estate.jpg');"></a></div>
                                       <div class="details">
                                         <strong>1. <a href="#">Charming Payette Lake Cabin with private dock & beach</a></strong>
                                         <span>Type: Condo | Built: 1995 | Status: Backup or Contingent</span>
                                         <div class="info">This charming cabin is located on Payette Lake with private dock and beach. It offers 2 Bedroom and 1 Bath. Sleeps 8 with 2 Doubles, 1 bunk and 1 queen hideabed...<nav>Mill Valley, CA | Price: $520,000 | <a href="#">View Details &raquo;</a></nav></div>
                                         <ol>
                                           <li>6<br>Bed</li>
                                           <li>3.0<br>Bath</li>
                                           <li class="last">5,600<br>Sqft</li>
                                         </ol>
                                       </div>
                                      </li>
<li class="listing last">
                                       <div class="rphoto"><a href="#" style="background-image:url('/img/realestate/default_estate.jpg');"></a></div>
                                       <div class="details">
                                         <strong>2. <a href="#">Single-level mountain-view home in central Laveen</a></strong>
                                         <span>Type: House | Built: 2003 | Status: Active</span>
                                         <div class="info">With 3,200 square feet of living area and located just one lot back from the ocean, makes childhood dreams of fantastic sandcastles come true - and you can be one of the...<nav>Laveen, CA | Price: $124,563 | <a href="#">View Details &raquo;</a></nav></div>
                                         <ol>
                                           <li>3<br>Bed</li>
                                           <li>2.5<br>Bath</li>
                                           <li class="last">2,500<br>Sqft</li>
                                         </ol>
                                       </div>
                                      </li>
</ul>

因此，在搜索结果中又如何获得它们的位置，如果他们单击某个结果的链接，则它将地图居中于该标记所在的位置，因此示例第二个结果将居中于地图上的第二个标记，然后信息窗口将自动显示。 如何使用jquery gmap3代码做到这一点？ 这是Im所指的示例：

http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar_plain.htm

Answer 1

好吧，我能够弄清楚。 这是我添加的jQuery代码：

    $(".propertyclick").click(function() {

        //We first scroll to top of page
        $("html,body").animate({ scrollTop: 0 },"fast");

        //We then get the current id of the marker being clicked
        var id = $(this).attr('data-marker');

        //We now get the marker in the map that they want to see
        var marker = $("#estate_searchmap").gmap3({ get: { id: id } });

        //We now simulate that marker being clicked via the map
        google.maps.event.trigger(marker,'click');

        return false;

    });

在清单结果中，我添加了一个链接，供他们单击以触发此操作：

<a href="" class="propertyclick" data-marker="property1"></a>

data-marker保留了我分配给我的原始代码base_markers的json值中每个标记的ID。 因此，现在您将在每个标记中看到一个新值，例如id：“ property1”，下一个将是id：“ property2”，依此类推。 这就是我在上面的click函数中引用以知道要调用哪个标记的方式。