Google Map 座標工具
因為這個案子的需要,所以就做了 Google Map 座標工具,靈感來自於 Interactive Polyline Encoder Utility,但是沒有加入劃線功能,只多了輸出 JSON 的選項。
※支援 Firefox 3/Opera 9.6,IE6/IE7 在拖曳上似乎有問題…
先點選要標記的位置(可連續點選、拖曳)右側的清單上就會出現該點的座標,也可以點選清單內的座標,左側地圖就會顯示出對應的標記;輸出 JSON 的作用是方便後續的應用,包括存入資料庫…等等。


改天再補上 Google Maps API 的使用心得…
延伸閱讀
因為這個案子的需要,所以就做了 Google Map 座標工具,靈感來自於 Interactive Polyline Encoder Utility,但是沒有加入劃線功能,只多了輸出 JSON 的選項。
※支援 Firefox 3/Opera 9.6,IE6/IE7 在拖曳上似乎有問題…
先點選要標記的位置(可連續點選、拖曳)右側的清單上就會出現該點的座標,也可以點選清單內的座標,左側地圖就會顯示出對應的標記;輸出 JSON 的作用是方便後續的應用,包括存入資料庫…等等。
改天再補上 Google Maps API 的使用心得…
延伸閱讀
2 responses to “Google Map 座標工具”
版大請問一下
http://code.google.com/intl/zh-CN/apis/maps/documentation/examples/control-localsearch.html這個功能
var mymap = ‘viewmap_small’;
var map = null;
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(mymap));
//縮放和移動控件
map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMenuMapTypeControl());
//加入搜尋功能
map.addControl(new google.maps.LocalSearch());
var center = new GLatLng(‘$shop[mappoint][1]’,’$shop[mappoint][0]’);
var shop = ‘$shop[shopname]’;
if( parent.lng && parent.lat && parent.shopname) {
var center = new GLatLng( parent.lat,parent.lng );
var shop = parent.shopname;
}
if(center) {
map.setCenter(center, 15);
var marker = new GMarker(center, {title: shop});
map.addOverlay(marker);
} else {
var center = new GLatLng($_default_mappoint[1], $_default_mappoint[0]);
map.setCenter(center, 12);
}
}
要放在那個位置裡呢
我剛剛測試了一下可以正常運作,範例請參考以下網址的地圖右下處:
http://app.essoduke.org/gmap/
您的原始碼可能因為 wordpress 的關係而有把某些符號置換過,所以沒使用作為範例之用。
我稍微整理一下重點:
1. 需要引入兩個 js
http://www.google.com/uds/api?file=uds.js&v=1.0
http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js
2.加入下列控制項語法
myMap.map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
我只加入上述要點即可使用 LocalSearch,請參考看看。