百度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

时间: 06-26

百度API使用--javascript api进行多点定位的相关文章

制作百度地图离线JavaScript API加载本地瓦片地图

1.首先获取百度 JavaScript API 首先用浏览器打开 http://api.map.baidu.com/api?v=1.3 如下图所示 其中 http://api.map.baidu.com/getscript?v=1.3&key=&services=&t=20121108061854 这个链接就是我们要找的API文件, 同样在浏览器中打开它,并另存为诸如“apiv1.3.min.js” 还有百度地图必须的一些控件,光标,logo之类的图片也下载下来 2.修改“apiv

出色的 JavaScript API 设计秘诀

设计是一个很普遍的概念,一般是可以理解为为即将做的某件事先形成一个计划或框架. (牛津英语词典)中,设计是一种将艺术,体系,硬件或者更多的东西编织到一块的主线.软件设计,特别是作为软件设计的次类的API设计,也是一样的.但是API设计常常很少关注软件发展,因为为其他程序员写代码的重要性要次于应用UI设计和最终用户体验. 但是API设计,作为我们自己写的库中提供的公共接口,能够向调用我们代码的开发者表现出我们库的一些特点和功能,所以API设计和UI设计一样重要.事实上,两者都是为应用可以提供更好的

百度地图 JavaScript API极速版 开发体会

前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发者细分成普通web开发者和移动web开发者.正好用到了手机地图这块决定尝试一下.先看一下百度地图官方对它的定义.     本套百度地图API是专为手机浏览器提供的API,您可使用该套API,在手机页面中展示地图.标注位置.检索poi.查询线路等. 特点: 较同时兼容PC和手机浏览器的JavaScript API大众版而言,该版更适配移动设备,体积更小,加载地图速度更快,更省流

wex5 实战 百度地图JavaScript API 集成

wex5里提供了一个bMap组件来调用百度地图,在百度地图api里,有许多版本的api供开发者调用.在wex5开发里,JavaScript API 集成,经过测试,成功.今天从0开始一步一步操作,将来会制作更复杂的地图与定位效果,大家共同学习,共同进步. 一 演示效果: 二 设计思路: 用html页面,装入百度地图,再将html页面放入iframe页中. 三 代码实现: 1  申请百度会员,并申请百度api ak(开发者密钥) 所有的第三方集成都需要密钥,相当于为当前的用户请求分配的一个id,服

Delphi XE6 通过JavaScript API调用百度地图

参考昨天的内容,有朋友还是问如何调用百度地图,也是,谁让咱都在国内呢,没办法,你懂的. 首先去申请个Key,然后看一下百度JavaScript的第一个例子:http://developer.baidu.com/map/jsdemo.htm 下一步,就是把例子中的代码,移动TWebBrower中. unit Unit3; interface uses  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Var

百度地图JavaScript API覆盖物旋转时出现偏移

在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节的错: <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(121.38750613, 31.17

百度地图JavaScript API使用

最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以想着地图应该是相似的,百度地图可能也能实现这样的功能,于是就开始了百度地图JavaScript API使用的学习探究了. 简单介绍:百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用,包含了构建地图基本功能的各

百度地图javascript API的使用

最近做自己的网站,调用百度地图的js API,在页面上显示一些坐标点.遇到一个问题,就是当坐标点超过10个时,convertor.translate(tempPointArr, 1, 5, translateCallback)执行完后,在translateCallback中数据的状态不是0,应该就是GPS经纬度转换没有完成,导致坐标点不会被添加到地图上显示.不知道原因所在,看API文档应该能找到答案,无奈装的艾普宽带,现在百度地图的js API网页打不开.把坐标转换分成10个一组来做,可以解决这

ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View,加载layers,使用弹出窗口,视觉化,与使用窗口小部件.(wtf居然没有分析你想搞事情啊web除了展示难道不应该有()&&*--@) [Mapping and Views] (点击进入我写的章节详细介绍) 最基础的,知道地图和视图的区别,能使用2D和3D地图,对地图的布局有一定的了解,对地图