如何在谷歌地图上放置标签的信息窗口答案

【问题标题】：how to place infowindow for the label on google map如何在谷歌地图上放置标签的信息窗口
【发布时间】：2016-03-13 01:47:21
【问题描述】：

我正在使用 infobox.js 在谷歌地图上绘制标记，而不是使用 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>

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

请帮忙

【问题讨论】：

标签： google-maps google-maps-api-3 infowindow marker

【解决方案1】：

如果我正确理解您的代码，您所指的“标签”是 InfoBox 类的一个实例，根据其文档，“触发与 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);
});

【讨论】：

谢谢我添加了它，但我无法得到它你可以创建工作演示并发布
@DhanaLakshmi 根据文档，enableEventPropagation 属性使您能够“在 InfoBox 中传播 mousedown、mousemove、mouseover、mouseout、mouseup、click、dblclick、touchstart、touchend、touchmove 和 contextmenu 事件“......但这似乎对我不起作用。

【解决方案2】：

我无法让它与来自文本字符串的动态呈现的 div 一起工作（如果你使用 domready 事件，你应该能够通过它的 id 访问节点，不知道为什么这不起作用） , 如果我将<div>创建为一个DOM节点，我可以给它添加一个监听器。

代码 sn-p：

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>

【讨论】：