php 开发百度聚合,php利用百度javascript API实现导航

/**

* 导航去门店

*/

public function dpdh(){

// $userid = $this->init();

if ($_GET['id']) {

$where['id']=$_GET['id'];

$address=M("mw_store")->where($where)->find();

$lng=$address['dinateh'];

$lat=$address['dinatew'];

// $this->address=$address;

$this->assign('lng', $lng);

$this->assign('lat', $lat);

}

$this->display("./Application/App/View/default/Shop/shop_dpdh.html");

}

1. 如图先建立一个控制器

再建立一个数据库 数据库字段 店铺id  店铺经纬度

body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}

#allmap{height:300px;width:100%;}

#r-result,#r-result table{width:100%;}

导航去店铺

// 百度地图API功能

var map = new BMap.Map("allmap");

// var point = new BMap.Point(113.640395,34.754393);

// map.centerAndZoom(point,17);

map.centerAndZoom(new BMap.Point(113.640395,34.754393), 17);

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);

// alert('您的位置:'+r.point.lng+','+r.point.lat);

var geoc = new BMap.Geocoder();

var p1 = new BMap.Point(r.point.lng,r.point.lat);

var p2 = new BMap.Point({$lng},{$lat});

var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map,panel: "r-result",autoViewport: true}});

driving.search(p1, p2);

// var pt = r.point;

// geoc.getLocation(pt, function(rs){

// var addComp = rs.addressComponents;

// var aaa = "'"+addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber+"'";

// alert(aaa);

// var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});

// driving.search(aaa, "{$address}");

// });

}

else {

alert('failed'+this.getStatus());

}

},{enableHighAccuracy: true})

//关于状态码

//BMAP_STATUS_SUCCESS检索成功。对应数值“0”。

//BMAP_STATUS_CITY_LIST城市列表。对应数值“1”。

//BMAP_STATUS_UNKNOWN_LOCATION位置结果未知。对应数值“2”。

//BMAP_STATUS_UNKNOWN_ROUTE导航结果未知。对应数值“3”。

//BMAP_STATUS_INVALID_KEY非法密钥。对应数值“4”。

//BMAP_STATUS_INVALID_REQUEST非法请求。对应数值“5”。

//BMAP_STATUS_PERMISSION_DENIED没有权限。对应数值“6”。(自 1.1 新增)

//BMAP_STATUS_SERVICE_UNAVAILABLE服务不可用。对应数值“7”。(自 1.1 新增)

//BMAP_STATUS_TIMEOUT超时。对应数值“8”。(自 1.1 新增)

2. 页面上引入百度的api即可

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度地图JavaScript API GL提供了一个MarkerClusterer类,可以用于点聚合,具体步骤如下: 1.引入MarkerClusterer库文件 在HTML文件的head标签中添加如下代码: ```html <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> ``` 2.创建MarkerClusterer对象 ```javascript var markerClusterer = new BMapLib.MarkerClusterer(map, options); ``` 其中,map是百度地图实例,options为MarkerClusterer的配置项,包括以下属性: - markers:要进行聚合的标记数组 - girdSize:聚合计算时网格的像素大小,默认60 - maxZoom:最大的聚合级别,大于该级别就不进行聚合操作,默认18 - minClusterSize:最小的聚合数量,小于该数量的点不进行聚合操作,默认2 - styles:自定义聚合后图标的样式数组 3.将标记添加到MarkerClusterer中 ```javascript markerClusterer.addMarkers(markers); ``` 其中,markers为标记数组。 完整示例代码: ```html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度地图JavaScript API GL点聚合示例</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> </head> <body> <div id="map" style="width:100%;height:500px;"></div> <script type="text/javascript"> // 初始化地图 var map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 创建标记数组 var markers = []; for (var i = 0; i < 100; i++) { var point = new BMap.Point(Math.random() * 0.1 + 116.3, Math.random() * 0.1 + 39.9); var marker = new BMap.Marker(point); markers.push(marker); } // 创建MarkerClusterer对象 var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers }); // 添加标记到MarkerClusterer中 markerClusterer.addMarkers(markers); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值