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) {
[...]
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) {
[...]
如何更改地標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;
}
/** MouseOnDiv 內容 **/
.UMarkerMouseOnDivDesc{
padding:1px 10px;
background-color:#FFFFFF;
}
如果我想讓使用者點選「板橋市」、「新店市」、「信義區」、「士林區」就會帶到該地方 並且縮放到合適的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 map;
function getSelectedIndex() {
var options = document.getElementsByTagName(‘option’);
var total = options.length;
for (var i=0; i<total; i++) {
if (options[i].selected) {
return options[i].value;
}
}
}
function init() {
map = new UMap(document.getElementById('map'));
loadMap();
}
function loadMap() {
var selectedIndex = getSelectedIndex();
// 建立一個經緯度的矩形範圍
var bounds = new UBounds(new [...]
如何讓右鍵選單跳出?而且選單中其中一個按鈕是新增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;
margin: 0px 0px 0px -40px;
#margin: 0px;
display: block;
cursor: pointer;
}
ul#context-menu li.tab:hover {
background-color: #333;
color: #fff;
}
HTML
<div id="map"></div>
<ul id="context-menu">
[...]
我不喜歡預設的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 = [...]
