“自作”google地图显示会员最新动态

pphuang · 发表于 2009-5-26 15:25:18

本帖最后由 pphuang 于 2009-5-26 22:56 编辑

郑重声明：本教程中所用文件均来自互联网，版权归原作者所有。本人只是根据网络上流传的代码进行有必要的更改，并根据实际操作重新写了本教程！所用代码较多，提醒一下你：不要看花了。即使有美女溜过，也别歪下你的头，否则保证你看走眼喽！

本教程本来是图文并茂的，但是DZ坛子附件要求太严格了，搞得我发了三次，麻烦得很，因此，这里不提供附件及图示例子了。需要的同志请看原贴：
思齐集-智慧论坛--google地图动态显示会员最新。我的论坛提供完整附件，需要下载附件的，请到论坛下载！
本教程特色之处：按图索骥式的说明问题的来源，并手把手式地教你解决它！现在开始：

1、准备开始：
A：创建数据字段

在uchome_spacefield数据表中添加以下三个字段，字段及类型如下：

lat 类型为 varchar 长度为20
lng 类型为 varchar 长度为20
zoom 类型为 char 长度为3

复制代码

为了防止手动添加会发生手误，我们直接在PHPMyAdmin中在相应的数据库下面运行SQL语句，语句如下：

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

复制代码

B：申请Google地图API以及默认显示的地图坐标值

API申请地址：
http://code.google.com/intl/zh-CN/apis/maps/signup.html
注册Google邮箱，然后登录，进行申请，填写你的网站域名，拥有自己的网站地图API。如：

ABQIAAAAxAPzlj_7e7GS2InW3qJGeBSYB1UoS9AGBeg2_Hvu55ll-_S8aRTMsnqRNgVDr7XDSzcoXCJQWDWgug

下载附件get.html文件，打开，选择你网站地图默认显示的位置，得到坐标，并记录好。如上海浦东的坐标

31.2494334, 121.6485965)。
2、文件修改。
A：打开source 目录下面的 cp_profile.php 文件，找到

'msn' => getstr($_POST['msn'], 80, 1, 1),

复制代码

，在其下面添加：

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

复制代码

B：打开template 目录中的 default [或自己风格摸板目录]中找到 cp_profile.htm，找到：

<tr>
<th>居住地</th>
<td>
<script type="text/javascript">
<!--
showprovince('resideprovince', 'residecity', '$space[resideprovince]');
showcity('residecity', '$space[residecity]', 'resideprovince');
//-->
</script>
</td>
</tr>

复制代码

在其下面添加：

<tr>
<td colspan="2">
<input type="button" id="btn_addMarker" disabled value="添加我在地图上的位置" onclick="AddMarker()" class="button" />
<div id="d_map" style="background-color:#FFF;border:solid 6px gray;width:481px;margin-top:3px;">
<div style="width:480px; height:300px;background-color:#f3f3f3;" id="map_canvas"></div>
</div>
<input type="hidden" name="lng" id="lng" value="$space[lng]" />
<input type="hidden" name="lat" id="lat" value="$space[lat]" />
<input type="hidden" name="zoom" id="zoom" value="$space[zoom]" />
<input type="hidden" name="sid" id="sid" value="$space[uid]" />
</td>
</tr>

复制代码

并在最下面，找到，在其上面添加：

<div class="f_status s_clear">
<a href="javascript:;" onclick="window.scrollTo(0,0);" id="a_top" title="TOP">TOP</a>
</div>
<script src=http://ditu.google.com/maps?file=api&v=2&oe=gb2312&key=ABQIAAAAxAPzlj_7e7GS2InW3qJGeBSYB1UoS9AGBeg2_Hvu55ll-_S8aRTMsnqRNgVDr7XDSzcoXCJQWDWgug type="text/javascript"></script>
<script type="text/javascript">
var myMap;
var myMarker;
var geocoder = null;
window.onload = function() {
if (GBrowserIsCompatible()) {
myMap = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(31.2494334, 121.6485965); //注意替换掉你默认的地理位置坐标值。
myMap.addControl(new GLargeMapControl());
myMap.addControl(new GScaleControl());
myMap.enableScrollWheelZoom();
geocoder = new GClientGeocoder();
if (document.getElementById("lat").value == ""){
myMap.setCenter(center, 11); //这个地方就是可以修改到显示多少级别的，如果想显示到街道级别，把11改为16就可以了。
document.getElementById("btn_addMarker").disabled = false;
}
else{
var _lat = document.getElementById("lat").value;
var _lng = document.getElementById("lng").value;
var _zoom = document.getElementById("zoom").value;
var _center = new GLatLng(_lat,_lng);
myMap.setCenter(_center,parseInt(_zoom));
document.getElementById("btn_addMarker").disabled = true;
Mark(_lat,_lng);
}
}
}
function Mark(lat,lng){
myMarker = new GMarker(new GLatLng(lat,lng), {draggable: true});
GEvent.addListener(myMarker, "click", function() {
myMarker.openInfoWindowHtml("<b>拖动气球，标记你所在的地理位置！</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
});
GEvent.addListener(myMarker, "dragstart", function() {
myMarker.closeInfoWindow();
});
GEvent.addListener(myMarker, "dragend", function() {
var gll = myMarker.getLatLng();
document.getElementById("lat").value = gll.lat();
document.getElementById("lng").value = gll.lng();
document.getElementById("zoom").value = myMap.getZoom();
myMarker.openInfoWindowHtml("<b>拖动气球，标记你所在的地理位置！</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
});
myMap.addOverlay(myMarker);
myMarker.openInfoWindowHtml("<b>拖动气球，标记你所在的地理位置！</b><p>拖动左边的比例尺可以缩放地图</p><a href='javascript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
}
function AddMarker(){
document.getElementById("btn_addMarker").disabled = true;
var ll = myMap.getCenter();
document.getElementById("lat").value = ll.lat();
document.getElementById("lng").value = ll.lng();
document.getElementById("zoom").value = myMap.getZoom();
Mark(ll.lat(),ll.lng());
}
document.getElementById("residecity").onchange=function AutoMarker(){
var tmpprovince=document.getElementById("resideprovince").value;
var tmpcity=document.getElementById("residecity").value;
var tmpAddress;
tmpAddress=tmpprovince + tmpcity;
if (geocoder) {
geocoder = new GClientGeocoder();
geocoder.getLatLng(
tmpAddress,
function(point) {
if (!point) {
alert("iii，Google居然找不到：" + tmpAddress);
} else {
document.getElementById("btn_addMarker").disabled = true;
myMap.clearOverlays()
Mark(point.y,point.x);
}
}
);
}
}
function DeleteMarker(){
document.getElementById("btn_addMarker").disabled = false;
myMap.removeOverlay(myMarker);
var gll = myMarker.getLatLng();
document.getElementById("lat").value = "";
document.getElementById("lng").value = "";
document.getElementById("zoom").value = "";
}
</script>

复制代码

注意替换你的API与默认地理坐标！

C：打开根目录下面的index.php文件。找到“//获得缓存”，在其上面添加如下代码：

//会员的最新动态
$newfeed = array();
$query = $_SGLOBAL['db']->query("SELECT * FROM ".tname('feed')." LEFT JOIN " . tname('spacefield') . " ON " .
tname('feed') . ".uid =" . tname('spacefield') . ".uid WHERE " .tname('feed'). ".friend='0' and " .tname('spacefield'). ".lat != '' ORDER BY dateline DESC LIMIT 0,9");//显示最新动态
while ($value = $_SGLOBAL['db']->fetch_array($query)) {
realname_set($value['uid'], $value['username']);
$newfeed[] =mkfeed($value);
/*foreach ($newfeed as $f_index => $tmpfeed) {
$newfeed[$f_index]['title_template'] = str_replace('{actor}','',$newfeed[$f_index]['title_template']);
$newfeed[$f_index]['title_template']=stripslashes($newfeed[$f_index]['title_template']);
$newfeed[$f_index]['title_template'] = preg_replace('/"/','"',$newfeed[$f_index]['title_template']);
}*/
}

复制代码

D：在 template 中的 default 中[或自己风格摸板目录]找到 space_index.htm 文件。找到：

<h2>
<a href="space.php?uid=$space[uid]&do=doing&view=me" class="r_option">全部</a>
记录
</h2>

复制代码

在这段代码上面添加：

<div id="space_location" class="box">
<h3>现在位置</h3>
<p><div style="width:198px;;height:170px;overflow:hidden;border:solid 1px #ccc;" id="map_canvas"></div></p>
</div>

复制代码

这样就完成了个人主页左侧图像下面显示自己的地理位置了。

接下来，在最下面的在上面添加：

<script src=http://ditu.google.com/maps?file=api&v=2&oe=gb2312&key=ABQIAAAAxAPzlj_7e7GS2InW3qJGeBSYB1UoS9AGBeg2_Hvu55ll-_S8aRTMsnqRNgVDr7XDSzcoXCJQWDWgug type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng($space[lat],$space[lng]);
map.setCenter(center, $space[zoom]);
var marker = new GMarker(center);
map.addOverlay(marker);
}
}
</script>

复制代码

注意替换你的API。

E：在 template 中的 default 中[或自己风格摸板]找到 index.htm 文件，在最下面的在下面添加：

<div style="display:none;">
<script type="text/javascript">
tmap_u.push({ "name":"$value[username]","lat": $value[lat], "lng": $value[lng], "id": $value[uid],"zoom": $value[zoom]});</script>
<div id="map_u_{$key}">
<span style="float:right;"><a href="space.php?uid=$value[uid]" title="{$_SN[$value[uid]]}" target="_blank"><img src="" class="avatar" /></a></span>
<p>$value[title_template]</p>
<p><a href="javascript:map_zoom_in({$key});">放大地图</a> <a href="javascript:map_zoom_out();">还原地图</a> </p>
<p><a href="space.php?uid=$value[uid]" title="{$_SN[$value[uid]]}" target="_blank">访问 $_SN[$value[uid]] 个人空间</a>
</p></div>
</div>
<script src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAxAPzlj_7e7GS2InW3qJGeBSYB1UoS9AGBeg2_Hvu55ll-_S8aRTMsnqRNgVDr7XDSzcoXCJQWDWgug" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// show shops on map
var mymap = 'viewmap_index';
var map = null;
var mapbounds = new GLatLngBounds(new GLatLng(-33.873801,151.206765), new GLatLng(0.335218,0.719604));
var markers = [];
var current_marker = null;
function map_show_info(i)
{
if(current_marker !== i)
{
markers[i][0].openInfoWindow(markers[i][1], {"maxWidth": 250});
current_marker = i;
}
}
function map_zoom_in(i)
{
map.setCenter(markers[i][0].getPoint(), 16);
}
function map_zoom_out()
{
if(current_marker !== null) { markers[current_marker][0].closeInfoWindow(); }
map.setCenter(mapbounds.getCenter(), Math.min(15, map.getBoundsZoomLevel(mapbounds)));
}
function map_set_marker(marker, i)
{
GEvent.addListener(marker, "click", function() { map_show_info(i); });
GEvent.addListener(marker, "infowindowclose", function() { current_marker = null; });
}
function map_auto_show()
{
var next_marker;
if(current_marker === null) next_marker = 0;
else next_marker = current_marker + 1;
if(next_marker === null || next_marker >= markers.length) { next_marker = 0; }
map_show_info(next_marker);
window.setTimeout(map_auto_show, 6000);
}
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById('viewmap_index'));
map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
var center = new GLatLng(112.1817398071289,37.20989218842202);
map.setCenter(center, 12);
for(var i = 0; i < tmap_u.length; i++)
{
var icon = new GIcon(G_DEFAULT_ICON, "http://www.siqiji.cn/home/template/default/image/td.png");
G_DEFAULT_ICON.iconSize = new GSize(22, 22);
icon.iconSize = new GSize(22, 22);
var marker = new GMarker(new GLatLng( tmap_u[i].lat, tmap_u[i].lng ), {"icon": icon, "title": tmap_u[i].name+"@红扑扑"});
map.addOverlay(marker);
markers.push([marker,document.getElementById("map_u_"+i).innerHTML, tmap_u[i].id]);
if(markers.length > 1)
{
mapbounds =
new GLatLngBounds(new GLatLng(Math.min(mapbounds.getSouthWest().lat(), tmap_u[i].lat),
Math.min(mapbounds.getSouthWest().lng(), tmap_u[i].lng)),
new GLatLng(Math.max(mapbounds.getNorthEast().lat(), tmap_u[i].lat),
Math.max(mapbounds.getNorthEast().lng(), tmap_u[i].lng)));
}
else
{
mapbounds = new GLatLngBounds(new GLatLng(tmap_u[i].lat, tmap_u[i].lng),
new GLatLng(tmap_u[i].lat, tmap_u[i].lng));
}
}
map_zoom_out();
window.setTimeout(map_auto_show, 3000);
}
</script>

复制代码

最后在你所需要显示地图的地方插入

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

复制代码

注意：自定义宽高，并进行符合你风格模板风格的美化。

至此，代码更改全部完成。登录后台，更新缓存，到前台，进入个人设置，个人资料里面指定你所在的地理位置，提交，完成！

按以上方面，在新写了network.php这样，我的会员在登录网站的时候，就可以地图式地观看站内各会员的最新动态了。。。

怕麻烦的同志，下载pphuang附件，直接覆盖。前提是：pphuang目录下面的所有文件与你网站所对应的网站文件为UCH1.5正式版未被改动文件！如果你的网站之前由于安装插件而有所改动的话，建议你按上面的操作教程来进行，以免对你的网站造成不必要的麻烦，感觉感谢！

附件地址：http://www.siqiji.cn/forum/thread-2173-1-1.html不要又说没看到了。。。

pphuang · 发表于 2009-5-26 15:29:56

占位，楼上比我快得多了！

msnal · 发表于 2009-5-26 20:21:55

这么长。。。

120cm · 发表于 2009-5-26 20:55:06

好长，没有附件下载？

落寞纷繁 · 发表于 2009-5-26 21:13:39

不错

支持

pphuang · 发表于 2009-5-26 22:53:49

需要附件者请前往我的论坛下载。免费的哦：http://www.siqiji.cn/forum/thread-2173-1-1.html

GGGHHH · 发表于 2009-5-26 23:14:52

留个脚印

pphuang · 发表于 2009-5-26 23:22:27

请各位仔细看原贴。在DZ论坛附件严格限制的条件下，我也只能把附件放在我的论坛了，不过，免费下载的，放心好了，有问题，请到我的论坛进行反馈，我会第一时间回复你！非常感谢！

再次强调本贴原地址：http://www.siqiji.cn/forum/thread-2173-1-1.html

pphuang · 发表于 2009-5-31 22:34:32

haitao21203 · 发表于 2009-6-10 22:44:45

		自动登录	找回密码
密码			立即注册