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屬性更改時

---