百度API使用--javascript api进行多点定位
2024-10-12 08:01:39
使用百度地图提供的javascript api,给定多点的经纬度坐标,在百度地图上
显示这些坐标点。
其中包括各个点自适应地图显示,自定义坐标点的图标,以及各个点之间添加折线。
实现的效果如下图:
具体步骤如下:
1.页面引用百度地图api脚本
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
其中ak为你申请的百度api密钥。申请ak地址: http://lbsyun.baidu.com/apiconsole/key?application=key
2.根据各个点自适应显示地图:
//根据各个点自适应显示地图
var points = [{"lat":32.320054,"lng":120.620204},{"lat":32.320054,"lng":120.635204},{"lat":32.330054,"lng":120.630204}];
var map = new BMap.Map("allmap");
var view = map.getViewport(points);
var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint, mapZoom);
map.enableScrollWheelZoom(true);
3.添加多个坐标点、自定义坐标点的图标:
//添加多个点
for (var i = 0; i < points.length; i++) {
var item = points[i];
var p = new BMap.Point(item.lng, item.lat);
//自定义点图标
var iconUrl = "point.jpg";
var myIcon = new BMap.Icon(iconUrl, new BMap.Size(40, 80));
var marker = new BMap.Marker(p, { icon: myIcon });
map.addOverlay(marker);
}
4.添加坐标点之间的折线:
//添加折线
var pointArray = new Array();
pointArray[0]= new BMap.Point(120.620204,32.320054);
pointArray[1]= new BMap.Point(120.635204,32.320054);
pointArray[2]= new BMap.Point(120.630204,32.330054);
var polyline = new BMap.Polyline(pointArray, { strokeColor: "#5298FF", strokeWeight: 6, strokeOpacity: 1.0 });
map.addOverlay(polyline);
总体代码:
<script type="text/javascript">
window.onload = function () {
var pointArray = new Array();
var points = [{"lat":32.320054,"lng":120.620204},{"lat":32.320054,"lng":120.635204},{"lat":32.330054,"lng":120.630204}];
//根据各个点自适应显示地图
var map = new BMap.Map("allmap");
var view = map.getViewport(points);
var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint, mapZoom);
map.enableScrollWheelZoom(true);
//添加多个点
for (var i = 0; i < points.length; i++) {
var item = points[i];
var p = new BMap.Point(item.lng, item.lat);
pointArray[i] = p;
//自定义点图标
var iconUrl = "point.jpg";
var myIcon = new BMap.Icon(iconUrl, new BMap.Size(40, 80));
var marker = new BMap.Marker(p, { icon: myIcon });
map.addOverlay(marker);
}
//添加折线
var polyline = new BMap.Polyline(pointArray, { strokeColor: "#5298FF", strokeWeight: 6, strokeOpacity: 1.0 });
map.addOverlay(polyline);
};
</script>
百度地图JavaScript Api开发平台链接: http://lbsyun.baidu.com/index.php?title=jspopular
最新文章
- 使用github之前的技能准备
- UEditor手动调节其宽度
- MFC使用ShowWindow(SW_MAXIMIZE)任务栏消失的处理
- 给JavaScript初学者的24条最佳实践(转:http://www.cnblogs.com/yanhaijing/p/3465237.html)
- 【转】JVM 基础知识
- VS2008LINK : fatal error LNK1000: Internal error during IncrBuildImage
- 驱动: oops
- docker 17 安装
- CF922 CodeForces Round #461(Div.2)
- 关于tomcat中Servlet对象池
- Linux NFS服务器的安装与配置方法(图文详解)
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->;新增模块管理界面导出功能(可按条件导出)
- graph slam BACK END 相关技术资料收集
- 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)
- Django高级
- MyBatis 对数据库进行CRUD操作
- shell脚本监控Linux系统的登录情况
- NET(C#)连接各类数据库-集锦
- 倒计数锁存器(CountDown Latch)和 CyclicBarrier(同步屏障)
- day9 类、对象、包
热门文章
- day17算法
- spring-实现配置文件读取
- 极值问题(acms)
- MapReduce 2简介
- JQuery AJAX 解析获得的JSON数据
- CoreException: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-compiler-plugin:3.1 or one of its dependencies could not be resolved
- Oracle数据库的后备和恢复————关于检查点的一些知识
- API接口验证
- Linux6(5)安装Oracle Rac11g
- SG函数闲扯(转)