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