Google Map Api v3 自定義info插件 js-info-bubble

Google Map Api v3 自定義info插件 js-info-bubble

簡介

js-info-bubble庫可創建可自定義的基於CSS3的InfoWindows。它支持標籤內容，並使用CSS3進行圓角，陰影和動畫。

列子

引入Google Map Api JS， InfoBubble

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="../src/infobubble.js></script>

定義map對象以及marker

var mapCenter = new google.maps.LatLng(-35.397, 150.644);
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var marker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(-35, 150),
          draggable: true
        });

定義info-bubble對象

//info內容定義
var content = "<div><p>自定義</p></div>"

 var infoBubble = new InfoBubble({
                map: map,
                content: content,
                padding: '10px',
                borderColor: "#ccc",
                backgroundColor: "#fff",
                hideCloseButton: true,
                minWidth: 208,
                maxWidth: 208,
                minHeight: 258,
                maxHeight: 258,
                shadowStyle: 0
            });
 infoBubble.open();

API

以下是常用的方法和事件，希望能幫到大家

---

方法	返回值	說明
open	None	打開
close	None	關閉
isOpen	Bool	是否打開狀態

---

事件	參數	說明
open	map, marker	打開infoBubble
addTab	title,content	添加tab頁
updateTab	index, title, content	修改tab頁
removeTab	index	刪除tab頁
setShadowStyle	value	設置陰影樣式
setPadding	value	設置邊距
setBorderRadius	value	設置邊界半徑
setBorderWidth	value	設置邊界寬
setBorderColor	value	設置邊界顏色
setBackgroundColor	value	設置背景顏色
setMaxWidth	value	設置最大寬度
setMaxHeight	value	設置最大高度
setMinWidth	value	設置最小寬度
setMinHeight	value	設置最小高度
setArrowSize	value	設置箭頭大小
setArrowPosition	value	設置箭頭位置
setArrowStyle	value	設置箭頭樣式
setCloseSrc	value	設置關閉圖片

---