據說，谷歌地圖節點內容的InfoWindow不起作用

Question

在文檔中說，我可以在 InfoWindow 中將 content 設置為 node ，而不僅僅是 string 。

不幸的是，當我嘗試設置節點時，它不起作用：

var point;

    point = new google.maps.LatLng(43.65654, -79.90138);
    // html = 'hello world';
    html = $('<div>hello world</div>');
    var marker = new google.maps.Marker({
        position: point,
        map: map
    });

    google.maps.event.addListener(marker, 'click', function () {

        infowindow.setContent(html);
        infowindow.open(map, marker);
    });

Jsfiddle 在這里： https ://jsfiddle.net/pmek2zhs/3/

單擊標記，您將看不到任何內容。 如果您將html變量分配更改為帶注釋的變量，它將起作用。

Answer 1

$('<div>hello world</div>'); 不是一個 HTML 節點，它是一個 JQuery 對象。

使用$('<div>hello world</div>')[0]獲取 API 可以使用的內容。

更新的小提琴

代碼片段：

 var map = null; var infowindow = new google.maps.InfoWindow(); function initialize() { var myOptions = { zoom: 8, center: new google.maps.LatLng(43.907787, -79.359741), mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // Add markers to the map // Set up three markers with info windows var point; point = new google.maps.LatLng(43.65654, -79.90138); // html = 'hello world'; html = $('<div>hello world</div>')[0]; var marker = new google.maps.Marker({ position: point, map: map }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(html); infowindow.open(map, marker); }); google.maps.event.trigger(marker, 'click'); } initialize();

 html, body { height: 100%; } #map_canvas { width: 100%; height: 100%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas"></div>