Google Maps v3 infoWindow addDomListener สำหรับปุ่ม HTML

ฉันมีไฟล์ JS ตัวอย่าง Google Maps อย่างง่าย:

    /*Standard Setup Google Map*/ 
    var latlng = new google.maps.LatLng(-25.363882,131.044922); 
    var myOptions = { 
        zoom: 15, 
        center: latlng, 
        panControl: false,
        mapTypeControl: true,
        scaleControl: true,
        mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        zoomControl: true,
        zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    };

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

    // add Marker
    var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(-25.363882,131.044922)
    });

    // add Info Window
    var infoWindow = new google.maps.InfoWindow();

ตอนนี้ฉันต้องการเปิดกล่องข้อมูลเมื่อฉันคลิกที่ปุ่มในเทมเพลต html ของฉัน:

ไฟล์ HTML:

<body onload="initialize()">
 ...
 <div id="map_canvas"></div>
 ...
 <button id="test">Click</button>
 ...
</body>

เพิ่มบรรทัดเหล่านี้ลงในไฟล์ JS ของฉัน:

    var onMarkerHTMLClick = function() {

        var marker = this;
        var latLng = marker.getPosition();
        var content = '<div style="text-align: center; font-size:14px;"><center><b>Company GmbH</b></center><div>Broadway Str.5</div><div>45132 Canvas</div></div>';

        map.panTo(marker.getPosition());
        map.setZoom(15);

        infoWindow.setContent(content);

        infoWindow.open(map, marker);
     };

    google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
    });

    google.maps.event.addDomListener(document.getElementById("test"),'click', onMarkerHTMLClick);

ข้อผิดพลาด: marker.getPosition ไม่ใช่ฟังก์ชัน เหตุใดจึงใช้งานไม่ได้ หากฉันทำแบบเดียวกันกับฟังก์ชั่นคลิกบนตัวมาร์กเกอร์ หน้าต่างจะเปิดขึ้นโดยไม่มีปัญหา


google-maps javascript google-maps-api-3 infowindow
person Jim    schedule 14.10.2013    source แหล่งที่มา
comment
ปุ่มไม่ใช่เครื่องหมายใช่ไหม   -  person Alex Gill    schedule 14.10.2013

คำตอบ (1)


arrow_upward
1
arrow_downward

คุณต้องทริกเกอร์เหตุการณ์ที่เปิด infoWindow อาจเป็นวิธีที่ง่ายที่สุดที่จะทำคือจัดเก็บเครื่องหมายของคุณไว้ในอาเรย์ส่วนกลาง หรือหากคุณมีไม่มากก็เพียงเลือกด้วย ID

ตัวอย่าง

var myButton = document.getElementById('THE_ID');
google.maps.event.addDomListener(myButton, 'click', openInfoWindow);

openInfoWindow เป็นเพียงฟังก์ชันโทรกลับที่คุณสามารถทริกเกอร์เหตุการณ์ได้

person Alex Gill    schedule 14.10.2013
comment
โอเค มันควรจะใช้ได้ และฉันต้องตั้งค่า var marker = marker1; แทน var marker = this; - person Jim; 14.10.2013