谷歌地图api通过点击信息窗口内的链接打开新的信息窗口

Google maps api open new infowindow by clicking link inside infowindow

本文关键字：窗口 信息 信息窗 链接 api 谷歌地图      更新时间：2024-03-19

我试图关闭旧的信息窗口并打开新的信息窗口（或替换此信息窗口上的内容），但我无法使其工作。我试着用谷歌搜索一下。如果我现在尝试一下，谷歌Chrome浏览器开发工具的控制台会显示"Uncaught TypeError:无法读取未定义的属性'close'"。

<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>

您对变量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);
}
相关文章：