如何将标题框添加到自定义谷歌地图？

Question

http://i.stack.imgur.com/6MuEE.jpg

我设法通过谷歌地图添加了自定义指针，但我很困惑如何添加指向指针的地址的自定义标题框，就像在设计中一样。请帮帮我。谢谢。

Answer 1

为此，您可以使用infobox.js，在 google maps js 下方添加 infobox.js 脚本。

这是一个例子，

            var marker = new MarkerWithLabel({
                position: new google.maps.LatLng(item.Latitude, item.Longitude),
                map: window.map,
                zIndex: 10,
                title: "Hello world",
                html: '<div class="infobox"></div>', //insert your infobox html inside it
                labelContent: 'the label you want to show instead of the marker',
                labelAnchor: new google.maps.Point(22, 0),
                labelClass: "labels", // the CSS class for the label
                labelStyle: { opacity: 0.75 },
            });
            var boxText = document.createElement("div");
            boxText.innerHTML = marker.html;

            var _infoBoxOptions = {
                content: boxText
        , disableAutoPan: false
        , maxWidth: 0
        , pixelOffset: new google.maps.Size(-100, -250)
        , zIndex: null
        , closeBoxMargin: "10px 2px 2px 2px"
        , isHidden: false
        , enableEventPropagation: false
            };

            var ib = new InfoBox(_infoBoxOptions);
            marker.infobox = ib;
            marker.infobox.isOpen = false;
            window.markers.push({ marker: marker, Id: item.ListingId, Price: item.Price });
            //     marker.setAnimation(google.maps.Animation.BOUNCE);
            google.maps.event.addListener(marker, "click", function (e) {
                x.setZoom(14);
                _.each(winodw.markers, function (item) {
                    if (item.marker != marker) {
                        item.marker.infobox.close();
                        item.marker.infobox.isOpen = false;
                    }
                });
                if (marker.infobox.isOpen === false) {
                    marker.infobox.open(window.map, this);
                    marker.infobox.isOpen = true;
                } else {
                    marker.infobox.close();
                    marker.infobox.isOpen = false;
                }
            });

当然，您应该拥有要在地图上显示的信息框的 html 和 css。