因为最近 Forece 在做一个类似大众点评网的网站 - 枫叶巴士，喜欢的同学可以给点IP啊，网站里边有个功能叫做添加坐标的标注，不过每个店铺或景点都要手动来完成，那工作可真是海量啊，有木有直接输入地址就可以转化为坐标的工具呢？于是 Forece 就在网上找各种方法来解决这个问题，终于找到了问题的解决办法，那就是利用 Google Map 的 API 来完成这个工作。

第一种，自己在网上找的例子，不过获取的是整个坐标系，还带括号，如： (45.4342068,-73.810145)，而网站程序默认坐标是没括号，并且横坐标和纵坐标的位置是颠倒的，找朋友帮忙改动了一下源码，结果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAS3g6APnAOymBE-H6WcqW-RT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTiZR4zDX-LgaGE_-sLB3Vu1Z930g" type="text/javascript"></script>

<script type="text/javascript">
function searchLocations() {
  geocoder = new GClientGeocoder();
  if(document.getElementById('t_item_c_address').value != "") {
      var address = document.getElementById('t_item_c_address').value;
      geocoder.getLatLng(address, function(latlng) {
        if (!latlng) {
          alert(address + ' not found');
        } else {
          var latStr = latlng.toString();
          var lat1 = latStr.substr(1, latStr.indexOf(',')-1);
          var lat2 = latStr.substr(latStr.indexOf(',')+1, latStr.length-latStr.indexOf(',')-2);
          document.getElementById('mappoint_mappoint').value = lat2 + "," + lat1;
        }
      });
  } else {
      alert("出现错误");
  }
}

</script>
</head>
<body>
<form name="form" action="">
<p>*Location Address<br />
  <input name="c_address" type="text" id="t_item_c_address" size="45" />
  </p>
<p>*Latitude/Longitude<br />
    <input name="mappoint" type="text" id="mappoint_mappoint" size="45" />
    <a name="top"></a>
    <a href="#top" onclick="searchLocations();">Get lat/lng</a></p>
</form>
</body>
</html>

第二种方法，功能比较强大，带地图，而且坐标分别保存在两个变量中，不像第一种方法只有一个变量，这个就很好解决了我的问题，并且可以验证地图是否正确。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=GBK" />
    <title>地理位置坐标转换</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAe3YR_oZq7RQougOHlEQYxRTrT8HRiYVHGz6s-cexYhuHznMTnBQJ3hrfCSvSmQ_Fqr80B62kDy8djA&sensor=true"
        type="text/javascript"></script>
    <script type="text/javascript">
        window.g = {};
        window.$ = function (id) { return document.getElementById(id) };
        window.onload = function () {
            if (GBrowserIsCompatible()) {
                g.map = new GMap2($("map"));
                //加载google地图控件
                g.map.addControl(new GLargeMapControl());
                g.map.addControl(new GMapTypeControl());
                g.map.addControl(new GScaleControl());
                //实例化google客户端地理编码类(GClientGeocoder)
                g.geocoder = new GClientGeocoder();

                g.getCoordinates = function (address) {
                    g.geocoder.getLatLng(
                    address,
                    function (point) {
                        if (point) {


                            g.map.setCenter(point, 13);
                            var marker = new GMarker(point);
                            g.map.addOverlay(marker);
                            var info = "<strong>" + address + "</strong><br />坐标: " + point.lng() + "," + point.lat();
                            $("info").innerHTML = info;
                            marker.openInfoWindowHtml(info);
                            marker.__address_info = info;
                            GEvent.addListener(marker, "click", function () {
                                g.map.setCenter(this.getLatLng());
                                this.openInfoWindowHtml(this.__address_info);
                                $("info").innerHTML = info;
                            });
                        }
                        else {
                            alert("无法解析: " + address);
                        }
                    }
                )
                }

                $("btn_go").onclick = function () {
                    g.getCoordinates($("address").value);
                }
                $("btn_go").onclick();
            }
            else {
                alert('不支持的浏览器');
            }
        }
        window.onunload = function () {
            GUnload();
        }
    </script>
    <style media="screen">
        body
        {
            margin: 0;
            padding: 0;
            font-size: 9pt;
            line-height: 1.5em;
        }
        #frame
        {
            width: 700px;
            margin: 20px auto 10px;
        }
        #form
        {
            margin: 0 0 10px;
            text-align: center;
        }
        #form input
        {
            border: 1px solid #ccc;
            font-size: 9pt;
            width: 200px;
        }
        #form button
        {
            font-size: 9pt;
            border: 1px solid #ccc;
        }
        #form button:hover
        {
            background: #eef;
        }
        #map
        {
            height: 400px;
            margin: 0 0 10px;
            border: 5px solid #ccc;
        }
        #vifix
        {
            text-align: center;
        }
        #vifix a
        {
            color: #f00;
            text-decoration: none;
        }
        #vifix a:hover
        {
            color: #f96;
        }
    </style>
</head>
<body>
    <div id="frame">
        <div id="form">
            输入一个地址:
            <input id="address" value="杭州市西湖三潭印月" />
            <button id="btn_go">
                获取坐标</button>
        </div>
        <div id="map">
        </div>
        <div id="info">
        </div>
        <div id="vifix">
            Powered by <a href="http://code.google.com/apis/maps/" target="_blank">Google Map API</a>
            / Created by <a href="http://vifix.cn%22%3evifix.cn%3c/a>
        </div>
    </div>
</body>
</html>

PS:两端代码都是用的 GOOGLE MAP API V2，也就是说如果你要上传到网站上来使用的话，需要重新申请API，如果本地用的话，则没有任何问题。

虽然无法和系统整合，不过现在也还能凑合用，如果有高手能够帮我整合系统，麻烦联系下我，或直接留言，谢谢。

打赏分享