API問題
滑鼠點擊地圖上任意一處取得經緯度
1. 地圖綁上MouseDown事件, 每次點擊地圖後會回傳event及latlng兩個參數 2. 再透過lat()及lng()兩個函式分別取得緯度及經度 function init() { var map = new UMap(document.getElementById(‘map’)); map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9); // 地圖綁上MouseDown事件, 每次點擊地圖回傳Event及latlng兩個參數 map.addListener(‘mousedown’, function(e, latlng){ var inputs = document.getElementsByTagName(‘INPUT’); inputs[0].value = latlng.lat(); // 取得的緯度值丟入第一個input text inputs[1].value = latlng.lng(); // 取得的經度值丟入第二個input text }); } 觀看範例
Read Full Post | Make a Comment ( 5 so far )隨需載入UrMap API (include on demand)
有時候有些網頁不需要在一開始就載入urmap api，有可能是使用者觸發某個動作才要顯示地圖，這時候用原本取得API的方式(document.write)就無法作到include on demand，因此我寫了一個小程式，經過壓縮之後只有1.6kb。接下來你只要呼叫
Read Full Post | Make a Comment ( 2 so far )UMarker enableDraging
enableDraging 讓地標設為可拖拉，透過增加監聽函式addListener 榜定dragging 與 dragend事件，可以進階控制UMarker被拖動時的動作。 function createMarker(point) { var marker = new UMarker(point, myIcon); marker.addListener(‘dragging’, function(e, mkr, latlng) { //marker.openInfoWindow(‘Hello!’); document.getElementById(‘log’).innerHTML = ‘正在拖拉：’+latlng.toUrlString(); }); marker.addListener(‘dragend’, function(e, mkr, latlng) { //marker.openInfoWindow(‘Hello!’); document.getElementById(‘log’).innerHTML = ‘拖拉結束：’+latlng.toUrlString(); }); return marker; } marker = createMarker(map.getCenter()); map.addOverlay(marker); marker.enableDragging(); 觀看範例: http://www.urmap.com/SearchEngine/api/documentation/enableDraging.html
Read Full Post | Make a Comment ( None so far )UMarker triggerEvent
triggerEvent可以讓你直接觸發marker上自定義的監聽事件，通常會做一個地標列表列出所有的marker，當點選列表時觸發原本榜定在marker上的事件。 var map = new UMap(document.getElementById(‘map’)); map.setControlType(U_FULL_CONTROL); map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9); // 函式：用來產生一個會顯示指定號碼在訊息視窗中的地標 function createMarker(point, number) { var marker = new UMarker(point); marker.setMouseonInfo(‘label:’+number, ‘desc:’+number); var html = ‘地標 #<b>’ + number + 』; marker.addListener(‘click’, function() { marker.openInfoWindow(html); }); return marker; } // 加入十個隨機產生的地標 var bounds = map.getBounds(); var width = bounds.getNorthEast().lng() – bounds.getSouthWest().lng(); var height [...]
Read Full Post | Make a Comment ( None so far )如何更改地標mouse on訊息視窗的style?
CSS /** MouseOnDiv 區塊 **/ .UMarkerMouseOnDiv{ position: absolute; top:0px; width:120px; z-index:1; font:12px tahoma; display:none; overflow:hidden; opacity:0.8; filter:alpha(opacity:80); border: 1px solid #0099FF; } /** MouseOnDiv 標題 **/ .UMarkerMouseOnDivName{ font-size: 13px; font-weight: bold; color: #FFFFFF; background-image: url(UMarkerTop.gif); background-repeat: repeat-x; background-position: left bottom; background-color: #0f69fe; border: 1px solid #FFFFFF; padding-top: 1px; padding-right: 3px; padding-bottom: 5px; padding-left: 3px; } [...]
Read Full Post | Make a Comment ( None so far )如果我想讓使用者點選「板橋市」、「新店市」、「信義區」、「士林區」就會帶到該地方 並且縮放到合適的level，我該怎麼做?
觀看範例 CSS #map { width: 500px; height: 400px; border: 1px solid black; } select.select-field { font-size: 12px; color: #333; border: 1px solid #333; margin: 0px 0px 10px 0px; padding: 2px; } HTML 板橋市 新店市 信義區 士林區 <div id="map"></div> 查詢某個地點的經緯度 按下滑鼠右鍵，出現右鍵選單，選擇查詢經緯度，拷貝經緯度，如下圖。 Javascript // 宣告一陣列儲存矩形範圍西南角及東北角的經緯度 var locations = [{SWLat:24.955531122809986,SWLng:121.35407679576154, NELat:25.066144696138256,NELng:121.55485406951051}, {SWLat:24.88251262907,SWLng:121.434947311581, NELat:24.9921441648787,NELng:121.6375724412087}, {SWLat:24.978025822536974,SWLng:121.47252509421136, NELat:25.087885910040874,NELng:121.67629414994528}, {SWLat:25.08071599866579,SWLng:121.42961783656162, NELat:25.189774015918026,NELng:121.63129496303368}]; var [...]
Read Full Post | Make a Comment ( None so far )如何讓右鍵選單跳出?而且選單中其中一個按鈕是新增marker?
觀看範例 CSS #map { width: 500px; height: 400px; border: 1px solid black; } ul#context-menu { font-size: 12px; list-style: none; border-top: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; display: none; margin: 0px; position: absolute; } ul#context-menu li.tab { width: 80px; background-color: #ccc; color: #333; text-align: center; line-height: 1.6; border-bottom: 1px solid #333; [...]
Read Full Post | Make a Comment ( None so far )我不喜歡預設的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’; [...]
Read Full Post | Make a Comment ( None so far )
