Google 地图 api 通过在信息窗口内单击 link 打开新的信息窗口

Question

我试图关闭旧的信息窗口并打开新的信息窗口（或替换此信息窗口上的内容），但我无法让它工作。我试试Google吧。如果我现在尝试 Google Chrome 浏览器开发者工具的控制台显示 "Uncaught TypeError: Cannot read property 'close' of undefined".

<script>
var map;
var marker;
var markerInfoWindow;

function intMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(60.3000216, 24.944929),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Create a new marker
    var marker = new google.maps.Marker({ draggable: true, icon: 'images/new_marker.png' });
    var markerInfoWindow = new google.maps.InfoWindow();

    google.maps.event.addListener(map, 'click', function(event) {
        marker.setPosition(event.latLng);
        marker.setMap(map);

        var contentString = "<a href='#' onclick='openNew();'>Click here to open new infowindow!</a>";
        var markerInfoWindow = new google.maps.InfoWindow({
            content: contentString
        });            
        markerInfoWindow.open(map, marker);
        marker.addListener('click', function() {
            markerInfoWindow.open(map, marker);
        });
    });
}         
    google.maps.event.addDomListener(window, "load", intMap);

    function openNew() {
        markerInfoWindow.close();
        var contentString = "Open this infowind when clicked link";
        var markerInfoWindowNew = new google.maps.InfoWindow({
            content: contentString
        });  
    }
</script>

Answer 1

你的变量范围有问题 markerInfoWindow - 在你的代码中你创建了一个隐藏外部变量的新本地

var map;
var marker;
var markerInfoWindow;

function intMap() {

    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(60.3000216, 24.944929),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Create a new marker
    marker = new google.maps.Marker({
        draggable: true,
        icon: 'images/new_marker.png'
    });
    markerInfoWindow = new google.maps.InfoWindow();

    google.maps.event.addListener(map, 'click', function(event) {
        marker.setPosition(event.latLng);
        marker.setMap(map);

        var contentString = "<a href='#' onclick='openNew();'>Click here to open new infowindow!</a>";
        markerInfoWindow = new google.maps.InfoWindow({
            content: contentString
        });
        markerInfoWindow.open(map, marker);
        marker.addListener('click', function() {
            markerInfoWindow.open(map, marker);
        });
    });
}
google.maps.event.addDomListener(window, "load", intMap);

function openNew() {
    markerInfoWindow.close();
    var contentString = "Open this infowind when clicked link";
    markerInfoWindow = new google.maps.InfoWindow({
        content: contentString
    });
    markerInfoWindow.open(map, marker);
}

Google 地图 api 通过在信息窗口内单击 link 打开新的信息窗口

Google maps api open new infowindow by clicking link inside infowindow

javascript

google-maps

infowindow