实现商家google地图标注功能

第一步:
   
   
cript:void(prompt('',gApplication.getMap().getCenter()));
 然后回车一下。这时，你将得到一个弹出式的坐标，这个坐标就是你需要找的经度和纬度
申请 google map 的 key，在http://code.google.com/intl/zh-CN/apis/maps/signup.html 处申请获取key
后面要用到.
第二步
使用 phpmyadmin登陆您的ecmall数据库，（需要修改数据库哦）
       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>
                                
                                
                                 <input type="button" id="btn_addMarker" disabled value="标注位置" onclick="AddMarker()" class="btn" />
                                
                                
                                
                                
                                
                                
                                
                            </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("map_canvas"));
var center = new GLatLng(32.06454,118.79405); //这个地方就是调整默认显示哪里的，里面的经纬度,请在表格最下面查询，输入你所在的县市如果没有县级，请查询地级市，后面的前面2个数值串，就是经度和纬度，注意中间用，号隔开
myMap.addControl(new GLargeMapControl());
myMap.addControl(new GScaleControl());
myMap.enableScrollWheelZoom();
if (document.getElementByIdx("lat").value == ""){
myMap.setCenter(center, 10);     //这个地方就是可以修改到显示多少级别的，如果想显示到街道级别，把10改为16就差不多了，可以自己//改改看
 document.getElementByIdx("btn_addMarker").disabled = false;
}
else{
var _lat = document.getElementByIdx("lat").value;
var _lng = document.getElementByIdx("lng").value;
var _zoom = document.getElementByIdx("zoom").value;
var _center = new GLatLng(_lat,_lng);
 myMap.setCenter(_center,parseInt(_zoom));
 document.getElementByIdx("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() {
cript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
});
GEvent.addListener(myMarker, "dragstart", function() {
myMarker.closeInfoWindow();
});
GEvent.addListener(myMarker, "dragend", function() {
var gll = myMarker.getLatLng();
document.getElementByIdx("lat").value = gll.lat();
document.getElementByIdx("lng").value = gll.lng();
document.getElementByIdx("zoom").value = myMap.getZoom();
cript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
});
myMap.addOverlay(myMarker);
cript:void(0);' onclick='DeleteMarker()'>删除标记</a>");
}
function AddMarker(){
 document.getElementByIdx("btn_addMarker").disabled = true;
var ll = myMap.getCenter();
document.getElementByIdx("lat").value = ll.lat();
document.getElementByIdx("lng").value = ll.lng();
document.getElementByIdx("zoom").value = myMap.getZoom();
Mark(ll.lat(),ll.lng());
}
function DeleteMarker(){
 document.getElementByIdx("btn_addMarker").disabled = false;
myMap.removeOverlay(myMarker);
var gll = myMarker.getLatLng();
document.getElementByIdx("lat").value = "";
document.getElementByIdx("lng").value = "";
document.getElementByIdx("zoom").value = "";
}
 </script>
 ------------------------------------------------------
 #############################分割线#######################
再找到app\my_store.app.php
  找到下段代码
 ------------------------------------------------------
复制内容到剪贴板
代码:
$data = array_merge($data, array(
              
               'region_id'  => $_POST['region_id'],
              
              
               'address'   
               'tel'        => $_POST['tel'],
               'im_qq'      => $_POST['im_qq'],
               'im_ww'      => $_POST['im_ww'],
 ------------------------------------------------------
紧跟之后加以下代码
 ------------------------------------------------------
复制内容到剪贴板
代码:
'lng'        => $_POST['lng'],
               'lat'        => $_POST['lat'],
               'zoom'      
 ------------------------------------------------------
 #############################分割线#######################
第五步:
1). 在themes/store/default/left.html，并以编辑方式打开;
2). 找到
复制内容到剪贴板
代码:
<div class="wrap">
              
                   <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.html?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.html，在页面代码的最后添加，注意把“此处为您申请的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 "";
}
 </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>');//此为两个js文件
 </script>
<script type="text/javascript">
window.onload = function() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementByIdx("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>
 注:http://你的网址/includes/libraries/javascript/popupmarker'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js