Google Maps仍然支持InfoBox吗?

本文介绍了Google Maps仍然支持InfoBox吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在寻找在Google地图中创建自定义infoWindow的方法，我相信创建一个infoBox是实现此目的的一种方法.但是，我没有在Google地图的文档中看到任何文档或对infoBox的引用.此功能已弃用吗?我应该改用自定义弹出窗口吗?

I am looking to create a custom infoWindow in google maps and I believe creating an infoBox is a way to do this. However, I don't see any documentation or reference to infoBox on google map's documentation. Is this feature deprecated? Should I be using customized popup instead?

推荐答案

InfoBox 库从不属于Google Maps Javascript API v3的一部分.这是一个第三方库，仍然可以在GitHub上使用.

The InfoBox library was never part of the Google Maps Javascript API v3. It is a third party library and is still available on GitHub.

https://github.com/googlemaps/v3-utility-library/tree/master/archive/infobox

注意:它在我的GitHub帐户中也可用:

Note: it is also available in my GitHub account:

https://github.com/geocodezip/v3-utility-library/tree/master/archive/infobox

代码段(基本示例):

function initialize() {
        var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

        var myMapOptions = {
             zoom: 15
            ,center: secheltLoc
            ,mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


        var marker = new google.maps.Marker({
            map: theMap,
            draggable: true,
            position: new google.maps.LatLng(49.47216, -123.76307),
            visible: true
        });

        var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

        var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
        };

        google.maps.event.addListener(marker, "click", function (e) {
            ib.open(theMap, this);
        });

        var ib = new InfoBox(myOptions);

        ib.open(theMap, marker);
    }
  google.maps.event.addDomListener(window, 'load', initialize);

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

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/archive/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>
    <p>
    This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.

这篇关于Google Maps仍然支持InfoBox吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Infobox