1、导航的控制器
public function daohang(){
//根据传过来的门店id获取门店的地理位置 $shopInfo = M('shop')->where(array('shop_id' => $_GET['shop_id']))->find(); header('Access-Control-Allow-Origin:*'); $str = $shopInfo['shop_position'];
//正则表达式匹配门店所属城市 $reg = '/省(.+)市/U'; preg_match_all($reg, $str, $result); $shopInfo['shop_position'] = $result[1][0]."市"; $this->assign('shopInfo', $shopInfo); $this->display(); }
2、门店导航的html页面（也就是百度地图提供的页面）
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>居元素门店导航</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己在百度地图申请的"></script> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!--调用jQuery--> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript">
//获取门店的经纬度 var shop_jing = {$shopInfo['shop_jing']}; var shop_wei = {$shopInfo['shop_wei']};
//获取门店的位置信息 var shop_position = "{$shopInfo['shop_position']}"; var map = new BMap.Map("allmap"); var point = new BMap.Point(shop_jing,shop_wei); map.centerAndZoom(point, 16); map.enableScrollWheelZoom(); var myIcon = new BMap.Icon("myicon.png",new BMap.Size(30,30),{ anchor: new BMap.Size(10,10) }); var marker=new BMap.Marker(point,{icon: myIcon}); map.addOverlay(marker); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); //map.panTo(r.point);//地图中心点移到当前位置 var latCurrent = r.point.lat; var lngCurrent = r.point.lng; //alert('我的位置：'+ latCurrent + ',' + lngCurrent);
//重要的导航的跳转(origin后面跟的是当前的位置，destination是目标位置，region是目标所在城市不填默认在同一城市，output是输出的格式，mode是一种交通方式) location.href="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination="+shop_wei+","+shop_jing+"&mode=driving®ion="+shop_position+"&output=html"; } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true}) </script>
