Google Map Api v3 自定义标记插件RichMarker

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

---