Question

这是一个带有InfoBox的谷歌地图，我想实现Yelp的地图工具提示div效果。 换句话说，我想在Google地图上放置一个infoBox ，为了做到这一点，我使用的是谷歌地图InfoBox，其z-index高于地图z-index，但是它不起作用，这是jsfiddle的帮助，

http://jsfiddle.net/MdhzR/

在这个例子中，我希望黄色容器位于地图容器的顶部，并且在灰色容器的顶部，这是可能的吗？请帮助！

以下是代码：

CSS：

#map_canvas{
    position: absolute;
    top: 50px; left: 20px;
    width: 300px;
    height: 300px;
    z-index: 1;}
#z_index_gray {
     position: absolute;
      top: 250px; left: 250px;
      height: 125px; width: 125px;
      background-color: gray;
      z-index: 10;}

HTML：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
    <div id="map_canvas"></div>
<div id="z_index_gray"></div>
    <p>

JS：

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 = "position: absolute;border: 1px solid black;  background: yellow; padding: 5px;z-index: 20;height: 100px; width: 300px;";
                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: 1
                    ,boxStyle: {
                        background: "url('tipbox.gif') no-repeat"
                        ,opacity: 0.75
                        ,width: "280px"
                    }
                    ,closeBoxMargin: "10px 2px 2px 2px"
                    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                    ,infoBoxClearance: new google.maps.Size(5, 5)
                    ,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);
            }
            $(document).ready(function() {
                initialize();
            });

JSFiddle：http://jsfiddle.net/MdhzR/

谢谢！ PD。我正在关注此infoBox文档示例：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

Answer 1

我在Pamela Fox找到了这个例子，它完全符合我的要求。

http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html

我希望对别人有帮助。

谷歌将InfoBox（infowindow）映射到地图之上（z-index），Yelp.com工具提示效果

1 个答案: