如何将标题框添加到自定义Google地图？ [英] How do I add a title box to a custom google map?

问题描述

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

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

I managed to add the custom pointer via google maps, but I am confused how to add that custom title box of the address that is pointing to the pointer, as in the design. Please help me out. Thank you.

推荐答案

为此，您可以使用 infobox.js ，添加infobox.js脚本下面的谷歌地图js。

for this, you could use the infobox.js, add the infobox.js script below the google maps 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。

of course, you should have the html and css for the infobox you wanna show on the map.

这篇关于如何将标题框添加到自定义Google地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！