javascript - 据说，Google Maps 节点内容的 InfoWindow 不起作用

Question

是said in documentation, that I can set content to node, not only to 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 可以使用的东西。

updated fiddle

代码片段:

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>