Powered by WordPress | Theme by mg12 | Valid XHTML 1.1 and CSS 3
  • 我不喜歡預設的marker mouseover的style,可以改嗎

    A:請自己綁定mouseover事件,利用UMarker.getPoint()來取得經緯度座標,並設定marker info的位置。

    點我觀看範例

    
    var map;
    function init() {
    	map = new UMap(document.getElementById('map'));
    	map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);
    	var mapDiv = document.getElementById('map');
    
    	var marker = new UMarker(map.getCenter());
    	bindMaukerMouseover(marker, 'this is a string!');
    	map.addOverlay(marker);
    
    	var marker2 = new UMarker(new ULatLng(25.033405, 121.523255));
    	bindMaukerMouseover(marker2, 'this is another string!');
    	map.addOverlay(marker2);
    
    	//My marker info Div
    	var myMarkerInfoDiv = document.createElement('div');
    	myMarkerInfoDiv.id = 'myMarkerInfoDiv';
    	myMarkerInfoDiv.style.cssText = 'width:200px;border:1px solid blue;display:none;position:absolute;background-color:#CCC;';
    	document.getElementById('map').appendChild(myMarkerInfoDiv);
    
    }
    

    榜定marker的mouseover事件

    
    function bindMaukerMouseover(mkr, msg){
    	mkr.addListener('mouseover', function(){
    		var latlng = mkr.getPoint();//取得該座標的經緯度
    		var point = map.transformLatLngToContainerCoordinates(latlng);//將經緯度轉成螢幕座標(相對於mapDiv左上角)
    		var exX = 15;//x偏差量
    		var exY = 10;//y偏差量
    		document.getElementById('myMarkerInfoDiv').style.left = (point.x + exX) + 'px';
    		document.getElementById('myMarkerInfoDiv').style.top = (point.y + exY) + 'px';
    		document.getElementById('myMarkerInfoDiv').style.display = 'block';
    		document.getElementById('myMarkerInfoDiv').innerHTML = msg;
    	});
    	mkr.addListener('mouseout', function(){
    		document.getElementById('myMarkerInfoDiv').style.display = 'none';
    	});
    }
    
    星期三, 九月 10th, 2008 at 12:17

Leave a Reply

TOP