Google Map Api v3 自定义标记插件RichMarker
简介
这次介绍的是Google Map Api v3 自定义标记插件RichMarker,在Google Maps JavaScript API v3中使用任意DOM元素作为地图标记的库。
列子
首先引入Google Map JS ,然后调用 Richmarker
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="../src/richmarker.js></script>
定义map对象
var mapCenter = new google.maps.LatLng(0, 0);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
定义RichMarker对象
//marker1
marker = new RichMarker({
position: mapCenter,
map: map,
draggable: true,
content: '<div class="my-marker"><div>This is a nice image</div>' +
'<div><img src="https://farm4.static.flickr.com/3212/3012579547_' +
'097e27ced9_m.jpg"/></div><div>You should drag it!</div></div>'
});
//marker2
var div = document.createElement('DIV');
div.innerHTML = '<div class="my-other-marker">I am flat marker!</div>';
marker2 = new RichMarker({
map: map,
position: new google.maps.LatLng(30, 50),
draggable: true,
flat: true,
anchor: RichMarkerPosition.MIDDLE,
content: div
});
API
方法 | 返回值 | 说明 |
---|---|---|
anchor_changed() | None | 锚更改事件 |
content_changed() | None | 设置标志的内容,并增加了装载事件的图像 |
drag(e:Event) | None | 处理拖动事件 |
draggable_changed() | None | 可拖动属性更改回调 |
draw() | None | Impelementing接口 |
flat_changed() | None | 扁平事件 |
getAnchor() | google.maps.Size | 获取锚 |
getContent() | string/Node | 获取标记的内容 |
getDraggable() | boolean | 是或不是可拖动标记 |
getFlat() | boolean | 是否平坦 |
getPosition() | google.maps.LatLng | 获取标记的postiton |
getHeight() | Number | 获取标记的高度 |
getShadow() | string | 获取标记的盒子阴影 |
getVisible() | boolean | 返回标记的当前可见性状态 |
getWidth() | Number | 获取标记的宽度 |
getZIndex() | Number | 获取标记的zIndex的 |
onAdd() | None | 添加标记到地图 |
onRemove() | None | 除去从地图的标记 |
position_changed() | None | 位置改变事件 |
setAnchor(anchor:RichMarkerPosition/google.maps.Size) | None | |
setContent(content:string/Node) | None | 设置标志的内容 |
etDraggable(draggable:boolean) | None | 设置标记为可拖动与否 |
setFlat(flat:boolean) | None | 设置标志为平坦的 |
setPosition(position:google.maps.LatLng) | None | 设置标记的位置 |
setShadow(shadow:string) | None | 设置标志的盒子阴影 |
setVisible(visible:boolean) | None | 设置标志的公开程度状态 |
setZIndex(index:Number) | None | 设置标志的zIndex的 |
startDrag(e:Event) | None | 开始拖动 |
stopDrag() | None | 停止拖动 |
visible_changed() | None | 可见改变事件 |
zIndex_changed() | None | zIndex的改变事件 |
事件 | 参数 | 说明 |
---|---|---|
anchor_changed | None | 该事件被触发锚属性发生变化时 |
click | Event | 点击标记时,该事件被触发 |
content_changed | None | 这个事件的内容属性发生变化时 |
draggable_changed | None | 这个事件的可拖动属性发生变化时 |
flat_changed | None | 该事件被触发平属性发生变化时 |
height_changed | None | 这个事件高度属性发生变化时 |
position_changed | None | 该事件被触发的位置属性更改时 |
ready | None | 当光标是准备与互动这个事件 |
visible_changed | None | 该事件被触发可视属性发生变化时 |
width_changed | None | 该事件被触发宽度属性发生变化时 |
zIndex_changed | None | 该事件被触发zIndex属性更改时 |
----