实现商家google地图标注功能

来源：互联网发布：sql分页查询编辑：程序博客网时间：2024/04/30 10:57

第一步:

打开网址 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>

......

</tr>

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

在以上代码之后添加

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

复制内容到剪贴板

代码:

<tr>

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

<td>

</td>

</tr>

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

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

第四步：

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

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

复制内容到剪贴板

代码:

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() {

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("lat").value = gll.lat();

document.getElementByIdx("lng").value = gll.lng();

document.getElementByIdx("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("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). 找到

复制内容到剪贴板

代码:

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

在之前添加

复制内容到剪贴板

代码:

</h2>

</div>

****此处使用<iframe></iframe>不会因为二级域名（网址变了，google api不能用）所以使用<iframe></iframe>*****

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

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

代码如下：

复制内容到剪贴板

代码:

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>

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

</script>

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