如何在 google 地图上放置标签的信息窗口

Question

我使用 infobox.js 在 google 地图上绘制标记，而不是使用 https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple ，它工作正常，代码如下所示

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <script>
        var map;
        var AutoCircle = [
            {
                "latitude": '21.170931',
                "longitude": '72.855607',
            },
            {
                "latitude": '21.192533',
                "longitude": '72.848750',
            },
            {
                "latitude": '21.190178',
                "longitude": '72.797578',
            }
        ];
        function initMap() {
            // Create the map.
             map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                 center: {lat:21.181272, lng:72.835066},
                mapTypeId: google.maps.MapTypeId.TERRAIN
            });

            addLabel(AutoCircle);
        }

        // Construct the circle for each value in citymap.
        // Note: We scale the area of the circle based on the population.
        function addLabel(circleArray){
            for (var i=0;i<circleArray.length;i++) {
                var circleData = circleArray[i]
                var circleLatlng = new google.maps.LatLng(circleData.latitude, circleData.longitude);
                // Add the circle for this city to the map.
                var myOptions = {
                    content: 300+"*"+"<br>autos",
                    boxStyle: {
                         background: '#FFFFFF',
                        color: 'red',
                        textAlign: "center",
                        fontSize: "8pt",
                        width: "50px"
                    },
                    disableAutoPan: true,
                    pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
                    position: new google.maps.LatLng(circleArray[i].latitude,
                            circleArray[i].longitude),
                    closeBoxURL: "",
                    isHidden: false,
                    pane: "floatPane",
                    zIndex: 100,
                    enableEventPropagation: true
                };
                var ib = new InfoBox(myOptions);
                ib.open(map);
            }
        }

        google.maps.event.addDomListener(window, "load", initMap);
    </script>

</head>
<body>

<div id="map"></div>
</body>
</html>

如何添加我们点击标签的信息窗口

请帮忙

Answer 1

如果我对您的代码的理解正确，您所指的 'label' 是 InfoBox class 的一个实例，根据其文档，"fires the same events as a google.maps.InfoWindow"：

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html

所以你应该可以这样做：

var infowindow = new google.maps.InfoWindow({
    content: 'foo'
});

ib.addListener('click', function() {
    infowindow.open(map, this);
});

Answer 2

我无法使用来自文本字符串的动态呈现的 div（如果您使用 domready 事件，您应该能够通过其 ID 访问节点，而不是确定为什么这不起作用），如果我将 <div> 创建为 DOM 节点，我可以向它添加一个侦听器。

代码片段：

function addLabel(circleArray) {
  for (var i = 0; i < circleArray.length; i++) {
    var circleData = circleArray[i]
    var circleLatlng = new google.maps.LatLng(circleData.latitude, circleData.longitude);

    // Create div for infoBubble
    var div = document.createElement("div");
    // create text node
    var text = document.createTextNode(300 + "*" + "\nautos\n" + circleData.content);
    // append text to div
    div.appendChild(text);

    // add click listener to div
    google.maps.event.addDomListener(div, 'click', (function(i, latLng) {
      return function() {
        infowindow.setContent('clicked on ' + i);
        infowindow.setPosition(latLng);
        infowindow.open(map);
      }
    }(i, circleLatlng)));
    var myOptions = {
      content: div, // use DOM node for content
      boxStyle: {
        background: '#FFFFFF',
        color: 'red',
        textAlign: "center",
        fontSize: "8pt",
        width: "50px"
      },
      disableAutoPan: true,
      pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
      position: new google.maps.LatLng(circleArray[i].latitude,
        circleArray[i].longitude),
      closeBoxURL: "",
      isHidden: false,
      pane: "floatPane",
      zIndex: 100,
      enableEventPropagation: true
    };
    var ib = new InfoBox(myOptions);
    ib.open(map);
  }
}

var map;
var infowindow = new google.maps.InfoWindow();

function initMap() {
  // Create the map.
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 21.181272,
      lng: 72.835066
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  addLabel(AutoCircle);
}

google.maps.event.addDomListener(window, "load", initMap);

var AutoCircle = [{
  "latitude": '21.170931',
  "longitude": '72.855607',
  "content": "content0"
}, {
  "latitude": '21.192533',
  "longitude": '72.848750',
  "content": "content1"
}, {
  "latitude": '21.190178',
  "longitude": '72.797578',
  "content": "content2"
}];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>

如何在 google 地图上放置标签的信息窗口

how to place infowindow for the label on google map

google-maps

infowindow

google-maps-api-3

marker