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	设置关闭图片

---