谷歌地图,在加载和addListener上显示infoWindow

时间:2015-04-22 05:12:54

标签: javascript jquery google-maps

我有一个谷歌地图脚本,允许我在地图上显示带有信息窗口的标记。我担心的是:

a)如何打开并设置每个infoWindow ONLOAD的内容,以便弹出所有infoWindows?

b)如何让jQuery“监听”标记的infoWindow内容?我的a-Tag里面有一个类“show”,我有一个简单的document.ready $('。show')。click(function())在点击窗口内的a-tag时没有做任何事情。在Gmaps之外它工作正常。

希望你能帮忙,在我使用的脚本之下:

    <script type="text/javascript">
        var infowindow = null;

        $(document).ready(function() {
            initialize();
        });

        function initialize() {
            var centerMap = new google.maps.LatLng(38, 10);

            var myOptions = {
                zoom: 5,
                center: centerMap,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            var map = new google.maps.Map(document.getElementById("gmap"), myOptions);

            setMarkers(map, sites);
            infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });

            var bikeLayer = new google.maps.BicyclingLayer();
            bikeLayer.setMap(map);
        }

        var sites = [
            ['Test', 38, 10, 1, '<a href="#" class="show" data-popup="1"><img class="marker_class" src="91ccd318ae8b607500f54e7c56b5350e.png" alt="Preview"></a>']
        ];

        function setMarkers(map, markers) {
            for (var i = 0; i < markers.length; i++) {
                var sites = markers[i];
                var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
                var marker = new google.maps.Marker({
                    position: siteLatLng,
                    map: map,
                    title: sites[0],
                    zIndex: sites[3],
                    html: sites[4]
                });

                var contentString = "Google Maps";

                google.maps.event.addListener(marker, "click", function () {
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });
            }
        }
    </script>

    <div id="gmap" class="map"></div>

1 个答案:

答案 0 :(得分:0)

您可以在创建infowindow之后立即打开它:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="word"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:textSize="30sp"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:id="@+id/word"/>

    <TextView
        android:text="14/36\nM: 1"
        android:layout_width="fill_parent"
        android:layout_height="80dp"
        android:id="@+id/score"
        android:layout_toRightOf="@+id/word"
        android:gravity="right|center"
        android:paddingRight="10dp"/>

    <LinearLayout
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/adapter">

        <Button
            android:text="1"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:id="@+id/opt1"/>

        <Button
            android:text="2"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:id="@+id/opt2" />

        <Button
            android:text="3"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:id="@+id/opt3" />

        <Button
            android:text="4"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:id="@+id/opt4" />

        <Button
            android:text="5"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:id="@+id/opt5" />
    </LinearLayout>

    <Button
        android:text="Next"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:id="@+id/next"/>

</RelativeLayout>

另外,我认为这可以回答你在InfoWindow中使用jQuery的问题:
How to use Jquery inside Google maps InfoWindow?

你可以将一个dom对象传递给infowindow,你可以设置一个监听器。