信息窗口
                編輯時間:2017-03-03

                QQ截圖20170303111521.png


                InfoWindow 在地圖上方給定位置的彈出窗口中顯示內容(通常為文本或圖像)。信息窗口具有一個內容區域和

                一個錐形柄。柄頂部與地圖上的某指定位置相連。

                通常,您會將信息窗口附加到標記,但您也可以將信息窗口附加到特定緯度/經度,如下面的“添加信息窗

                口”部分所述。

                大體上說,信息窗口是一種疊層。


                添加信息窗口

                InfoWindow 構造函數采用了 InfoWindowOptions 對象字面量,后者為顯示信息窗口指定了一組初始參數。

                InfoWindowOptions 對象字面量包含以下字段:

                • content:其中包含要在信息窗口中顯示的本文字符串或 DOM 節點。


                • pixelOffset:其中包含從信息窗口的頂部到信息窗口錨定位置的偏移量。實際上,您不應也無需修改此字


                • 段。您可以將其保留為默認值。


                • position:其中包含此信息窗口錨定位置的 LatLng。注:InfoWindow 可附加到 Marker 對象(此情


                • 況下,其位置取決于標記的位置),或附加到地圖本身指定的 LatLng 位置。在標記上打開信息窗口將


                • 自動更新 position


                • maxWidth:用于指定信息窗口的最大寬度(以像素為單位)。默認情況下,信息窗口會根據其中包含的內


                • 容進行擴展,如果信息窗口填滿地圖,那么文本將會自動換行。如果您添加 maxWidth,則信息窗口將自


                • 動換行以強制適應指定的寬度。如果信息窗口達到最大寬度,但屏幕上仍有垂直空間,則信息窗口可能會


                • 垂直擴展。


                 InfoWindow的內容可包含文本字符串、HTML 代碼段或 DOM 元素。要設置此內容,請


                在 InfoWindowOptions 中指定該內容,或者對 InfoWindow 顯式調用 setContent()。

                如果您想要顯式調整內容的大小,則可將其納入 <div> 元素中,并使用 CSS 設置 <div> 的樣式。您還

                可以使用 CSS 啟用滾動功能。請注意,如果您不啟用滾動功能,且內容超出信息窗口中可用的空間,則內容

                可能會溢出信息窗口。





                打開信息窗口

                創建信息窗口時,它不會自動顯示在地圖上。要使信息窗口可見,則需對 InfoWindow 調用 open() 

                法,并向其傳遞其要在上面打開的 Map,也可以選擇向其傳遞其要錨定到的 Marker。如果沒有提供任何標

                記,則信息窗口將在其 position 屬性指定的位置處打開。

                關閉信息窗口

                默認情況下,InfoWindow 保持打開狀態,直至用戶點擊關閉控件(信息窗口右上角的叉號)。如果您需要,

                可以通過調用其 close() 方法來顯式關閉信息窗口。

                移動信息窗口

                有兩種方法可以更改信息窗口的位置:

                • 對信息窗口調用 setPosition()


                • 使用 InfoWindow.open() 方法將信息窗口附加到新標記上。注:如果您調用 open() 而不傳遞標


                • 記,InfoWindow 將使用構造時通過 InfoWindowOptions 對象字面量指定的位置。


                以下代碼點擊marker后顯示一個信息窗口:



                var marker=new google.maps.Marker({
                   
                title:'測試',
                   
                position:new google.maps.LatLng(30.54024807, 104.06966686),
                   
                map:map,
                });
                var infoWindow=new google.maps.InfoWindow({
                   
                content:'<p style="margin: 20px;">點了標注</p>',

                });
                google.maps.
                event.addListener(marker,'click',function () {
                   
                infoWindow.open(map,marker);
                });

                微信掃碼添加客服
                400-028-7262
                聯系我們
                主站蜘蛛池模板: 久久久久无码精品国产app| 叶山豪是真吃蓝燕奶| 99热在线精品国产观看| 日本精品久久久久久福利| 在线观看不卡视频| 久久国产成人精品国产成人亚洲| 欧美色欧美亚洲另类二区| 又硬又粗又长又爽免费看| 黄色成年人视频| 国产精品视频一| 一二三四区产品乱码芒果免费版| 最近2018中文字幕2019高清| 亚洲精品www| 精品在线视频一区| 国产在线a免费观看| 91久久青青草原线免费| 婷婷六月久久综合丁香可观看| 久久伊人成人网| 欧美一级大片在线观看| 亚洲视频aaa| 老司机深夜网站| 国产婷婷一区二区三区| 18禁止午夜福利体验区| 天天爱添天天爱添天天爱添| 中文字幕第35页| 日韩欧美综合视频| 亚洲国产精品午夜电影| 琪琪女色窝窝777777| 国产91精品在线观看| 麻豆精品国产免费观看| 国产精品女人呻吟在线观看| a天堂中文在线官网| 成人免费无码大片A毛片抽搐 | 国产欧美综合精品一区二区 | 欧美性xxxxx极品人妖| 伊人久久精品午夜| 精品无码成人久久久久久| 国产交换配乱婬视频| 国产乱码一区二区三区四| 国产精品免费综合一区视频| 97成人在线视频|