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对象

//marker1marker = 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属性更改时

---