百度API使用--javascript api进行多点定位
使用百度地图提供的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
百度API使用--javascript api进行多点定位的更多相关文章
- 将百度坐标转换的javascript api官方示例改写成传统的回调函数形式
改写前: 百度地图中坐标转换的JavaScript API示例官方示例如下: var points = [new BMap.Point(116.3786889372559,39.90762965106 ...
- 制作百度地图离线JavaScript API加载本地瓦片地图
全面介绍,请看下列介绍地址,改写目前最新版本的百度V2.0地图,已全面实现离线操作,能到达在线功能的95%以上 http://api.jjszd.com:8081/apituiguang/gistg. ...
- aaronyang的百度地图API之LBS云与.NET开发 Javascript API 2.0【基本地图的操作】
为了更简单的演示,我们创建个.NET的ASP.NET MVC4项目 好了,上面都是后话,POI说白了,就是你的用户的数据,很多数据,不过没关系,因为你的数据如果存在百度的LBS云上,那么大数据你就不用 ...
- 高德地图 JavaScript API 开发系列教程(一)
高德地图 API 提供包括 Web API 即 JavaScript API,Android API,定位API,IOS API,WP API,Win8 API等,本系列教程主要针对高德 JavaSc ...
- 出色的 JavaScript API 设计秘诀
设计是一个很普遍的概念,一般是可以理解为为即将做的某件事先形成一个计划或框架. (牛津英语词典)中,设计是一种将艺术,体系,硬件或者更多的东西编织到一块的主线.软件设计,特别是作为软件设计的次类的AP ...
- ArcGIS API for javascript开发笔记(五)——GP服务调用之GP模型的发布及使用详解
感谢一路走来默默陪伴和支持的你~~~ ----------------欢迎来访,拒绝转载---------------- 关于GP模型的制作请点我! 一.GP发布 ArcGIS Desktop可以作为 ...
- 【百度地图JavaScript API】手机端浏览器定位的实现
[百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476
- 百度地图 Javascript API 笔记
因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...
- 百度地图JavaScript API获取用户当前经纬度和详细地理位置,反之通过详细地理位置获取当前经纬度
前言: 前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够 ...
随机推荐
- vb6 枚举对象属性
Option Explicit '引用Library TLI ' C:\WINDOWS\system32\TLBINF32.DLL ' TypeLib Information Private Sub ...
- JUQERY 获取同名称的所有CHECKBOX ,获取已经选择的,并且jquery进行勾选!
var @(Perfix)_CheckArray=[]; @(Perfix)_CheckArray.length=0; var checkedItems = $('input[name="@ ...
- CSS id 选择器
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...
- VSFTP服务器
vsftpd 是"very secure FTP daemon"的缩写,安全性是它的一个最大的特点.vsftpd 是一个 UNIX 类操作系统上运行的服务器的名字,它可以运行在诸如 ...
- 建立一个简单的SpringMVC程序
首先,所建立的程序是一个web程序,所以在web.xml文件中进行如下的配置: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
- ruby&mongo_mapper
mongo_mapper&ruby Mongomapper 用户mongo数据库配置,以及其提供了很多mongo的方法,可以很好地用来 对mongo相关封装和操作. 环境准备:gem inst ...
- KVM虚拟机管理
#定义新的存储池 virsh pool-define-as spool4lj dir - - - - "/home/lj/spool4lj" virsh pool-build sp ...
- C# Dictionary 的几种遍历方法
Dictionary<string, int> list = new Dictionary<string, int>(); list.Add("d", 1) ...
- Json操作(DynamicJson)
Json的简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了 ...
- window.open参数设置及如何全屏显示(转)
先来个列子: window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no ...