当前位置:首页 > CMS教程 > ecshop > 列表

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

发布:smiling 来源: PHP粉丝网  添加日期:2014-12-06 10:54:23 浏览: 评论:0 

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

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

  1. <ul> 
  2.  
  3.  
  4.  <li onclick="reload_map({$room.longitude},{$room.latitude},'公交站')" class="current">公交</li> 
  5.  
  6.  <li onclick="reload_map({$room.longitude},{$room.latitude},'地铁站')">地铁</li> 
  7.  
  8.  <li onclick="reload_map({$room.longitude},{$room.latitude},'嘉利华酒店')">周边嘉利华</li> 
  9.  
  10.  <li onclick="reload_map({$room.longitude},{$room.latitude},'旅游')">旅游</li> 
  11.  
  12.  <li onclick="reload_map({$room.longitude},{$room.latitude},'餐馆')">餐饮</li> 
  13.  
  14.  <li onclick="reload_map({$room.longitude},{$room.latitude},'购物')">购物</li> 
  15.  
  16.  <li onclick="reload_map({$room.longitude},{$room.latitude},'娱乐')">娱乐</li> 
  17.  
  18.  <li onclick="reload_map({$room.longitude},{$room.latitude},'医疗')">医疗</li> 
  19.  
  20.  <li onclick="reload_map({$room.longitude},{$room.latitude},'银行')">银行</li> 
  21.  
  22. </ul> 
  23.  
  24. <iframe src="hotels_map.php?weidu={$room.latitude}&jingdu={$room.longitude}&keywords=公交站" width="752" height="389" id="map_iframe"></iframe> 
  25.  
  26.  
  27.  
  28.  
  29. <script type="text/javascript"
  30.  
  31. //地图 
  32.  
  33. function reload_map(jingdu,weidu,keywords){ 
  34.  
  35.  var url = "hotels_map.php?weidu="+weidu+"&jingdu="+jingdu+"&keywords="+keywords; 
  36.  
  37.  $("#map_iframe").attr("src",url); 
  38.  
  39.  
  40. </script> 

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

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

hotels_map.php 部分,代码如下:

  1. <?php    
  2. $weidu = $_REQUEST['weidu']; 
  3.  
  4. $jingdu = $_REQUEST['jingdu']; 
  5.  
  6. $keywords = $_REQUEST['keywords']; 
  7.    
  8. if($keywords == '嘉利华酒店'){ 
  9.  
  10.  $suofang = 11; 
  11.  
  12. }else
  13.  
  14.  $suofang = 14; 
  15.  
  16.  
  17.  
  18.  
  19.  
  20. $str = '<html> 
  21.  
  22.  <head> 
  23.  
  24.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  25.  
  26.  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
  27.  
  28.  <style type="text/css"
  29.  
  30.  body,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} 
  31.  
  32.  </style> 
  33.  
  34.  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙(很简单就可以申请到)"></script> 
  35.  
  36.  <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> 
  37.  
  38.  <title>根据中心点关键字周边搜索</title> 
  39.  
  40.  </head> 
  41.  
  42.  <body> 
  43.  
  44.  <div id="allmap"></div> 
  45.  
  46.  </body> 
  47.  
  48.  </html> 
  49.  
  50.  <script type="text/javascript">      
  51.  
  52. //谷歌坐标转化为百度坐标 
  53.  
  54. var xx = '.$jingdu.'
  55.  
  56. var yy = '.$weidu.'
  57.  
  58. var ggPoint = new BMap.Point(xx,yy); 
  59.  
  60.  
  61.  
  62.  
  63. //坐标转换完之后的回调函数 
  64.  
  65. translateCallback = function (point){ 
  66.  
  67.     //alert(point.lng + "," + point.lat); 
  68.  
  69.  var map = new BMap.Map("allmap");            // 创建Map实例 
  70.  
  71.  map.centerAndZoom(new BMap.Point(point.lng, point.lat), '.$suofang.');//初始化时,即可设置中心点和地图缩放级别。 
  72.  
  73.  var local = new BMap.LocalSearch(map, { 
  74.  
  75.   renderOptions:{map: map, autoViewport:true} 
  76.  
  77.  }); 
  78.  
  79.  map.addControl(new BMap.ScaleControl()); 
  80.  
  81.  map.enableScrollWheelZoom(true); 
  82.  
  83.  map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件 
  84.  
  85.  var point = new BMap.Point((point.lng), (point.lat)); 
  86.  
  87.  map.centerAndZoom(point, '.$suofang.'); 
  88.  
  89.  var marker = new BMap.Marker(point);  // 创建标注 
  90.  
  91.  map.addOverlay(marker);              // 将标注添加到地图中 
  92.  
  93.  marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 
  94. //开源软件:phpfensi.com 
  95.  //可视范围搜索 
  96.  
  97.  var local = new BMap.LocalSearch(map, { 
  98.  
  99.   renderOptions:{map: map} 
  100.  
  101.  }); 
  102.  
  103.  local.searchInBounds("'.$keywords.'", map.getBounds());   
  104.  
  105. setTimeout(function(){ 
  106.     BMap.Convertor.translate(ggPoint,2,translateCallback);     //GCJ-02坐标转成百度坐标 
  107.  
  108. }, 300); 
  109. </script>'; 
  110. echo $str
  111. ?>

Tags: 标记 实例 周边

分享到:

相关文章