【嘘~~集成google map地图功能，悄悄发布】

首先来个AD：来了就友情送IP吧http://shop35005207.taobao.com，我女朋友开的饰品化妆品，想送朋友精美饰品的来看看。
切入正题
应大家的需要，发布地图功能，集成的是google map,速度、稳定性和可扩展性都不错
本次集成只是简单集成，大家有什么好的想法，可以一起讨论。
注：因本人不会PHP，不会做插件，只能是放出修改方案，需要的朋友可以参考一下。
演示：http://www.shnj.net
废话不啰嗦
先上两张效果图：



【修改】06-12 PM
不少朋友说系统默认进去的地图是南京，可否换成其他城市，答案当然是可以的(ss329朋友找到的方法是对的，大家可以测试，有一个问题就是如果有浏览器禁用弹出窗口的话，大家允许一下就OK)
修改方案如下：
首先打开Google地图，在上面寻找一个地址，然后上下左右移动地图，让这个地址正好处于地图的正中心位置，当您想寻找坐标位置已经处于地图的中心位置的时候，拷贝并粘贴以下代码到你的浏览器地址栏：
　　javascript:void(prompt('',gApplication.getMap().getCenter()));
然后回车一下。这时，你将得到一个弹出式的坐标，这个坐标就是你需要找的经度和纬度。
还有，至于有人问，想显示到街道级别的话，请再看step3--3)中的注释

【补充】06-16 AM
对不住大家了，这几天非常忙，不是每天都有空来的。所以解决问题也不是很及时.
对于地图不显示可能有以下几种情况,当然首先保证是安装后能正常的.
1.网速有影响,但是应该比较小点,网速慢的时候可能会地图出现的比较的慢(因为也对网速慢做了处理),但是应该是出现,如果太慢了可能就危险了.
2.显示地图的那个DIV,不要对他进行一些位置操作,比如style="position:relative;"或者position:absolute;这个是google map的问题,我也没有找到解决方案,不然的话,在修改个人信息的地方.地图就不会那个的显示在页面上(本意是做一个弹出浮动在页面上的效果,但是就出现了地图显示不正常);
3.默认坐标的zoom选的太大,导致跟本看不到地图,因为没有那张图,那google map怎么帮你显示呢.
以后上我遇到的地图不能正常显示的,问题集合.
4.地图不显示还有一种可能性就是如micromsf 所说的情况“我们的UCH放在二级目录，比如我的放在http://www.zjgoo.com/my ，那么注册GG MAP的CODE时注册网址应该写 http://www.zjgoo.com/my ，我原来写的是http://www.zjgoo.com ，就这么简单，改过来就好了 ”意思就是当你申请google map时填写的使用网址最好就是你使用的网址，同级目录。不然有可能造成地图不显示。
希望能对你们有帮助:)



step 1:
申请 google map 的 key，在http://code.google.com/intl/zh-CN/apis/maps/signup.html处申请获取
有人问，申请这干嘛？ 废话，没他你就不能用google map

step 2:
使用 phpmyadmin登陆您的uch数据库，（需要修改数据库哦）
在uchome_spacefield表中添加三个字段，分别为:
lat       类型为 varchar  长度为20
lng      类型为 varchar  长度为20
zoom  类型为 char        长度为3
【修改】：因大家需要SQL代码，下面的poplong已经给出了解决方案，在这里放上

1. ALTER TABLE `uchome_spacefield` ADD `lat` varchar(20) NOT NULL AFTER `feedfriend` ;
   
2. ALTER TABLE `uchome_spacefield` ADD `lng` varchar(20) NOT NULL AFTER `lat` ;
   
3. ALTER TABLE `uchome_spacefield` ADD `zoom` char(3) NOT NULL AFTER `lng` ;

复制代码

step 3:
      1).  在template中的default中找到cp_profile.htm，并以编辑方式打开;
      2).  找到

1.   <tr>
   
2.    <th>MSN</th>
   
3.    <td>
   
4.     <input type="text" class="t_input" name="msn" value="$space[msn]" />
   
5.    </td>
   
6.   </tr>

复制代码

此代码片段，在</tr>之后添加

1. <tr>
   
2. <td colspan="2">
   
3. <input type="button" id="btn_addMarker" disabled value="快添加您在地图上的位置吧，认识更多的朋友" onclick="AddMarker()" class="button" />
   
4. <div id="d_map" style="background-color:#FFF;border:solid 6px gray;width:481px;margin-top:3px;">
   
5. <div style="width:480px; height:300px;background-color:#f3f3f3;" id="map_canvas"></div>
   
6. </div>
   
7. <input type="hidden" name="lng" id="lng" value="$space[lng]" />
   
8. <input type="hidden" name="lat" id="lat" value="$space[lat]" />
   
9. <input type="hidden" name="zoom" id="zoom" value="$space[zoom]" />
   
10. <input type="hidden" name="sid" id="sid" value="$space[uid]" />
    
11. </td>
    
12. </tr>

复制代码

（注：其实就是在修改个人信息的地方多加了一条可以修改位置）
      3). 在页面代码最后添加

1. <script src=http://ditu.google.com/maps?file=api&v=2&oe=gb2312&key=此处为您申请的googlemapkey type="text/javascript"></script>
   
2. 
   
3. <script type="text/javascript">
   
4. var myMap;
   
5. var myMarker;
   
6. window.onload = function() {
   
7. if (GBrowserIsCompatible()) {
   
8. myMap = new GMap2(document.getElementById("map_canvas"));
   
9. var center = new GLatLng(32.06454,118.79405); //这个地方就是调整默认显示哪里的，至于里面的经纬度已经再上面给处了获取方法。
   
10. myMap.addControl(new GLargeMapControl());
    
11. myMap.addControl(new GScaleControl());
    
12. myMap.enableScrollWheelZoom();
    
13. 
    
14. if (document.getElementById("lat").value == ""){
    
15. myMap.setCenter(center, 11);     //这个地方就是可以修改到显示多少级别的，如果想显示到街道级别，把11改为16就差不多了，可以自己//改改看
    
16. document.getElementById("btn_addMarker").disabled = false;
    
17. }
    
18. else{
    
19. var _lat = document.getElementById("lat").value;
    
20. var _lng = document.getElementById("lng").value;
    
21. var _zoom = document.getElementById("zoom").value;
    
22. var _center = new GLatLng(_lat,_lng);
    
23. myMap.setCenter(_center,parseInt(_zoom));
    
24. document.getElementById("btn_addMarker").disabled = true;
    
25. 
    
26. Mark(_lat,_lng);
    
27. }
    
28. }
    
29. }
    
30. 
    
31. function Mark(lat,lng){
    
32. myMarker = new GMarker(new GLatLng(lat,lng), {draggable: true});
    
33. 
    
34. GEvent.addListener(myMarker, "click", function() {
    
35. myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
    
36. });
    
37. GEvent.addListener(myMarker, "dragstart", function() {
    
38. myMarker.closeInfoWindow();
    
39. });
    
40. GEvent.addListener(myMarker, "dragend", function() {
    
41. var gll = myMarker.getLatLng();
    
42. document.getElementById("lat").value = gll.lat();
    
43. document.getElementById("lng").value = gll.lng();
    
44. document.getElementById("zoom").value = myMap.getZoom();
    
45. myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
    
46. });
    
47. myMap.addOverlay(myMarker);
    
48. 
    
49. myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
    
50. }
    
51. 
    
52. function AddMarker(){
    
53. document.getElementById("btn_addMarker").disabled = true;
    
54. 
    
55. var ll = myMap.getCenter();
    
56. document.getElementById("lat").value = ll.lat();
    
57. document.getElementById("lng").value = ll.lng();
    
58. document.getElementById("zoom").value = myMap.getZoom();
    
59. Mark(ll.lat(),ll.lng());
    
60. }
    
61. 
    
62. function DeleteMarker(){
    
63. document.getElementById("btn_addMarker").disabled = false;
    
64. myMap.removeOverlay(myMarker);
    
65. var gll = myMarker.getLatLng();
    
66. document.getElementById("lat").value = "";
    
67. document.getElementById("lng").value = "";
    
68. document.getElementById("zoom").value = "";
    
69. }
    
70. 
    
71. </script>

复制代码

step 4:
1). 在template中的default中找到space_index.htm，并以编辑方式打开;
2). 找到

1. <div id="space_appicon" class="box">
   
2. <ul class="s_clear">
   
3. <li class="app-doing"><a href="space.php?uid=$space[uid]&do=doing&view=me" title="迷你博客">迷你博客</a></li>
   
4. <li class="app-blog"><a href="space.php?uid=$space[uid]&do=blog&view=me" title="日志">日志</a></li>
   
5. <li class="app-photo"><a href="space.php?uid=$space[uid]&do=album&view=me" title="相册">相册</a></li>
   
6. <li class="app-share"><a href="space.php?uid=$space[uid]&do=share&view=me" title="分享">分享</a></li>
   
7. <li class="app-thread"><a href="space.php?uid=$space[uid]&do=thread&view=me" title="话题">话题</a></li>
   
8. </ul>
   
9. </div>

复制代码

代码片段，紧跟其后在添加

1. <!--{if $space['showprofile']}-->
   
2. <!--{if $space[lat]}-->
   
3. <div id="space_location" class="box">
   
4. <h3>现在位置</h3>
   
5. <p><div style="width:198px;;height:170px;overflow:hidden;border:solid 1px #ccc;" id="map_canvas"></div></p>
   
6. </div>
   
7. <!--{/if}-->
   
8. <!--{/if}-->

复制代码

3). 在页面代码的最后添加

1. <script src=http://ditu.google.com/maps?file=api&v=2&oe=gb2312&key=此处为您申请的googlemapkey type="text/javascript"></script>
   
2. <script type="text/javascript">
   
3. window.onload = function() {
   
4. if (GBrowserIsCompatible()) {
   
5. var map = new GMap2(document.getElementById("map_canvas"));
   
6. var center = new GLatLng($space[lat],$space[lng]);
   
7. map.setCenter(center, $space[zoom]);
   
8. 
   
9. var marker = new GMarker(center);
   
10. map.addOverlay(marker);
    
11. }
    
12. }
    
13. </script>

复制代码

step 5:
1): 在source文件夹中找到cp_profile.php文件，并将其以编辑方式打开；
2): 找到

1. //提交检查
   
2. $setarr = array(
   
3. 'sex' => intval($_POST['sex']),
   
4. 'email' => isemail($_POST['email'])?$_POST['email']:'',
   
5. 'qq' => getstr($_POST['qq'], 20, 1, 1),
   
6. 'msn' => getstr($_POST['msn'], 80, 1, 1),
   
7. 'birthyear' => intval($_POST['birthyear']),
   
8. 'birthmonth' => intval($_POST['birthmonth']),
   
9. 'birthday' => intval($_POST['birthday']),
   
10. 'blood' => getstr($_POST['blood'], 5, 1, 1),
    
11. 'marry' => intval($_POST['marry']),
    
12. 'birthprovince' => getstr($_POST['birthprovince'], 20, 1, 1),
    
13. 'birthcity' => getstr($_POST['birthcity'], 20, 1, 1),
    
14. 'resideprovince' => getstr($_POST['resideprovince'], 20, 1, 1),
    
15. 'residecity' => getstr($_POST['residecity'], 20, 1, 1)
    
16. );

复制代码

将其修改为：

1. //提交检查
   
2. $setarr = array(
   
3. 'sex' => intval($_POST['sex']),
   
4. 'email' => isemail($_POST['email'])?$_POST['email']:'',
   
5. 'qq' => getstr($_POST['qq'], 20, 1, 1),
   
6. 'msn' => getstr($_POST['msn'], 80, 1, 1),
   
7. 'lat' => getstr($_POST['lat'], 20, 1, 1),
   
8. 'lng' => getstr($_POST['lng'], 20, 1, 1),
   
9. 'zoom' => getstr($_POST['zoom'], 3, 1, 1),
   
10. 'birthyear' => intval($_POST['birthyear']),
    
11. 'birthmonth' => intval($_POST['birthmonth']),
    
12. 'birthday' => intval($_POST['birthday']),
    
13. 'blood' => getstr($_POST['blood'], 5, 1, 1),
    
14. 'marry' => intval($_POST['marry']),
    
15. 'birthprovince' => getstr($_POST['birthprovince'], 20, 1, 1),
    
16. 'birthcity' => getstr($_POST['birthcity'], 20, 1, 1),
    
17. 'resideprovince' => getstr($_POST['resideprovince'], 20, 1, 1),
    
18. 'residecity' => getstr($_POST['residecity'], 20, 1, 1)
    
19. );

复制代码

其实就是中间多加了

1. 'lat' => getstr($_POST['lat'], 20, 1, 1),
   
2. 'lng' => getstr($_POST['lng'], 20, 1, 1),
   
3. 'zoom' => getstr($_POST['zoom'], 3, 1, 1),

复制代码

ok,这样就大功告成了。
希望对大家好用处，也希望大家多提建议，更加完善和强化地图的功能及用处，我们共同完善

[ 本帖最后由 stonezhu 于 2008-8-28 13:10 编辑 ]

占位观察:)

第一次坐到沙发。
等太久了。
不是说楼主去出差了吗？

2#占位真快……
3#哦？这你都知道
是出差了，但是看大家都很需要，所以就上来写一下。

来晚了

占位，好东西！

这个要顶!!!      严重的支持          期待更强大版本

刚好第一页 还好打字快 如今抢楼还得眼明手快啊

我的也不是的而已