ecshop加入百度地图,支持周边标记实例
发布:smiling 来源: PHP粉丝网 添加日期:2014-12-06 10:54:23 浏览: 评论:0
百度地图是一个目前用到非常多的地图了,我们可以调用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>
这样就可以实现切换的效果,点击不同的选项卡,可以查看不同地图的内容.
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); //跳动的动画
- //开源软件:phpfensi.com
- //可视范围搜索
- 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;
- ?>
Tags: 标记 实例 周边
相关文章
- ·ecshop自动分成二次开发实例(2015-12-10)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)