你现在的位置:首页 > PHP网站建设知识库 > ecmall > 正文

实现ecmall商家显示地图位置的功能

如果能实现ecmall商家首页能显示该商家的地理位置,那将是一个很有趣的功能。我们以google地图来说明如何实现这个功能,baidu地图类似。

\

首先打开Google地图:ditu.google.com

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

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

复制上面的javascript代码然后回车一下。这时,你将得到一个弹出式的坐标,这个坐标就是你需要找的经度和纬度。

申请 google map 的 key,在http://code.google.com/intl/zh-CN/apis/maps/signup.html 处申请获取key
后面要用到

第二步:
使用phpmyadmin登陆您的ecmall数据库,接下来我们要在数据库表里添加一些字段。
执行下面的SQL代码

代码:
ALTER TABLE `ecm_store` ADD `lat` varchar(20) NOT NULL AFTER `region_name` ;
ALTER TABLE `ecm_store` ADD `lng` varchar(20) NOT NULL AFTER `lat` ;
ALTER TABLE `ecm_store` ADD `zoom` char(3) NOT NULL AFTER `lng` ;
表名为ecm_store 店铺信息

第三步:
1).在themes\mall\default中找到my_store.index.html,并以编辑方式打开;
2).找到

代码:
<tr>
<th>{$lang.im_msn}:</th>
......
</tr>
--------------------------------------------------
在以上代码之后添加
-------------------------------------------------

代码:
<tr>
<th class="align3"><p><b>地图标注:</b><br /><br />拖动地图左边的比例尺放大缩小地图,点击"标注位置"按钮,地图上会出现气球图标,把气球拖动到你要标记的地方即可!< /p></th>
<td>
<input type="button" id="btn_addMarker" disabled value="标注位置" onclick="AddMarker()" class="btn" />
<div id="d_map" style="background-color:#FFF;border:solid 6px gray;width:581px;margin-top:3px;">
<div style="width:580px; height:300px;background-color:#f3f3f3;" id="map_canvas"></div></div>
<input type="hidden" name="lng" id="lng" value="{$store.lng}" />
<input type="hidden" name="lat" id="lat" value="{$store.lat}" />
<input type="hidden" name="zoom" id="zoom" value="{$store.zoom}" />
<input type="hidden" name="sid" id="sid" value="{$store.store_id}" />
</td>
</tr>
 

第四步:
仍然在themes\mall\default中找到my_store.index.html在页面代码的最后{include file=footer.html}之前添加以下代码,注意把“此处为您申请的key”内容改成你的开始获得的key,不然无法使用
 

代码:
<script src=http://ditu.google.com/maps?file=api&v=2&oe=gb2312&key=此 处为您申请的key type="text/javascript"></script>
<script type="text/javascript">
var myMap;
var myMarker;
window.onload = function() {
if (GBrowserIsCompatible()) {
myMap = new GMap2(document.getElementByIdx_x("map_canvas"));
var center = new GLatLng(32.06454,118.79405); //这个地方就是调整默认显示哪里的,里面的经纬度,请在表格最下面查询,输入你所在的县市如果没有县级,请查询地级市,后面的前面2个数值串,就是经度 和纬度,注意中间用,号隔开
myMap.addControl(new GLargeMapControl());
myMap.addControl(new GScaleControl());
myMap.enableScrollWheelZoom();
if (document.getElementByIdx_x("lat").value == ""){
myMap.setCenter(center, 10);     //这个地方就是可以修改到显示多少级别的,如果想显示到街道级别,把10改为16就差不多了,可以自己//改改看
document.getElementByIdx_x("btn_addMarker").disabled = false;
}
else{
var _lat = document.getElementByIdx_x("lat").value;
var _lng = document.getElementByIdx_x("lng").value;
var _zoom = document.getElementByIdx_x("zoom").value;
var _center = new GLatLng(_lat,_lng);
myMap.setCenter(_center,parseInt(_zoom));
document.getElementByIdx_x("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.getElementByIdx_x("lat").value = gll.lat();
document.getElementByIdx_x("lng").value = gll.lng();
document.getElementByIdx_x("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.getElementByIdx_x("btn_addMarker").disabled = true;
var ll = myMap.getCenter();
document.getElementByIdx_x("lat").value = ll.lat();
document.getElementByIdx_x("lng").value = ll.lng();
document.getElementByIdx_x("zoom").value = myMap.getZoom();
Mark(ll.lat(),ll.lng());
}
function DeleteMarker(){
document.getElementByIdx_x("btn_addMarker").disabled = false;
myMap.removeOverlay(myMarker);
var gll = myMarker.getLatLng();
document.getElementByIdx_x("lat").value = "";
document.getElementByIdx_x("lng").value = "";
document.getElementByIdx_x("zoom").value = "";
}
</script>

再找到app\my_store.app.php
找到下段代码
------------------------------------------------------

代码:
$data = array_merge($data, array(
'store_name' => $_POST['store_name'],
'region_id'  => $_POST['region_id'],
'region_name'=> $_POST['region_name'],
'description'=> $_POST['description'],
'address'    => $_POST['address'],
'tel'        => $_POST['tel'],
'im_qq'      => $_POST['im_qq'],
'im_ww'      => $_POST['im_ww'],
------------------------------------------------------
紧跟之后加以下代码
------------------------------------------------------

代码:
'lng'        => $_POST['lng'],
'lat'        => $_POST['lat'],
'zoom'       => $_POST['zoom'],
------------------------------------------------------


第五步:
1). 在themes/store/default/left.html,并以编辑方式打开;

2). 找到

代码:
<div class="wrap">
<div class="wrap_child">
<div class="major">
<ul class="list">
------------------------------------------------------------------
在之前添加

代码:
<div class="module_common">
<h2 class="common_title veins1">
<div class="ornament1"></div>
<div class="ornament2"></div>
<span class="ico1"><span class="ico2">现在位置</span></span>
</h2>
<!--{if $store.lat}-->
<iframe src="http://你的网址/themes/store/default/map.htm?lat={$store.lat}&lng= {$store.lng}&name={$store.store_name|escape}" frameborder="0" scrolling="no"width="204px" height="250px" ></iframe>
<!--{/if}-->
</div>
****此处使用<iframe></iframe>不会因为二级域名(网址变了,google api不能用)所以使用<iframe></iframe>*****


第六步: 在根目录下新建map.htm,在页面代码的最后添加,注意把“此处为您申请的key”内容改成你的开始获得的key,不然无法使用
代码如下:

代码:
<script language="JavaScript">
function Request(argname)
{
var url = document.location.href;
var arrStr = url.substring(url.indexOf("?")+1).split("&");
//return arrStr;
for(var i =0;i<arrStr.length;i++)
{
var loc = arrStr.indexOf(argname+"=");
if(loc!=-1)
{
return arrStr.replace(argname+"=","").replace("?","");
break;
}
}
return "";
}
</script>
<div id="space_location" class="wrap">
<p><div style="top:-12px;left:-9px;width:204px;;height:250px;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=此 处为您申请的key type="text/javascript"></script>
<script type="text/javascript">
document.write('<script type="text/javascript" src="http://你的网址/includes/libraries/javascript/popupmarker'+ (document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');
</script>
<script type="text/javascript">
window.onload = function() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementByIdx_x("map_canvas"));
var center = new GLatLng( Request("lat"), Request("lng"));
map.setCenter(center, 15);
var opts = { text : Request("name")};
var marker = new PopupMarker(center, opts);
map.addOverlay(marker);
}
}
</script>

这确实是一个很有意思的功能。