1.5正式版 会员动态 google地图插件

看到有人需要这个功能
我就把我的整理下发给大家了

演示：www.msenlin.com/home
请不要注册！





第1步
选取默认地图坐标:
首先打开Google地图
ditu.google.cn

在上面寻找一个地址，然后上下左右移动地图，让这个地址正好处于地图的正中心位置，当您想寻找坐标位置已经处于地图的中心位置的时候，拷贝并粘贴以下代码到你的浏览器地址栏：

1. javascript:void(prompt('',gApplication.getMap().getCenter()));

复制代码

然后回车一下。这时，你将得到一个弹出式的坐标，这个坐标就是你需要找的经度和纬度。

第2步
申请 google map 的 key
http://code.google.com/intl/zh-CN/apis/maps/signup.html



把下面代码里的 红色 换成你的 KEY 跟 坐标就行了
ABQIAAAACoypN5nK6k_TLuhZ3oZH_RSJq63ahCLp9LRODt47kTV4yYcmfRQsX1n-KWWIoMpHFCpMhScWA57t4A

28.189756655197957, 112.99678802490234

第3步
在uchome_spacefield表中添加三个字段，分别为:
lat       类型为 varchar  长度为20
lng      类型为 varchar  长度为20
zoom  类型为 char        长度为3
或SQL直接添加代码：

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` ;

复制代码

第4步
在 template 中的 default 中找到 cp_profile.htm 或自己风格摸板
找到：

1. <tr>
   
2.         <th>居住地</th>
   
3.         <td>
   
4.                 <script type="text/javascript">
   
5.                 <!--
   
6.                 showprovince('resideprovince', 'residecity', '$space[resideprovince]');
   
7.                 showcity('residecity', '$space[residecity]', 'resideprovince');
   
8.                 //-->
   
9.                 </script>
   
10.         </td>
    
11. </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>

复制代码

再找到：

1. <!--{template footer}-->

复制代码

在上面添加：

1. 
   
2. <div class="f_status s_clear">
   
3.         <a href="javascript:;" onclick="window.scrollTo(0,0);" id="a_top" title="TOP">TOP</a>
   
4. </div>
   
5. 
   
6. 
   
7. <script src=http://ditu.google.com/maps?file=api&v=2&oe=gb2312&key=ABQIAAAACoypN5nK6k_TLuhZ3oZH_RSJq63ahCLp9LRODt47kTV4yYcmfRQsX1n-KWWIoMpHFCpMhScWA57t4A type="text/javascript"></script>
   
8. 
   
9. <script type="text/javascript">
   
10. var myMap;
    
11. var myMarker;
    
12. var geocoder = null;
    
13. window.onload = function() {
    
14. if (GBrowserIsCompatible()) {
    
15. myMap = new GMap2(document.getElementById("map_canvas"));
    
16. var center = new GLatLng(28.189756655197957, 112.99678802490234); //这个地方就是调整默认显示哪里的，至于里面的经纬度已经再上面给处了获取方法。
    
17. myMap.addControl(new GLargeMapControl());
    
18. myMap.addControl(new GScaleControl());
    
19. myMap.enableScrollWheelZoom();
    
20. geocoder = new GClientGeocoder();
    
21. 
    
22. if (document.getElementById("lat").value == ""){
    
23. myMap.setCenter(center, 16);     //这个地方就是可以修改到显示多少级别的，如果想显示到街道级别，把11改为16就差不多了，可以自己//改改看
    
24. document.getElementById("btn_addMarker").disabled = false;
    
25. }
    
26. else{
    
27. var _lat = document.getElementById("lat").value;
    
28. var _lng = document.getElementById("lng").value;
    
29. var _zoom = document.getElementById("zoom").value;
    
30. var _center = new GLatLng(_lat,_lng);
    
31. myMap.setCenter(_center,parseInt(_zoom));
    
32. document.getElementById("btn_addMarker").disabled = true;
    
33. 
    
34. Mark(_lat,_lng);
    
35. }
    
36. }
    
37. }
    
38. 
    
39. function Mark(lat,lng){
    
40. 
    
41. myMarker = new GMarker(new GLatLng(lat,lng), {draggable: true});
    
42. 
    
43. GEvent.addListener(myMarker, "click", function() {
    
44. myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
    
45. });
    
46. GEvent.addListener(myMarker, "dragstart", function() {
    
47. myMarker.closeInfoWindow();
    
48. });
    
49. GEvent.addListener(myMarker, "dragend", function() {
    
50. var gll = myMarker.getLatLng();
    
51. document.getElementById("lat").value = gll.lat();
    
52. document.getElementById("lng").value = gll.lng();
    
53. document.getElementById("zoom").value = myMap.getZoom();
    
54. myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
    
55. });
    
56. myMap.addOverlay(myMarker);
    
57. 
    
58. myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
    
59. }
    
60. 
    
61. function AddMarker(){
    
62. document.getElementById("btn_addMarker").disabled = true;
    
63. 
    
64. var ll = myMap.getCenter();
    
65. document.getElementById("lat").value = ll.lat();
    
66. document.getElementById("lng").value = ll.lng();
    
67. document.getElementById("zoom").value = myMap.getZoom();
    
68. Mark(ll.lat(),ll.lng());
    
69. }
    
70. 
    
71. document.getElementById("residecity").onchange=function AutoMarker(){
    
72. var tmpprovince=document.getElementById("resideprovince").value;
    
73. var tmpcity=document.getElementById("residecity").value;
    
74. var tmpAddress;
    
75. tmpAddress=tmpprovince + tmpcity;
    
76. if (geocoder) {
    
77. geocoder = new GClientGeocoder();
    
78.         geocoder.getLatLng(
    
79.           tmpAddress,
    
80.           function(point) {
    
81.             if (!point) {
    
82.               alert("iii，Google居然找不到：" + tmpAddress);
    
83.             } else {
    
84. document.getElementById("btn_addMarker").disabled = true;
    
85. myMap.clearOverlays()
    
86. Mark(point.y,point.x);
    
87.               
    
88.             }
    
89.           }
    
90.         );
    
91.       }
    
92. }
    
93. 
    
94. function DeleteMarker(){
    
95. document.getElementById("btn_addMarker").disabled = false;
    
96. myMap.removeOverlay(myMarker);
    
97. var gll = myMarker.getLatLng();
    
98. document.getElementById("lat").value = "";
    
99. document.getElementById("lng").value = "";
    
100. document.getElementById("zoom").value = "";
     
101. }
     
102. 
     
103. </script>
     

复制代码

第5布
在 template 中的 default 中找到 space_index.htm 或自己风格摸板
找到：

1.                         <!--{if $doinglist}-->
   
2.                         <h2>
   
3.                         <a href="space.php?uid=$space[uid]&do=doing&view=me" class="r_option">全部</a>
   
4.                         记录
   
5.                         </h2>

复制代码

在上面添加：

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}-->

复制代码

再找到：

1. <!--{template footer}-->

复制代码

在上面添加：

1. <script src=http://ditu.google.com/maps?file=api&v=2&oe=gb2312&key=ABQIAAAACoypN5nK6k_TLuhZ3oZH_RSJq63ahCLp9LRODt47kTV4yYcmfRQsX1n-KWWIoMpHFCpMhScWA57t4A 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>

复制代码

第6步
在 source 文件夹中找到 cp_profile.php 文件
找到：

1.         //提交检查
   
2.         $setarr = array(
   
3.                 'qq' => getstr($_POST['qq'], 20, 1, 1),
   
4.                 'msn' => getstr($_POST['msn'], 80, 1, 1),

复制代码

在下面添加：

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

复制代码

第7步
在 template 中的 default 中找到 index.htm 或自己风格摸板
在需要显示地图的地方加入下面代码

1. <div id="div_map">
   
2.                                                    <script type="text/javascript">var tmap_u= [];</script>                     
   
3.                                                <div id="viewmap_index" style="width:520px;height:300px;border:1px solid #ccc;"></div>
   
4.                                                 
   
5.                                 </div>

复制代码

在找到：

1. <!--{template footer}-->

复制代码

在后面添加：

1. <div style="display:none;">
   
2. 
   
3. <!--{if $newfeed}-->
   
4. <!--{loop $newfeed $key $value}-->        
   
5. <script type="text/javascript">
   
6. tmap_u.push({ "name":"$value[username]","lat": $value[lat], "lng": $value[lng], "id": $value[uid],"zoom": $value[zoom]});</script>
   
7.                                                                         <div id="map_u_{$key}">
   
8.                                                                                 <span style="float:right;"><a href="space.php?uid=$value[uid]" title="{$_SN[$value[uid]]}" target="_blank"><img src="<!--{avatar($value[uid],small)}-->" class="avatar" /></a></span>
   
9.                                                                                 <p>$value[title_template]</p>
   
10.                                                                                 <p><a href="javascript:map_zoom_in({$key});">放大地图</a> <a href="javascript:map_zoom_out();">还原地图</a> </p>
    
11.                                                                                 <p><a href="space.php?uid=$value[uid]" title="{$_SN[$value[uid]]}" target="_blank">访问&nbsp;$_SN[$value[uid]]&nbsp;个人空间</a>
    
12.                                                                                 </p></div>
    
13.                                                                 <!--{/loop}-->
    
14.                                                 <!--{/if}-->                        
    
15.                                         </div>
    
16. 
    
17. <script src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAACoypN5nK6k_TLuhZ3oZH_RSJq63ahCLp9LRODt47kTV4yYcmfRQsX1n-KWWIoMpHFCpMhScWA57t4A" type="text/javascript" charset="utf-8"></script>
    
18. <script type="text/javascript">
    
19. 
    
20. // show shops on map
    
21. var mymap = 'viewmap_index';
    
22. var map = null;
    
23. var mapbounds = new GLatLngBounds(new GLatLng(-33.873801,151.206765), new GLatLng(0.335218,0.719604));
    
24. var markers = [];
    
25. var current_marker = null;
    
26. 
    
27. function map_show_info(i)
    
28. {
    
29. if(current_marker !== i)
    
30. {
    
31. markers[i][0].openInfoWindow(markers[i][1], {"maxWidth": 250});
    
32. current_marker = i;
    
33. }
    
34. }
    
35. 
    
36. function map_zoom_in(i)
    
37. {
    
38. map.setCenter(markers[i][0].getPoint(), 16);
    
39. }
    
40. 
    
41. function map_zoom_out()
    
42. {
    
43. if(current_marker !== null) { markers[current_marker][0].closeInfoWindow(); }
    
44. map.setCenter(mapbounds.getCenter(), Math.min(15, map.getBoundsZoomLevel(mapbounds)));
    
45. }
    
46. function map_set_marker(marker, i)
    
47. {
    
48. GEvent.addListener(marker, "click", function() { map_show_info(i); });
    
49. GEvent.addListener(marker, "infowindowclose", function() { current_marker = null; });
    
50. 
    
51. }                               
    
52. function map_auto_show()
    
53. {
    
54. var next_marker;
    
55. if(current_marker === null) next_marker = 0;
    
56. else next_marker = current_marker + 1;
    
57. if(next_marker === null || next_marker >= markers.length) { next_marker = 0; }
    
58. map_show_info(next_marker);
    
59. window.setTimeout(map_auto_show, 6000);
    
60. }
    
61. 
    
62. if (GBrowserIsCompatible())
    
63. {
    
64. map = new GMap2(document.getElementById('viewmap_index'));
    
65. 
    
66. map.addControl(new GSmallMapControl());
    
67. map.addControl(new GScaleControl());
    
68. 
    
69.         var center = new GLatLng(112.1817398071289,37.20989218842202);
    
70.         map.setCenter(center, 12);
    
71. 
    
72. 
    
73. for(var i = 0; i < tmap_u.length; i++)
    
74. {
    
75. var icon = new GIcon(G_DEFAULT_ICON, "http://msenlin.com/home/api/td.png");
    
76. G_DEFAULT_ICON.iconSize = new GSize(22, 22);
    
77. icon.iconSize = new GSize(22, 22);
    
78. 
    
79. 
    
80. var marker = new GMarker(new GLatLng( tmap_u[i].lat, tmap_u[i].lng ), {"icon": icon, "title": tmap_u[i].name+"@梦森林"});
    
81. map.addOverlay(marker);
    
82. 
    
83. 
    
84. markers.push([marker,document.getElementById("map_u_"+i).innerHTML, tmap_u[i].id]);
    
85. if(markers.length > 1)
    
86. {
    
87. mapbounds =
    
88. new GLatLngBounds(new GLatLng(Math.min(mapbounds.getSouthWest().lat(), tmap_u[i].lat),
    
89. Math.min(mapbounds.getSouthWest().lng(), tmap_u[i].lng)),
    
90. new GLatLng(Math.max(mapbounds.getNorthEast().lat(), tmap_u[i].lat),
    
91. Math.max(mapbounds.getNorthEast().lng(), tmap_u[i].lng)));
    
92. }
    
93. else
    
94. {
    
95. mapbounds = new GLatLngBounds(new GLatLng(tmap_u[i].lat, tmap_u[i].lng),
    
96. new GLatLng(tmap_u[i].lat, tmap_u[i].lng));
    
97. }
    
98. }
    
99. 
    
100. map_zoom_out();
     
101. window.setTimeout(map_auto_show, 3000);               
     
102. 
     
103. }
     
104. 
     
105. </script>

复制代码

第8步
在 index.php 文件
找到：

1. //总会员
   
2. $spacecount = $_SGLOBAL['db']->result($_SGLOBAL['db']->query("SELECT COUNT(*) FROM ".tname('space')), 0);

复制代码

在下面加上：

1. //大家的最新动态
   
2. $newfeed = array();
   
3. $query = $_SGLOBAL['db']->query("SELECT * FROM ".tname('feed')." LEFT JOIN " . tname('spacefield') . " ON " .
   
4.         tname('feed') . ".uid =" . tname('spacefield') . ".uid WHERE " .tname('feed'). ".friend='0' and " .tname('spacefield'). ".lat != '' ORDER BY dateline DESC LIMIT 0,9");//显示最新动态
   
5. while ($value = $_SGLOBAL['db']->fetch_array($query)) {
   
6.         realname_set($value['uid'], $value['username']);
   
7.         
   
8.         $newfeed[] =mkfeed($value);
   
9.         /*foreach ($newfeed as $f_index => $tmpfeed) {
   
10.                 $newfeed[$f_index]['title_template'] = str_replace('{actor}','',$newfeed[$f_index]['title_template']);
    
11.                 $newfeed[$f_index]['title_template']=stripslashes($newfeed[$f_index]['title_template']);
    
12.                 $newfeed[$f_index]['title_template'] = preg_replace('/"/','"',$newfeed[$f_index]['title_template']);
    
13. 
    
14.         }*/
    
15. }

复制代码

大概整理 有问题回帖问

顶一下了

貌似不错，帮顶了

第3步
在uchome_spacefield表中添加三个字段，分别为:
lat       类型为 varchar  长度为20
lng      类型为 varchar  长度为20
zoom  类型为 char        长度为3
或SQL直接添加代码：

是什么意思啊？怎么操作？

第3步
在uchome_spacefield表中添加三个字段，分别为:
lat       类型为 varchar  长度为20
lng      类型为 varchar  长度为20
zoom  类型为 char        长度为3
或SQL直接添加代码：

是什么意思啊？怎么操 ...
zxpet 发表于 2009-3-29 20:00

就是用 phpMyAdmin 导入数据

先选 UCHOME 数据库 在点 SQL

在里面写入代码 执行就行了！

没有phpMyAdmin怎么办？

还有 这个怎么卸载呢？

备份就行了。。没需要什么卸载  唯一增加的就3个字段

lz最好把SQL语句也写一下 呵呵

问一下：偶如果是一个城市uchome那个地图能精确到街道吗？

怎么设置自己的位置啊？