<div class="store_list">
<ul>
<volist name="zone_list" id="row">
<li data-lng="{$row.lng}" data-lat="{$row.lat}">
<a class="deg360-link border-b" <if condition="$row.panoramic_link neq ''">href="{:U('zone/panorama', ['zone_id' => $row['id']])}"<else/>href="javascript:;"</if>>
<img class="img-store l" src="{$row.img}" alt="" οnerrοr="this.src='__PUBLIC__/images/common/no_img.png';this.οnerrοr=null" />
<div class="store-main pr">
<p class="store-main-name">{$row.name}</p>
<p class="distance">0KM</p>
</div>
<p class="c"></p>
</a>
<p class="store-list-b pr clear">
<a class="store-map arrow2" href="#">{$row.address}</a>
</p>
</li>
</volist>
</ul>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak={:C('BAIDU_MAP_AK')}"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<script type="text/javascript">
$(function () {
var internet = 'http://api.map.baidu.com/direction?origin=latlng:' ; //pc
var ua = navigator.userAgent.toLowerCase();
var is_app = 0;
//平台、设备和操作系统
var system ={
win : false,
mac : false,
xll : false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
if(system.win || system.mac || system.xll || ua.match(/MicroMessenger/i) == "micromessenger"){
internet = 'http://api.map.baidu.com/direction?origin=latlng:';
}else{
if (/iphone|ipad|ipod/.test(ua)) {
//alert("ios");
internet = 'baidumap://map/direction?origin=' ; //IOS
is_app = 1;
} else if (/android/.test(ua)) {
//alert("android");
internet = 'intent://map/direction?origin=' ; //android
is_app = 1;
}
}
//浏览器定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var my = new BMap.Point(r.point.lng,r.point.lat);
if (is_app) {
$('.store-map').each(function () {
var $this = $(this) ;
var endLat = $(this).parents('li').attr('data-lat');
var endLng = $(this).parents('li').attr('data-lng');
var navHref = internet+r.point.lat+","+r.point.lng+"&destination="+endLat+","+ endLng+"&mode=driving®ion=北京&src=yourCompanyName|yourAppName";
$this.attr('href',navHref);
});
} else {
$('.store-map').each(function () {
var $this = $(this) ;
var endLat = $(this).parents('li').attr('data-lat');
var endLng = $(this).parents('li').attr('data-lng');
var navHref = internet + r.point.lat + "," + r.point.lng + "|name:我的位置&destination=" + endLat + "," + endLng + "&mode=driving®ion={$city_name}&output=html&src=yourCompanyName|yourAppName";
$this.attr('href',navHref);
})
}
function drivingRoute(start, end, callback) {
var transit = new BMap.DrivingRoute('武汉市', {
onSearchComplete: function (results) {
if (transit.getStatus() != BMAP_STATUS_SUCCESS){
return ;
}
callback(results.getPlan(0))
}
});
transit.search(start, end);
}
//
$('.store_list li .distance').each(function(index, dom) {
var $this = $(dom);
var lng = $(this).parents('li').attr('data-lng');
var lat = $(this).parents('li').attr('data-lat');
(function($distance){
var point2 = new BMap.Point( lng , lat );
var route = drivingRoute(my, point2, function(plan) {
$distance.html('距离您' + plan.getDistance(true))
});
})($this)
})
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true});
});
</script>
点击到这去，调用导航
<div class="content pr">
<div id="allmap"></div>
<div class="foot-lab">
<p class="foot-lab-t icon-navi">武汉市融创智谷</p>
<div class="calculation c">
<p class="foot-lab-l l">距离您<span id="distance"></span>,预计<span id="countdown"></span></p>
<a class="map-nav r" id="map_nav" href="">导航</a>
</div>
</div>
<input type="hidden" id="store_local" data-lng="<?php echo $lng; ?>" data-lat="<?php echo $lat; ?>"/>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<?php echo Yii::app()->params['BAIDU_MAP_AK']; ?>"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<script>
$(function () {
var scHeight = document.documentElement.clientHeight ;
$('#allmap,.content').height(scHeight-45);
})
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point('<?php echo $lng; ?>', '<?php echo $lat; ?>');//目的地1
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
//浏览器定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
//alert('您的位置：'+r.point.lng+','+r.point.lat);
var my = new BMap.Point(r.point.lng,r.point.lat);
var navHref = "http://api.map.baidu.com/direction?origin=latlng:" + r.point.lat + "," + r.point.lng + "|name:我的位置&destination=<?php echo $lat; ?>,<?php echo $lng; ?>&mode=driving®ion=武汉&output=html&src=yourCompanyName|yourAppName";
$('#map_nav').attr('href',navHref);
//获取距离时间
var searchComplete = function (results){
if (transit.getStatus() != BMAP_STATUS_SUCCESS){
return ;
}
var plan = results.getPlan(0); //获取第一条方案
var time = plan.getDuration(true) + "\n"; //获取时间
var distance = plan.getDistance(true) + "\n"; //获取距离
$('#distance').html(distance);
$('#countdown').html(time);
}
var transit = new BMap.DrivingRoute(map, {renderOptions: {map: map},
onSearchComplete: searchComplete
});
transit.search(my, point);
map.removeOverlay(marker);
//setInterval(line,5000)
//打开路况
var traffic = new BMap.TrafficLayer();
map.addTileLayer(traffic);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true});
</script>