Posts Tagged ‘google map’

依據使用者電腦IP查看連線的地理位置

Wednesday, March 10th, 2010

Google有提供這個新Feature
http://code.google.com/intl/zh-TW/apis/ajax/documentation/#ClientLocation
當應用程式使用 AJAX API 載入程式時,載入程式會根據 IP 位址找出用戶端的地理位置。只要載入google提供的js library後,便可抓取 google.loader.ClientLocation 這個變數取得用戶的Location資料。詳細規格,請參考Google的文件說明。

可抓到的資訊有: 城市、國家、國碼、區域、經緯度

App範例

Google Map – 如何動態新增Marker?

Wednesday, June 3rd, 2009
var map = new GMap2(container);
...
GEvent.addListener(map, "singlerightclick", function(<span style="color:#22bbff;">point</span>, src) {
var loc = map.<span style="color:red;">fromContainerPixelToLatLng</span>(point);
var marker = new GMarker(loc, {draggable: true});
map.addOverlay(marker);
});

這段Code作用是在地圖上按滑鼠右鍵時,會新增一個Marker在滑鼠遊標處。由於GMarker只接受GLatLng定址,而單擊右鍵的callback function的第一個參數型態是GPoint。所以必須要將GPoint轉換為GLatLng。也就是上面紅色那個function的功能: 將container的x,y pixel轉換為經緯度 lat,lng。可以直接試試下面的demo page。

如果是改為滑鼠左鍵單擊或double click來新增Marker,那會比較簡單。直接從callback function裡的第2個參數來new一個Marker就行了。可省去GPoint轉GLatLng那段

GEvent.addListener(map, "dblclick", function(overlay, loc) {
var marker = new GMarker(loc, {draggable: true});
var msg = loc.toString();
marker.bindInfoWindowHtml(msg);
map.addOverlay(marker);
});

demo

參考: Google Maps API Reference