实现商家google地图标注功能

第一步:

    打开网址 ditu.google.cn

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

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

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

申请 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>

                       <thclass="align3"><p><b>地图标注:</b><br/><br/>拖动地图左边的比例尺放大缩小地图，点击"标注位置"按钮,地图上会出现气球图标，把气球拖动到你要标记的地方即可!</p></th>

                       <td>

                       <input type="button" id="btn_addMarker" disabledvalue="标注位置" onclick="AddMarker()" class="btn"/>

                       <div id="d_map"style="background-color:#FFF;border:solid 6pxgray;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在页面代码的最后{includefile=footer.html}之前添加以下代码，注意把“此处为您申请的key”内容改成你的开始获得的key，不然无法使用

--------------------------------------------------

复制内容到剪贴板

代码:

<scriptsrc=http://ditu.google.com/maps?file=api&v=2&oe=gb2312&key=此处为您申请的keytype="text/javascript"></script>

<scripttype="text/javascript">

var myMap;

var myMarker;

window.onload = function() {

if (GBrowserIsCompatible()) {

myMap = newGMap2(document.getElementByIdx("map_canvas"));

var center = newGLatLng(32.06454,118.79405);//这个地方就是调整默认显示哪里的，里面的经纬度,请在表格最下面查询，输入你所在的县市如果没有县级，请查询地级市，后面的前面2个数值串，就是经度和纬度，注意中间用，号隔开

myMap.addControl(newGLargeMapControl());

myMap.addControl(newGScaleControl());

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 = newGLatLng(_lat,_lng);

myMap.setCenter(_center,parseInt(_zoom));

document.getElementByIdx("btn_addMarker").disabled = true;

Mark(_lat,_lng);

}

}

}

function Mark(lat,lng){

myMarker = new GMarker(newGLatLng(lat,lng), {draggable: true});

GEvent.addListener(myMarker, "click",function() {

myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><ahref='javascript: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();

myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><ahref='javascript:void(0);'onclick='DeleteMarker()'>删除标记</a>");

});

myMap.addOverlay(myMarker);

myMarker.openInfoWindowHtml("<b>把气球拖动到你要标记的地方</b><p>拖动左边的比例尺可以缩放地图</p><ahref='javascript: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(

           '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). 找到

复制内容到剪贴板

代码:

<divclass="wrap">

           <div class="wrap_child">

              <divclass="major">

                <ulclass="list">

------------------------------------------------------------------

在之前添加

复制内容到剪贴板

代码:

<divclass="module_common">

<h2 class="common_titleveins1">

    <divclass="ornament1"></div>

    <divclass="ornament2"></div>

    <spanclass="ico1"><spanclass="ico2">现在位置</span></span>

</h2>

<!--{if$store.lat}-->

<iframesrc="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>不会因为二级域名（网址变了，googleapi不能用）所以使用<iframe></iframe>*****

#############################分割线#######################

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

代码如下：

复制内容到剪贴板

代码:

<scriptlanguage="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><divstyle="top:-12px;left:-9px;width:204px;;height:250px;overflow:hidden;border:solid1px #ccc;"id="map_canvas"></div></p>

</div>

<scriptsrc=http://ditu.google.com/maps?file=api&v=2&oe=gb2312&key=此处为您申请的keytype="text/javascript"></script>

<scripttype="text/javascript">

   document.write('<scripttype="text/javascript"src="http://你的网址/includes/libraries/javascript/popupmarker'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');//此为两个js文件

  </script>

<scripttype="text/javascript">

window.onload = function() {

if (GBrowserIsCompatible()) {

var map = newGMap2(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 中的两个JS文件作用:地图上标记点显示效果,可以用其他的实现.