javascript - 将按钮链接到谷歌地图的正确方法是什么？

Question

我对 javascript 相当陌生，甚至对 google map api 也比较陌生。我想单击一个按钮并在标记上方弹出一个信息窗口。我可以单击标记并弹出一个信息窗口。但如果我点击外部按钮，它就不起作用。我的最终目标是能够单击不同的按钮，并在 map 上的不同位置弹出不同的标记。我正在努力解决当前的问题，因为我觉得这将有助于我理解我 future 的目标。这是我的 JavaScript:

function initialize() {
    var mapDiv = document.getElementById("googleMap");
    var center = new google.maps.LatLng(40.7127837, -74.0059413);

    var mapProp = {
        center:center,
        zoom:9,
        //disableDefaultUI: true,
        mapTypeControl: false,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(mapDiv,mapProp);

    var marker = new google.maps.Marker({
        position:center,
        map:map,
        title: 'center of new york'
    });

    var content = '<div id="info">' +
            '<img src="uploads/home-bg.jpg" />' +
        '<a href="http://kings.app/blog/6th-woman">' +
        '<p>6th woman</p>' +
        '</a> ' +
        '</div>';
    var infowindow = new google.maps.InfoWindow({
        content: content
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });


    function position(){
        infowindow.open(map,marker);
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

这是 html 按钮

   <button onclick="position()" id="button"> press</button>

我也尝试过这个js代码

 function position(){
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

但它也不起作用。任何帮助将不胜感激。提前致谢

Answer 1

当您单击按钮时，函数位置未知。

在initialize中为按钮添加一个点击监听器(position仅在那里已知)

function initialize() {
    /**
      *..... your code
      **/

    function position(){
        infowindow.open(map,marker);
    }
    //add the click-listener
    google.maps.event.addDomListener(document.getElementById('button'),
                                    'click',
                                    position
                                    );
}
google.maps.event.addDomListener(window, 'load', initialize);

并从按钮中删除onclick属性

<button id="button">press</button>