使用百度地图导航到门店

最新推荐文章于 2022-07-08 12:28:30 发布

若水无华

最新推荐文章于 2022-07-08 12:28:30 发布

阅读量1.1k

点赞数

分类专栏：百度地图

本文链接：https://blog.csdn.net/bj123467/article/details/72911288

版权

百度地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>
<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&region="+shop_position+"&output=html";
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
</script>