php,javscript调用百地图度API实现标记
来源:互联网 发布:mac秋冬色号推荐 编辑:程序博客网 时间:2024/06/03 21:32
完成的功能:
1.根据提供的地址在地图上定位
2.创建了多边形区域,该区域可以灵活的标记,例如关于一些配送范围,就可以通过标记来完成。
要实现以上效果需要以下步骤:
1.先申请百度地图API的访问的 key(ak) ,可以通过这个地址来申请:http://lbsyun.baidu.com/apiconsole/key?application=key
在申请key的时候你需要确定的是你的这个key的应用类型是什么,server or mobile ... 可以参考下图:
2.在你的工程中直接引入百度V1.3的接口文件
<scriptsrc="http://api.map.baidu.com/api?v=1.3&ak=you key" type="text/javascript"></script>
其中如果你引入的版本低于1.3,那么这块需要将ak换成key就好了,you key就是申请的key ,在这里我的key的应用类型是for browser的。
3.javascript 代码部分
var map =new BMap.Map("container");
var mypoint =new BMap.Point(116.404, 39.915); //创建点坐标
map.centerAndZoom(mypoint,15);// 初始化地图,设置中心点坐标和地图级别
// map.setMapType(BMAP_SATELLITE_MAP);设置地图类型
var marker =new BMap.Marker( mypoint );
map.addOverlay( marker );
marker.addEventListener("click", function(){
var infoWin = new BMap.InfoWindow("your show information");//定义显示信息
this.openInfoWindow(infoWin);
});
var x1 = mypoint.lat+0.002;
var x2 = mypoint.lat- 0.002;
var y1 = mypoint.lng + 0.002;
var y2 = mypoint.lng - 0.002;
var secRing = [
new BMap.Point(y1, x1), //经度 纬度
new BMap.Point(y1, x2),
new BMap.Point(y2, x2),
new BMap.Point(y2, x1)
];
//创建多边形
var secRingPolygon =new BMap.Polygon(
secRing,
{
strokeColor:"#f50704",
fillColor:"#FF0000",
strokeWeight:2,
fillOpacity:0,
strokeOpacity:0.8
}
);
map.addOverlay(secRingPolygon);
map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用 //创建Map实例
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl({ isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角,打开
其中 secRing 部分是构造矩形区域的代码,该矩形区域是由API中提供的 Polygon 来实现的。以上代码的效果是该多边形区域是不可以自由标记的。所以需要在把secRingPolygon加到map之前,需要用以下代码来允许该多边形区域可编辑。
secRingPolygon.enableEditing();
以上的代码就可以实现效果图。但是如果需要把多边形每次编辑的坐标记录下来,或者是记录编辑区域的运动轨迹,那么就需要secRingPolygon添加一个事件(mouseout),然后通过getPath这个函数来获取编辑后的轨迹。如果有业务的需求,你可以把该轨迹存储到数据库中,当下次加载的时候,你可以直接把该轨迹估值给secRing这个数组,这样你的标记就可以在地图上显示。
//添加事件
secRingPolygon.addEventListener("mouseout",function(){
var pathObj = secRingPolygon.getPath();
var htmlStr = "";
for(var iin pathObj){
var position = pathObj[i];
htmlStr += position.lng +","+position.lat+ "<br>";
}
document.getElementById('info').innerHTML = htmlStr
});
这块直接把运动后的轨迹输出到页面。
还有就是如果通过一个给定的地址来在地图上标记出来,目前采用的是通过PHP提供的curl接口,调用geocoder的v2 api 来得到改地址的经纬度。
可以参考:http://developer.baidu.com/map/webservice-geocoding.htm
该接口返回的参数格式可以选择json或者是其它的。json格式返回结果的如下:
//不带回调函数的返回值{
status: 0,
result:
{
location:
{
lng: 116.30814954222,
lat: 40.056885091681
},
precise: 1,
confidence: 80,
level: "商务大厦"
}
}
PHP代码如下:
$address =urlencode($addr);
$url = "http://api.map.baidu.com/geocoder/v2/?address=$address&output=json&ak=your key";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
curl_close($ch);
$result = json_decode($response,true);
$lat =$result["result"]["location"]["lat"];
$lng =$result["result"]["location"]["lng"];
其中你的 addr就是地址,需要用urlencode进行转义。
这样你就可以获取到当前地址的经度和纬度信息,然后输出到前端,再调用 new BMap.Point(lat,lng);来进行渲染。
这块你可以对baidu map API再次封装,供项目中其它的地方使用。地图API的功能远不止这些,还有很多用法可以直接参考百度map API 的手册。
还有更多的demo可以参考:http://developer.baidu.com/map/jsdemo.htm
好了!!!!
- php,javscript调用百地图度API实现标记
- php,调用百地图度API实现标记
- 调用百度地图api实现标记城市
- PHP调用百度地图API
- 使用百度地图API实现地图生成、标记以及标注
- 调用地图导航 api实现
- js调用百度地图api实现定位
- Android 实现百度地图API调用
- PHP+Mysql实现百度地图API打点
- 调用谷歌地图api接口实现地图显示
- js调用百度地图API,实现地图标注位置
- php实现调用百度地图功能
- php实现调用百度地图功能
- javscript 父子页面调用
- 调用google地图api
- 百度地图api调用
- JAVA 调用地图API
- 调用地图api接口
- mysql 与 JDBC
- HashMap原理,以及HashMap的非线程安全
- 绘图和可视化 《利用Python进行数据分析》第8章 读书笔记
- ES6 变量解构赋值的用途
- 5.13 JLL实习经历--总结--不断更新ing
- php,javscript调用百地图度API实现标记
- jQuery扩展插件——$.extend(obj)与$.fn.extend(obj)
- TortoiseGit--小乌龟git项目中的使用简介
- Linux 用户操作-解锁
- redhat7挂载新硬盘
- 禁止微信浏览器下拉回弹的效果。
- 关于二维数组分配(c/c++)
- Mac安装HomeBrew
- 添加native和java系统服务