Skip to content

Google Map 座標工具

Post date:
Tags:

因為這個案子的需要,所以就做了 Google Map 座標工具,靈感來自於 Interactive Polyline Encoder Utility,但是沒有加入劃線功能,只多了輸出 JSON 的選項。

※支援 Firefox 3/Opera 9.6,IE6/IE7 在拖曳上似乎有問題…

Google Map 座標工具

先點選要標記的位置(可連續點選、拖曳)右側的清單上就會出現該點的座標,也可以點選清單內的座標,左側地圖就會顯示出對應的標記;輸出 JSON 的作用是方便後續的應用,包括存入資料庫…等等。

Google Map 座標工具

Google Map 座標工具

改天再補上 Google Maps API 的使用心得…

延伸閱讀


讀過幾年書,塵世中的迷途大叔。

Comments

  • 版大請問一下
    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,請參考看看。