正文  第三方集成 > 百度地图集成 >

ecshop加入百度地图,支持周边标记实例

百度地图是一个目前用到非常多的地图了,我们可以调用api来实现在百度地图中标位置,查找位置等等下面我们一起来看个ecshop加入百度地图,支持周边标记实例 ecshop加入百度地图接口,首...

百度地图是一个目前用到非常多的地图了,我们可以调用api来实现在百度地图中标位置,查找位置等等下面我们一起来看个ecshop加入百度地图,支持周边标记实例

ecshop加入百度地图接口,首先在你要调用的页面加入下面这段话(样式可以自己调),传入默认的值,分别是经度、纬度、关键字(可以标记地图范围内与你关键字有关的地点)。

 代码如下 复制代码

<ul>


 <li onclick="reload_map({$room.longitude},{$room.latitude},'公交站')" class="current">公交</li>

 <li onclick="reload_map({$room.longitude},{$room.latitude},'地铁站')">地铁</li>

 <li onclick="reload_map({$room.longitude},{$room.latitude},'嘉利华酒店')">周边嘉利华</li>

 <li onclick="reload_map({$room.longitude},{$room.latitude},'旅游')">旅游</li>

 <li onclick="reload_map({$room.longitude},{$room.latitude},'餐馆')">餐饮</li>

 <li onclick="reload_map({$room.longitude},{$room.latitude},'购物')">购物</li>

 <li onclick="reload_map({$room.longitude},{$room.latitude},'娱乐')">娱乐</li>

 <li onclick="reload_map({$room.longitude},{$room.latitude},'医疗')">医疗</li>

 <li onclick="reload_map({$room.longitude},{$room.latitude},'银行')">银行</li>

</ul>

<iframe src="hotels_map.php?weidu={$room.latitude}&jingdu={$room.longitude}&keywords=公交站" width="752" height="389" id="map_iframe"></iframe>

 


<script type="text/javascript">

//地图

function reload_map(jingdu,weidu,keywords){

 var url = "hotels_map.php?weidu="+weidu+"&jingdu="+jingdu+"&keywords="+keywords;

 $("#map_iframe").attr("src",url);

}

</script>


这样就可以实现切换的效果,点击不同的选项卡,可以查看不同地图的内容。

 

powerby:www.daixiaorui.com

 

 

hotels_map.php 部分:

 代码如下 复制代码

 


<?php

 


$weidu = $_REQUEST['weidu'];

$jingdu = $_REQUEST['jingdu'];

$keywords = $_REQUEST['keywords'];

 


if($keywords == '嘉利华酒店'){

 $suofang = 11;

}else{

 $suofang = 14;

}

 


$str = '<html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

 <style type="text/css">

 body,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}

 </style>

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙(很简单就可以申请到)"></script>

 <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

 <title>根据中心点关键字周边搜索</title>

 </head>

 <body>

 <div id="allmap"></div>

 </body>

 </html>

 <script type="text/javascript">     

//谷歌坐标转化为百度坐标

var xx = '.$jingdu.';

var yy = '.$weidu.';

var ggPoint = new BMap.Point(xx,yy);

 


//坐标转换完之后的回调函数

translateCallback = function (point){

    //alert(point.lng + "," + point.lat);

 var map = new BMap.Map("allmap");            // 创建Map实例

 map.centerAndZoom(new BMap.Point(point.lng, point.lat), '.$suofang.');//初始化时,即可设置中心点和地图缩放级别。

 var local = new BMap.LocalSearch(map, {

  renderOptions:{map: map, autoViewport:true}

 });

 map.addControl(new BMap.ScaleControl());

 map.enableScrollWheelZoom(true);

 map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件

 var point = new BMap.Point((point.lng), (point.lat));

 map.centerAndZoom(point, '.$suofang.');

 var marker = new BMap.Marker(point);  // 创建标注

 map.addOverlay(marker);              // 将标注添加到地图中

 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

 


 //可视范围搜索

 var local = new BMap.LocalSearch(map, {

  renderOptions:{map: map}

 });

 local.searchInBounds("'.$keywords.'", map.getBounds());  

}

 


setTimeout(function(){

    BMap.Convertor.translate(ggPoint,2,translateCallback);     //GCJ-02坐标转成百度坐标

}, 300);

 


</script>';

 


echo $str;

 


?>