为了卓越   成为卓越
联系热线:021-61132501     
JavaScript API V1.0.1
更新: 浏览: 1089

Javascript API 实现了在浏览器中以DOM对象加载展现地图,所有地图浏览和查询工作都以 Javascript 脚本语言实现。对于应用程序的二次开发,支持符合 Javascript 语言编写的应用程序接口的编程开发。它能够帮助您在基于 web 浏览器的项目中快速的构建地图应用。

API 创建了跟地图相关的符合 Javascript 框架的一系列对象和方法,不同对象用来实现不同的地图角色。Javascript API 是提供给那些具有一定 Javascript 和 html 编程经验和了解面向对象概念的开发者使用。此外,读者还应该对地图产品有一定的了解。您在使用中遇到任何问题,请及时联系我们。

该套API免费对外开放。您需先 申请密钥(key) 才可使用。

如果您想了解更多HTTP相关功能,请 点击这里

简介
更新: 浏览: 1089
JS API 介绍

Javascript API 用户开发使用手册,Javascript API 实现了在浏览器中以 DOM对象加载展现地图,所有地图浏览和查询工作都以 Javascript 脚本语言实现。对于应用程序的二次开发,支持符合 Javascript 语言编写的应用程序接口的编程开发。它能够帮助您在基于 web 浏览器的项目中快速的构建地图应用

基本地图功能:展示(支持2D图、卫星图)、平移、缩放、拖拽等。
地图控件展示功能:可以在地图上添加/删除鹰眼、工具条、比例尺。
覆盖物功能:支持在地图上添加/
删除点、线、面、用户自定义覆盖物等;聚合marker、自定义覆盖物等功能。
工具类功能:提供经纬度坐标与屏幕坐标互转功能;开源库里提供测距。
定位功能:支持IP定位及浏览器(支持html5特性浏览器)定位功能。
右键菜单功能:支持在地图上添加右键菜单。
鼠标交互功能:支持动态修改鼠标样式、鼠标拖拽/缩放地图及鼠标绘制等功能。
本地搜索功能:包括根据城市、矩形范围、圆形范围等条件进行搜索。
公交检索:支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;检索结果支持便捷、可换乘、少步行、不乘地铁四种方案。
驾车检索:支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;返回最短时间、最短距离、避开高速的驾车导航结果;且提供计算打车费用服务。
逆/地理编码:支持经纬度坐标转换为地址信息。

面向的读者

API是提供给那些具有一定JavaScript编程经验和了解面向对象概念的读者使用。此外,读者还应该对地图产品有一定的了解。 您在使用中遇到任何问题,都可以通过电话或者邮件反馈给我们。

申请API key

为了统一平台服务的配额管理,JavaScript API引入key机制。JavaScript API开始需要先 申请密钥(key),才可使用

获取方法

地图API是由JavaScript语言编写的,您在使用之前需要通过<script>标签将API引用到页面中:
使用方式:

  1. <script  type = "text/javascript"  src = "http://218.202.235.66:8087/api/map.js?key=您的密钥" >
  2. </script>
兼容性

浏览器:IE,Firefox,Chrome,Safari,sogou 浏览器,360 浏览器,Android 内置浏览器
操作系统:Windows、Mac、Linux
移动平台:iPhone、Android

技术支持途径

如果您在使用forbest jsAPI中遇到问题,请联系我们
客户咨询:021-61132501
市场邮箱:sales@forbst.com
技术支持:support@forbst.com

Hello World
更新: 浏览: 1089
JS API 介绍

forbest地图的“Hello, World”

开始学习forbest jsAPI最简单的方式是看一个简单的示例。以下代码创建了一个地图并以东方明珠作为地图的中心:

  1. <!DOCTYPE html>  
  2. <html>
  3. <head>
  4. <meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8" />
  5. <title> forbest Hello_Word </title>
  6. <script  type = "text/javascript"  src = "http://218.202.235.66:8087/api/map.js?key=您的密钥" >
  7. </script>
  8. <style  type = "text/css" >
  9. body, html, #allmap {width: 100%; height: 100%; overflow:hidden; margin:0;}
  10. </style>
  11. </head>
  12. <body>
  13. <div  id = "div_map" ></div>
  14. <script  type = "text/javascript" >
  15. var  map = null;
  16. map = new  STMapObj("div_map"); //创建地图
  17. var  point = new  STMapPoint(121.499712,31.239701);//创建点坐标
  18. map.locateMap(point,2);// 初始化
  19. map.setZoomCompVisible(true); //显示缩放控件
  20. map.setScaleCompVisible(true); // 显示比例尺控件
  21. </script>
  22. </body>
  23. </html>

下面我们分步向您介绍:

准备页面

根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明:

  1. <!DOCTYPE html>  

接着我们设置样式,使地图充满整个浏览器窗口:

  1. <style  type = "text/css" >
  2. body, html, #allmap {width: 100%; height: 100%; overflow:hidden; margin:0;}

引用forbest API文件

引用方式:

  1. <script  type = "text/javascript"  src = "http://218.202.235.66:8087/api/map.js?key=您的密钥" >
  2. </script>

创建地图容器元素

地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素。

创建地图实例

  1. var  map = null;
  2. map = new  STMapObj("div_map"); //创建地图

位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。 注意在调用此构造函数时应确保容器元素已经添加到地图上。

创建点坐标

  1. var  point = new  STMapPoint(121.499712,31.239701);//创建点坐标

这里我们使用STMapPoint类来创建一个坐标点。Point类描述了一个地理坐标点,其中121.499712表示经度,31.239701表示纬度。

地图初始化

  1. map.locateMap(point,2);

在创建地图实例后,我们需要对其进行初始化,map.locateMap()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。

地图配置与操作

地图被实例化并完成初始化以后,就可以与其进行交互了。API中的地图对象支持鼠标拖拽、滚轮缩放、双击放大等交互功能。 此外,您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如:setCenter()、setZoom()、pan()等等。 下面示例显示一个地图,等待两秒钟后,setCenter()方法将让地图的级别设置为10

  1. var  map = null;
  2. map = new  STMapObj("div_map"); //创建地图
  3. map.locateMap(new STMapPoint(121.43745399,31.211535),8);
  4. setTimeout(function(){
  5. map.setZoom(10); //放到到10级
  6. }, 2000);
  7. map.setZoomCompVisible(true);
  8. map.setScaleCompVisible(true);
覆盖物
更新: 浏览: 1089
地图覆盖物概述

所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆) 、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。
地图API提供了如下几种覆盖物:
Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法。
STMapMarker:标注表示地图上的点,可自定义标注的图标。
STMapLabel:表示地图上的文本标注,您可以自定义标注的文本内容。
STMapPolyline:由多个点组成的多边形图形,通过设置是否填充,可以生成线或者面。
STMapOval: 表示地图上的圆。
STMapArc: 由一个圆形(或椭圆形)图形和起止角度决定的一个弧线或填充的面、或者扇区。
STMapCustomOverObj:定义一个完全自定义 html 内容的覆盖物。
可以使用map.addOverlay方法向地图添加覆盖物,使用map.deleteOverlayById方法移除覆盖物。

标注

标注表示地图上的点,您可以通过img类来指定自定义图标。Marker的构造函数的参数为Point。注意:当您使用自定义图标时,标注的地理坐标点将位于标注所用图标的中心位置,您可通过anchor属性修改标定位置。 下面的示例向地图中心点添加了一个标注

  1. var  map = null;
  2. map = new  STMapObj("div_map"); //创建地图
  3. map.locateMap(new STMapPoint(121.476324,31.22717),3);
  4. LocationPoint();
  5. function LocationPoint(){
  6. var  poly = new  STMapMarker();
  7. poly.id = "testline6" ;  //【必选】对象 id
  8. poly.point = new ;  STMapPoint(121.47727877909848,31.227720161691113);   //【必选】经纬度坐标 STMapPoint 类型
  9. poly.img = "../img/carAPI.png ;  //【必选】对象的图片地址 url  
  10. poly.label = "" ;  //【可选】鼠标提示  
  11. poly.size = "" ;  //【可选】图片长宽 参数为 STMapSize 类型,默认为图片本身尺寸  
  12. poly.anchor = "TR" ;  // 【可选】定位锚点,BC (下边中心点)BL (左下角)BR (右下角)TL (左上角)TC (上边中心点)TR (右上角)ML (左边中心点)MR (右边中心点)CENTER (图片中心点)  
  13. poly.infowin = true ;  //【可选】是否点击显示信息窗口,默认为 true。  
  14. poly.title = "" ;  //属性信息库标题,支持 html 代码  
  15. poly.content = "我是的添加的图片" ;  //属性信息库标题,支持 html 代码  
  16. poly.moveable = false ;  //是否可以拖动  
  17. map.addOverlay(poly);
  18. }

下面我们分步向您介绍:

可托拽的标注

marker的setMoveable方法的参数true和false来开启和关闭标注的拖拽功能。默认情况下标注不支持拖拽,您需要调用setMoveable(false)方法来开启拖拽功能。

  1. //map.getOverlayById("zidingyi").setMoveable(true);  
  2. var poly = new STMapCustomOverObj();
  3. poly.id = "zidingyi2" ;
  4. poly.point = new STMapPoint(121.43745399,31.211535);
  5. poly.html = " <div style=" width: 100px;height:100px;background:blue" > 我是自定义覆盖物 <br><br><br>
  6. <input type = "text" size = "1" </div>
  7. poly.anchor = new STMapPoint(50,100);
  8. poly.size = new STMapSize(100,100);
  9. poly.infowin = false ;
  10. map.addOverlay(poly,false)
  11. map.getOverlayById("zidingyi2").setMoveable(true);
信息窗口

信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开,也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。 您可以使用InfoWindow来创建一个信息窗实例,注意同一时刻地图上只能有一个信息窗口处于打开状态。

  1. var  map = null;
  2. map = new  STMapObj("div_map"); //创建地图
  3. map.locateMap(new STMapPoint(121.476324,31.22717),3);
  4. LocationPoint();
  5. function LocationPoint(){
  6. var  poly = new  STMapOval();
  7. poly.id = new  "testline3"; //【必选】对象 id
  8. poly.center = new  STMapPoint(121.477547,31.227133); //【必选】圆或椭圆的中心点,STMapPoint 类型
  9. poly.content = "这里是上海音乐厅"  //【可选】属性信息框内容,支持 html 代码
  10. map.addOverlay(poly);
  11. map.getOverlayById("testline3").showInfoWin(true); //显示信息窗口
  12. }
多边形(面)

STMapPolyline表示地图上多边形覆盖物。它包含一组点,可以生成线或者面

添加 多边形(面)

由多个点组成的多边形图形,通过设置是否填充,可以生成线或者面
以下代码段会在三点之间创建红色三角形:

  1. var  map = null;
  2. map = new  STMapObj("div_map"); //创建地图
  3. map.locateMap(new STMapPoint(121.476324,31.22717),3);
  4. map.setZoomCompVisible(true);//缩放控件
  5. map.setScaleCompVisible(true);//比例尺控件
  6. LocationPoint();
  7. function LocationPoint(){
  8. var  poly = new  STMapPolyline();
  9. poly.id = new  "testline2"; //【必选】对象 id
  10. poly.points = "121.474435,31.228436;121.475058,31.225133;121.480229,31.227628;121.474435,31.228436"  ; //【】经纬度坐标串: x1,y1;x2,y2;x3,y3 121.4798,31.225335
  11. poly.strokeColor = "#FF0000" ; //【可选】线的颜色
  12. poly.strokeWeight = "1" ; //【可选】宽度
  13. poly.strokeOpacity = "1.0" ; //【可选】透明度
  14. poly.dashStyle = "Solid" ; //【可选】线形
  15. poly.filled = "flase" ; //【可选】是否填充
  16. poly.fillColor = "red" ; //【可选】填充颜色
  17. poly.fillOpacity = "0.1" ; //【可选】填充透明度
  18. poly.autoClose = "flase" ; //【可选】是否自动闭合
  19. poly.infowin = "true" ; //【可选】是否点击显示信息窗口,默认为 true。
  20. poly.tooltip = "" ; //【可选】鼠标提示。
  21. poly.title = "多边形" ; //属性信息库标题,支持 html 代码
  22. poly.content = "多边形" ; //属性信息框内容,支持 html 代码
  23. map.addOverlay(poly);
  24. }

移除覆盖物

当调用map.deleteOverlayById(),API会移除对应的覆盖物。

事件
更新: 浏览: 558
地图事件概述

浏览器中的JavaScript是“事件驱动的”,这表示JavaScript通过生成事件来响应交互。例如,在浏览器中,用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器,并在接收这些事件时执行代码。

事件监听

forbest API通过addEventListner方法来监听对象事件。在特定环境下click、dblclick、onmousedown、onmousemove等事件会被触发,同时监听函数会得到相应的事件参数,比如当用户点击地图时,x,y参数会包含鼠标所对应的地理位置point。 addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。在下面示例中,每当用户点击地图时,会弹出一个警告框。

  1. var  map = null;
  2. map = new 
  3. map.locateMap(new STMapPoint(121.43745399,31.211535),2);
  4. map.setZoomCompVisible(true);
  5. map.setScaleCompVisible(true);
  6. map.addEventListner("click",clickfun);
  7. //回调函数
  8. function clickfun(obj,x,y)
  9. {
  10. alert("您点击了地图");
  11. }

通过监听事件还可以捕获事件触发后的状态。下面示例显示用户拖动地图后地图中心的经纬度信息。

  1. var  map = null;
  2. map = new 
  3. map.locateMap(new STMapPoint(121.43745399,31.211535),7);
  4. map.setZoomCompVisible(true);
  5. map.setScaleCompVisible(true);
  6. //添加地图刷新事件
  7. map.addMapEventListner("refresh",maprefresh);
  8. //地图刷新事件回调函数
  9. function maprefresh(){
  10. alert(" 当前地图状态 : 级 别 : "+map.getZoom()+", 中心点:"+map.getCenter().x+","+map.getCenter().y)
  11. }
事件参数

在标准的DOM事件模型中(DOM Level 2 Events),监听函数会得到一个事件对象obj,x,y。x,y为经纬度坐标 例如,通过参数e得到点击的经纬度坐标。

  1. var  map = null;
  2. map = new  STMapObj("div_map"); //创建地图
  3. map.locateMap(new STMapPoint(121.43745399,31.211535),2);
  4. map.setZoomCompVisible(true);
  5. map.setScaleCompVisible(true);
  6. map.addEventListner("click",clickfun);
  7. //回调函数
  8. function clickfun(obj,x,y)
  9. {
  10. var var = map screen2LonLat(new STMapPoint(x,y));
  11. alert(point.x+","+point.y);
  12. }
移除监听事件

当您不再希望监听事件时,可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。 下面示例中,用户第一次点击地图会触发事件监听函数,在函数内部对事件监听进行了移除,因此后续的点击操作则不会触发监听函数。

  1. var  map = null;
  2. map = new  STMapObj("div_map"); //创建地图
  3. map.locateMap(new STMapPoint(121.43745399,31.211535),7);
  4. map.setZoomCompVisible(true);
  5. map.setScaleCompVisible(true);
  6. //添加地图刷新事件
  7. map.addMapEventListner("refresh",maprefresh);
  8. //地图刷新事件回调函数
  9. function maprefresh(){
  10. alert("中心点:"+map.getCenter().x+","+map.getCenter().y);
  11. map.removeMapEventListner ("refresh");//移除刷新事件
  12. }
服务
更新: 浏览: 688
地图服务概述

地图服务是指那些提供数据信息的接口,比如本地搜索、路线规划等等。该API提供的服务有:
STMapSearchN:模糊搜索,查询地图图元对象。包括业务 POI、基础道路等
STMapSearchAroundN:周边搜索,查询某个位置周边一定范围内的数据
STMapRectSearchN:矩形区域查询,查询矩形区域内的 POI 数据
STMapNav: 自驾查询,查询自驾路线。
STMapBusTrans:公交换乘查询,查询公交换乘路线。
STMapBusLineN:公交线路查询,查询公交线路。
STMapBusSiteN:公交站点查询,查询公交站点 。
STMapRoadCrossN:路口查询,查询道路交叉路。
TrafficControl:实时路况控件,提供实时和历史路况信息服务。
搜索类的服务接口需要指定一个搜索范围,否则接口将不能工作。

模糊搜索

this.execute=function()执行查询,查询完成后接口会调用回调函数,将查询结果返回给客户端。回调函数的格式要求如下: 回调函数原型:function(result){}参数 result 为返回的查询 json 结果说明:(errorCode 为-1 表示没有错误){errorCode:错误代码,currentPage: 当前页码,totalRecord: 总记录数,totalPage: 总页数,records:[{id:ID,name:名称,address:地址, phone:电话,lon:经度,lat:纬度,source:数据来源,desp:深度信息}, …]} 示例代码

  1. //模糊查询
  2. function mapSearch()
  3. {
  4. var  search = null; STMapSearch N();
  5. search.keyword = "火锅" ;
  6. search.pageNo = "1" ;
  7. search.Nums = 10 ;
  8. search.cbkFunction = mohubak ;
  9. search.execute();
  10. }
  11. //模糊查询结果回调函数
  12. function mohubak(result)
  13. {
  14. alert(result.totalRecord)
  15. }
周边查询

this.execute=function()执行查询,查询完成后接口会调用回调函数,将查询结果返回给客户端。回调函数的格式要求如下: 回调函数原型:function(result){}参数 result 为返回的查询 json 结果说明:(errorCode 为-1 表示没有错误){errorCode:错误代码,currentPage: 当前页码,totalRecord: 总记录数,totalPage: 总页数,records:[{id:ID,name:名称,address:地址, phone:电话,lon:经度,lat:纬度,source:数据来源,desp:深度信息}, …]} 示例代码

  1. //周边查询
  2. function searchAround()
  3. {
  4. var search = new STMapSearchAroundN();
  5. search.cx = 121 .43148444;
  6. search.cy = 31 .421658109;
  7. search.radius = 500 ;
  8. search.keyword = "火锅" ;
  9. search.pageNo = 1 ;
  10. search.Nums = 10 ;
  11. search.cbkFunction = aroundbak ;
  12. //周边查询结果回调函数
  13. function aroundbak(result)
  14. {
  15. alert(result.totalRecord)
  16. }
公交导航

STMapBusTrans方法提供了公交导航搜索服务,在搜索之前需要指定起始点、终点、坐标类型、公交策略tactic(推荐:1少不行:4换乘:地铁优先:16公交优先:32只做公交:64 只乘地铁:128常规线路:9轨道交通:6夜宵线:64高峰线:128旅游线路:32机场线:16轮渡线:256其他:512)。
下面示例展示了如何使用公交导航服务:

  1. //公交查询
  2. var  bus = new STMapBusTrans();
  3. Bus.ep = new  STMapPoint(121.429802,31.161201) //起点 STMapPoint 类型
  4. Bus.sp = new  STMapPoint(121.429802,31.161201); //终点 STMapPoint 类型
  5. Bus.status = 1  ;//坐标类型
  6. Bus.tactic = 1  ;//坐标策略
  7. Bus.count = 1  ; //数目
  8. Bus.cbkFunction = function  (re) //回调函数 function(result){}
  9. {
  10. var  line = re .getResulte(1);
  11. for (var i = 0 ; i line.xys.length ; i++){
  12. var poly = new STMapPolyline();
  13. poly.id = "testlinebus" +Math.random(); //【必选】对象id
  14. poly.points = line. xys[i]; //【必选】经纬度坐标串:x1,y1;x2,y2;x3,y3
  15. poly.strokeColor = "blue" ; //【可选】线的颜色
  16. poly.strokeWeight = 4 ; //【可选】宽度
  17. poly.dashStyle = "solid" ;//【可选】线形,所有可选线形请参考文档
  18. poly.filled = flase ;//【可选】是否填充
  19. poly.fillColor = "#ff9933" ;//【可选】填充颜色
  20. poly.fillOpacity = "0.5" ;//【可选】填充透明度
  21. poly.autoClose = flase ; //【可选】是否自动闭合
  22. poly.infowin = true ; //【可选】是否点击显示信息窗口,默认为true。
  23. poly.title = "" ; //设置属性框的标题
  24. poly.content = line. texts[i]; //设置属性框的内容
  25. //添加到地图上
  26. map.addOverlay(poly);
  27. }
  28. }
  29. Bus.execute();
驾车导航

STMapNav提供驾车导航服务,在搜索之前需要指定起始点、终点、坐标类型、自驾策略tactic。
下面示例展示了如何使用驾车导航接口:

  1. var  Nav = new STMapNav();
  2. Nav.sp = new  STMapPoint(121.429802,31.161201) //起点 STMapPoint 类型
  3. Nav.ep = new  STMapPoint(121.429802,31.161201) //起点 STMapPoint 类型
  4. Nav.status = 1  //坐标类型
  5. Nav.tactic = 1  //自驾策略
  6. Nav.count = 1  //数目
  7. Nav.cbkFunction = function  (re) //回调函数 function(result){}
  8. {
  9. var line = re  .getResulte(1);
  10. for (var i = 0 ; i line.xys.length ; i++){
  11. var poly = new STMapPolyline();
  12. poly.id = "testlinebus" +Math.random(); //【必选】对象id
  13. poly.points = line. xys[i]; //【必选】经纬度坐标串:x1,y1;x2,y2;x3,y3
  14. poly.strokeColor = "blue" ; //【可选】线的颜色
  15. poly.strokeWeight = 4 ; //【可选】宽度
  16. poly.dashStyle = "solid" ;//【可选】线形,所有可选线形请参考文档
  17. poly.filled = flase ;//【可选】是否填充
  18. poly.fillColor = "#ff9933" ;//【可选】填充颜色
  19. poly.fillOpacity = "0.5" ;//【可选】填充透明度
  20. poly.autoClose = flase ; //【可选】是否自动闭合
  21. poly.infowin = true ; //【可选】是否点击显示信息窗口,默认为true。
  22. poly.title = "" ; //设置属性框的标题
  23. poly.content = line. texts[i]; //设置属性框的内容
  24. //添加到地图上
  25. map.addOverlay(poly);
  26. }
  27. }
  28. Nav.execute();
地理编码

将地址信息转换为经纬度坐标。

根据地址描述获得坐标

通过geoCodingN方法来将一段地址描述转换为一个坐标。
在下面的示例中,我们将获得地址“上海市钦州南路81号”的地理坐标位置

  1. map.geoCoding("上海市钦州南路81号",geofunc);
  2. function geofunc(x,y)
  3. {
  4. alert(x+","+y)
  5. }

反向地理编码

根据一个坐标点得到一个地址的描述。您可以通过reGeoCodingN方法获得地址描述。当解析工作完成后,您提供的回调函数将会被触发。

  1. map.reGeoCoding(121.43645399,31.211535,0,getGeoInfoBack);
  2. //反地理编码接口回调函数
  3. function getGeoInfoBack(loc)
  4. {
  5. alert(loc)
  6. geoInfoStr = loc //赋值给全局变量geoInfoStr
  7. //进行坐标偏转
  8. translateLoc(121.43645399,31.211535)
  9. }
基础类
更新: 浏览: 928
类名 说明
STMapPoint 点对象
STMapSize 尺寸对象
STMapBounds 说明对象
STMapPoint 类

构造函数

构造函数 描述
function STMapLonLat(x,y) 以指定的经度和纬度创建一个地理点坐标。

参数

参数 描述
x 横坐标数字
y 纵坐标数字
STMapSize 类

构造函数

构造函数 描述
function STMapSize(w,h) 以指定的宽度和高度创建一个区域对象。

参数

参数 描述
w 宽度
h 高度
STMapBounds 类

构造函数

构造函数 描述
function STMapBounds(x1,y1,x2,y2) 创建一个矩形区域。

参数

参数 描述
x1 左上角 x 坐标
y1 左上角 y 坐标
x2 右下角 x 坐标
y2 右下角 y 坐标

方法

返回值 描述 说明
STMapPoint getCenter() 返回 Bounds 的中心点
地图核心类
更新: 浏览: 998

方法

构造函数 描述
function STMapObj(divid) 初始化地图对象,地图对象是一个符合 javascript 面向对象规范的对象,初始化的时候 需要传入一个地图容器的页面元素 ID 作为初始化参数。

参数

方法 描述
divid 地图容器 div 元素的 id
地图定位

方法

构造函数 描述
map.locateMap(cen,zoom) 地图对象建立后,要调用定位接口,才能出图

参数

方法 描述
cen 地图中心点,STMapPoint 类型
zoom 地图级别
STMapSize 类

构造函数

构造函数 描述
function STMapSize(w,h) 以指定的宽度和高度创建一个区域对象。

参数

参数 描述
w 宽度
h 高度
获取地图状态
方法 返回值 描述
getCenter STMapPoint 获取当前地图中心点
getZoom number 获取当前地图级别
getCity 当前地图所在城市,json 格式 获取当前所在城市
修改地图状态
方法 参数描述 方法说明
setCenter(center) center:地图中心点,STMapPoint 类型 地图级别不变,改变中心点
setZoom(zoom) zoom:地图视野级别 地图中心点不变,改变级别级别
pan(gapx,gapy) gapx:横向移动像素距离,右为正,左为负gapx:横向移动像素距离,下为正,上为负 将地图移动 N 个像素距离。
zoomIn() 地图放大一个级别
zoomOut() 地图缩小一个级别
配置地图方法
方法 参数描述 方法说明
setZoomComStyle(stye) stye:取值范围:1,0(默认为 0) 控制地图缩放控件样式
setZoomCompVisible(vi) vi:是否显示,取值 true/false 控制地图缩放控件显示
setScaleCompVisible(vi) vi:是否显示,取值 true/false 设置比例尺控件是否可见
setDragMap 设置地图是否可以拖动
setEagleWinVisible(vi) vi:取值为 true/false 设置鹰眼图是否显示
setCollection(is) is:取值为 true/false 设置地图是否为点聚合模式
setCollectionSize(size) size:容忍度大小,为一个矩形,为 STMapSize 类型 设置聚合容忍度
map.layerControl(layer,vi) layer:要显示或者隐藏的图层,目前有以下几种取值:raser : 卫星图图层,traffic :交通路况图层,vi:取值为 true/false 图层控制
覆盖物处理方法
方法 参数描述 方法说明
clearTempOverlays() 清除临时标记
clearAllOverlays() 删除所有绘制的点线面等对象
setOverlayVisible(id,vis) id:覆盖物对象id,vis:boolean 控制覆盖物对象是否可见
地图公共服务方法
方法 返回值 参数描述 方法说明
map.distance(Lat1, Long1, Lat2, Long2) 地理坐标点对象, STMapPoint 类型 Lat1:第一个点的经度 ,Long1:第一个点的纬度 Lat2:第二个点的经度,Long2:第二个点的经度 两点间距离计算
calArea(xys) 面积(平方米) xys 表示多边形的顶点坐标串,形如:x1,y1;x2,y2; 面积计算
map.screen2LonLat(sxy) 地理坐标点对象, STMapPoint 类型 sxy:屏幕坐标,STMapPoint 类型 屏幕坐标转换为地理坐标
map.lonlat2Screen(cxy) 屏幕坐标点,STMapPoint 类型 cxy:地理坐标,STMapPoint 类型 地理坐标转换为屏幕坐标
trandlateXY(x,y,func) x:经度坐标y:纬度坐标,func:回调函数,格式为 function(x,y){}(x,y 分别表示偏转后的经纬度)。 将 GPS 坐标偏转为符合国家测绘局规定的加密后的坐标,适应于国内地图。
map.geoCodingN(addr,func) addr:地址文本func:回调函数,格式为 function(x,y){}(x,y 分别表示偏转后的经纬度)。 地理编码:将地址信息转换为经纬度坐标。
map.reGeoCodingN(x,y,sta,func) x:经度,y:纬度,sta:坐标类型:1 为加密坐标,0 为 GPS 坐标,func: 回调函数,格式为function(addr){}(addr 为地址描述文本)。 反地理编码将经纬度坐标转换为地址信息。
intersect(id1,id2,func) id1:对象的 id,id2:对象的 id,func: 回调函数 回调函数格式:function(state){}(stste 表示判断结果,取值有以下几种:0:不相交,1:id1 包含 id2,2:id2 包含 id1,3:部分重叠,4:完全相等)。 判断对象相交关系:判断任意两个对象之间的空间关系是否有重叠。
覆盖物类
更新: 浏览: 1508
类名 说明
STMapMarker 点状覆盖物
STMapPolyline 多边形(面)覆盖物
STMapOval 椭(圆)形覆盖物
STMapRect 圆角)矩形覆盖物
STMapArc 圆弧(扇区)形覆盖物
STMapLabel 文本覆盖物
STMapCustomOverObj 自定义覆盖物
共用方法
发放 返回值 描述
addOverlay 一个地图覆盖物对象
getOverlayById String 获取覆盖物对象
deleteOverlayById 删除对象
refresh 重绘对象
STMapMarker 类

属性

属性 类型 描述
id String 对象 id
point STMapPoint 经纬度坐标
url img 对象的图片地址url。
label String 鼠标提示。
size STMapSize 图片长宽 ,默认为图片本身尺寸。
anchor STMapSize 定位锚点,如:BC (下边中心点)、BL (左下角)、BR (右下角)。
infowin Boolean 是否点击显示信息窗口
title String 属性信息库标题,支持 html 代码
content String 属性信息库标题,支持 html 代码
moveable String 是否可以拖动

方法定义

方法 返回值 说明
setLocation 设置新的位置
getSize STMapSize类型的对象 获取对象尺寸
refresh 重新定位
setMoveable 设置是否可拖动
getMoveable boolean 获取当前是否可拖动状态
STMapPolyline 类

属性

属性 类型 描述
id String 对象 id
point STMapPoint 经纬度坐标串: x1,y1;x2,y2;x3,y3。
strokeColor string 线的颜色。
strokeWeight string 宽度
strokeOpacity 透明度
dashStyle string 线形。
filled string 是否填充
fillColor string 填充颜色
fillOpacity string 填充透明度
autoClose string 是否自动闭合
infowin Boolean 是否点击显示信息窗口
tooltip string 鼠标提示
title string 属性信息库标题,支持 html 代码
content string 属性信息框内容,支持 html 代码

方法定义

方法 返回值 说明
refresh 重新定位
setEditable 设置是否可编辑
getBounds STMapBounds 返回该对象的最小外包矩形范围对象,坐标值为地理坐标
STMapOval 类

属性

属性 类型 描述
id String 对象 id
center 圆或椭圆的中心点,STMapPoint 类型
strokeColor string 线的颜色。
width string 图形的宽度(米)。
height string 图形的高度(米)
strokeColor 边线的颜色。
strokeWeight string 边线宽度。
strokeOpacity 边线透明度
dashStyle string 边线线形
filled Boolean 是否填充
autoClose String 是否自动闭合
fillColor string 填充颜色
fillOpacity string 填充透明度
tooltip string 鼠标提示
infowin boolean 是否点击显示信息窗口
title string 属性信息库标题,支持 html 代码
content boolean 属性信息框内容,支持 html 代码

方法定义

方法 返回值 说明
refresh 重新绘制
STMapRect 类

属性

属性 类型 描述
id String 对象 id
center 圆或椭圆的中心点,STMapPoint 类型
width string 图形的宽度(米)。
height string 图形的高度(米)
strokeColor 边线的颜色。
strokeWeight string 边线宽度。
strokeOpacity 边线透明度
dashStyle string 边线线形
filled Boolean 是否填充
autoClose String 是否自动闭合
fillColor string 填充颜色
fillOpacity string 填充透明度
tooltip string 鼠标提示
infowin boolean 是否点击显示信息窗口
title string 属性信息库标题,支持 html 代码
content boolean 属性信息框内容,支持 html 代码

方法定义

方法 返回值 说明
refresh 重新绘制
getBounds STMapBounds 返回该矩形对象的 4 个定点组成的外包范围对象,坐标值为地理坐标
STMapArc 类

属性

属性 类型 描述
id String 对象 id
center 圆或椭圆的中心点,STMapPoint 类型
width string 图形的宽度(米)。
height string 图形的高度(米)
strokeColor 边线的颜色。
strokeWeight string 边线宽度。
strokeOpacity 边线透明度
dashStyle string 边线线形
filled Boolean 是否填充
autoClose String 是否自动闭合
fillColor string 填充颜色
fillOpacity string 填充透明度
tooltip string 鼠标提示
infowin boolean 是否点击显示信息窗口
title string 属性信息库标题,支持 html 代码
content boolean 属性信息框内容,支持 html 代码

方法定义

方法 返回值 说明
refresh 重新绘制
STMapArc 类

属性

属性 类型 描述
id String 对象 id
center 圆或椭圆的中心点,STMapPoint 类型
width string 图形的宽度(米)。
height string 图形的高度(米)
strokeColor 边线的颜色。
strokeWeight string 边线宽度。
strokeOpacity 边线透明度
dashStyle string 边线线形
filled Boolean 是否填充
autoClose String 是否自动闭合
fillColor string 填充颜色
fillOpacity string 填充透明度
tooltip string 鼠标提示
infowin boolean 是否点击显示信息窗口
title string 属性信息库标题,支持 html 代码
content boolean 属性信息框内容,支持 html 代码

方法定义

方法 返回值 说明
refresh 重新绘制
STMapLabel 类

属性

属性 类型 描述
id String 对象 id
point STMapPoint 经纬度坐标。
text string 文本。
fontSize string 字体大小。
fontColor 字体颜色
fontFamily string 字体类型
fontWeight string 字体粗细
borderColor string 边线的颜色
borderWidth string 边线大小
fillColor String 填充颜色
anchor string 定位锚点,如:BC (下边中心点)BL (左下角)
infowin boolean 是否点击显示信息窗口
title string 属性信息库标题,支持 html 代码
content boolean 属性信息框内容,支持 html 代码

方法定义

方法 返回值 说明
refresh 重新绘制
CustomOverObj 类

属性

属性 类型 描述
id String 对象 id
point STMapPoint 该覆盖物的地理位置
html string 自定义的 html 代码。
anchor STMapPoint 定位锚点,相对于该覆盖物的左上角的相对像素坐标。
size STMapSize 自定义对象的尺寸(长宽)
infowin boolean 是否点击显示信息窗口
title string 属性信息库标题,支持 html 代码
content boolean 属性信息框内容,支持 html 代码
infowin boolean 是否点击显示信息窗口

方法定义

方法 返回值 说明
refresh 重新绘制
事件监听类
更新: 浏览: 1508
自定义地图鼠标

方法

构造函数 描述
map.addEventListner(etype,fun) 开发者可以自定义地图的鼠标事件,当设置自定义事件回调函数后,在地图上原有的鼠 标操作逻辑将失效,直至用户删除自定义事件。

参数

unc: 回调函数,func 格式说明:function clickfun(obj,x,y)参数 obj:事件发生对象,x 和 y:地图屏幕坐标示例代码。
etype:事件类型,取值如下。

事件 描述
click 点击
dblclick 双击
onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseup 鼠标松开
rightclick 右键

删除地图鼠标事件监听

removeEventListner(etype)

自定义地图覆盖物

方法

构造函数 描述
addObjEventListner(id,etype,fun) 开发者可以自定义地图覆盖物对象的鼠标事件,当设置自定义事件回调函数后,在点击 覆盖物对象时将调用用户自己的回调函数,直至用户删除自定义事件。

参数

id:覆盖物对象 ID
func: 回调函数,func 格式说明:function clickfun(obj,x,y):x 和 y:地图屏幕坐标,obj:有以下几种情况:

序号 描述
1 如果点击的是 STMapMarker 对象,且当前地图模式为聚合模式,则 obj 为点击区域包含的所有聚合对象的数组
2 如果点击的 STMapMarker 对象,当前地图非聚合模式,则 obj 为点击的 一个 STMapMarker 对象
3 如果点击的是非 STMapMarker 对象,则 obj 为点击的对象

etype:事件类型,取值如下。

事件 描述
click 点击
dblclick 双击
onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseup 鼠标松开
rightclick 右键

删除覆盖物对象事件监听

removeObjEventListner(id,etype);

自定义编辑覆盖物事件

方法

构造函数 描述
addEventListnerEditOverlay(etype,fun) 当拖动点状覆盖物或者编辑线状或者面状覆盖物的时候,相关的鼠标事件。

参数

func: 回调函数,func 格式说明:function clickfun(obj,x,y):,obj:覆盖物id,x 和 y:地图屏幕坐标。
etype:事件类型,取值如下。

事件 描述
onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseup 鼠标松开

删除覆盖物对象事件监听

removeEventListnerEditOverlay(etype)

自定义地图通用事件

方法

构造函数 描述
addMapEventListner(etype,fun) 当拖动点状覆盖物或者编辑线状或者面状覆盖物的时候,相关的鼠标事件。

参数

func: 回调函数,func 格式说明:function clickfun(obj,x,y):,obj:覆盖物id,x 和 y:地图屏幕坐标。
etype:事件类型,取值如下。

事件 描述
refresh 地图刷新事件,每次地图改变中心点和级别后触发

删除覆盖物对象事件监听

removeMapEventListner (etype)

服务类
更新: 浏览: 1828
类名 说明
STMapSearchN 模糊搜索
STMapSearchAroundN 周边搜索
STMapRectSearchN 矩形区域查询
STMapNavN 自驾查询
STMapBusTransN 公交换乘查询
STMapLabel 公交线路查询
STMapRoadCrossN 路口查询
STMapSearchN 类

命名和构造函数

构造函数 描述
Function STMapSearchN() 查询地图图元对象。包括业务 POI、基础道路等

属性

序号 参数 参数名称 取值 是否可选
1 QueryType 查询类型 FuzzySearch 必选
2 CITY 城市 SH 必选
3 Keywords 关键字 必选
4 Category 数据分类 1 基础数据2 号百三统一数据 可选,默认为全部
5 FLM01 数据分类 一级分类码 多个值用“, ”分隔 可选,为空则查询全部
6 FLM02 数据分类 二级分类码 多个值用“, ”分隔 可选,为空则查询全部
7 FLM03 数据分类 三级分类码 多个值用“, ”分隔.仅当 Category=2 或Layer 赋值时有效 可选,为空则查询全部
8 PageNo 待返回数据的页码 默认第 1 页 可选
9 Nums 每页返回记录数 默认 10 条 可选
10 Layer 私有图层 ID 默认 10 条 可选,默认为空。如果赋值,则 Category 参数将不起作用
11 cbkFunction 回调函数 必选

方法定义

方法 返回值 说明
execute 执行查询

回调函数

查询完成后接口会调用回调函数,将查询结果返回给客户端。回调函数的格式要求如下: 回调函数原型:function(result){} 参数 result 为返回的查询 json 结果说明: (errorCode 为-1 表示没有错误) {errorCode:错误代码, currentPage: 当前页码, totalRecord: 总记录数, totalPage: 总页数, records:[{id:ID,name:名称,address:地址, phone:电话,lon:经度,lat:纬度,source:数据来 源,desp:深度信息}, …] }
其中的“数据来源”取值如下:

取值 含义
1 基础数据
2 统一数据
其他 私有图层 ID
SearchAroundN 类

命名和构造函数

构造函数 描述
Function STMapSearchAroundN() 查询某个位置周边一定范围内的数据

属性

序列 参数 参数名称 取值 是否可选
1 QueryType 查询类型 FuzzySearch 必选
2 CITY 城市 SH 必选
3 Keywords 关键字 必选
4 Category 数据分类 1 基础数据2 号百三统一数据 可选,默认为全部
5 FLM01 数据分类 一级分类码 多个值用“, ”分隔 可选,为空则查询全部
6 FLM02 数据分类 二级分类码 多个值用“, ”分隔 可选,为空则查询全部
7 FLM03 数据分类 三级分类码 多个值用“, ”分隔.仅当 Category=2 或Layer 赋值时有效 可选,为空则查询全部
8 cx 经纬 必选
9 cy 经纬 必选
10 radius 半径 单位:米默认为 2 公里 可选
11 status 状态值 1 地图偏移坐标0 标准 GPS 坐标 可选,默认为 1
12 PageNo 待返回数据的页码 默认第 1 页 可选
13 Nums 每页返回记录数 默认 10 条 可选
14 Layer 私有图层 ID 默认 10 条 可选,默认为空。如果赋值,则 Category 参数将不起作用
15 cbkFunction 回调函数 必选

方法定义

方法 返回值 说明
execute 执行查询

回调函数

查询完成后接口会调用回调函数,将查询结果返回给客户端。回调函数的格式要求如下: 回调函数原型:function(result){} 参数 result 为返回的查询 json 结果说明: (errorCode 为-1 表示没有错误) {errorCode:错误代码, currentPage: 当前页码, totalRecord: 总记录数, totalPage: 总页数, records:[{id:ID,name:名称,address:地址, phone:电话,lon:经度,lat:纬度,distance:距离, source:数据来源,desp:深度信息}, …] }

RectSearchN 类

命名和构造函数

构造函数 描述
Function STMapSearchAroundN() 查询某个位置周边一定范围内的数据

属性字段定义

序列 参数 参数名称 取值 是否可选
1 QueryType 查询类型 FuzzySearch 必选
2 CITY 城市 SH 必选
3 Keywords 关键字 必选
4 Category 数据分类 1 基础数据2 号百三统一数据 可选,默认为全部
5 FLM01 数据分类 一级分类码 多个值用“, ”分隔 可选,为空则查询全部
6 FLM02 数据分类 二级分类码 多个值用“, ”分隔 可选,为空则查询全部
7 FLM03 数据分类 三级分类码 多个值用“, ”分隔.仅当 Category=2 或Layer 赋值时有效 可选,为空则查询全部
8 X1 左下角经度 必选
9 y1 左下角纬度 必选
10 x2 右上角经度 必选
11 y2 右上角纬度 必选
12 status 状态值 1 地图偏移坐标0 标准 GPS 坐标 可选,默认为 1
13 PageNo 待返回数据的页码 默认第 1 页 可选
14 Nums 每页返回记录数 默认 10 条 可选
15 Layer 私有图层 ID 默认 10 条 可选,默认为空。如果赋值,则 Category 参数将不起作用
16 cbkFunction 回调函数 必选

方法定义

方法 返回值 说明
execute 执行查询

回调函数

查询完成后接口会调用回调函数,将查询结果返回给客户端。回调函数的格式要求如下: 回调函数原型:function(result){} 参数 result 为返回的查询 json 结果说明: (errorCode 为-1 表示没有错误) {errorCode:错误代码, currentPage: 当前页码, totalRecord: 总记录数, totalPage: 总页数, records:[{id:ID,name:名称,address:地址, phone:电话,lon:经度,lat:纬度,source:数据来 源,desp:深度信息}, …] }
其中的“数据来源”取值如下:

STMapNavN 类

命名和构造函数

构造函数 描述
Function STMapNavN() 查询自驾路线

属性字段定义

序列 参数 参数名称 取值 是否可选
1 QueryType 查询类型 FuzzySearch 必选
2 CITY 城市 SH 必选
3 cx 起点经度 必选
4 cy 起点纬度 必选
5 ecx 终点经度 必选
6 ecy 终点纬度 必选
7 tactic 策略值 必选
8 cbkFunction 回调函数 必选

方法定义

方法 返回值 说明
execute 执行查询

回调函数

查询完成后接口会调用回调函数,将查询结果返回给客户端。回调函数的格式要求如下: 回调函数原型:function(result){} 参数 result 为返回的查询 json 结果说明: (errorCode 为-1 表示没有错误) {errorCode:错误代码, currentPage: 当前页码, totalRecord: 总记录数, totalPage: 总页数, records:[{id:ID,name:名称,address:地址, phone:电话,lon:经度,lat:纬度,source:数据来 源,desp:深度信息}, …] }

STMapBusTransN 类

命名和构造函数

构造函数 描述
Function STMapBusTransN() 查询公交换乘路线

属性字段定义

序列 参数 参数名称 取值 是否可选
1 QueryType 查询类型 FuzzySearch 必选
2 CITY 城市 SH 必选
3 cx 起点经度 必选
4 cy 起点纬度 必选
5 ecx 终点经度 必选
6 ecy 终点纬度 必选
7 tactic 换乘策略 见注【1】 必选
8 cbkFunction 回调函数 必选

换乘策略如下: 推荐:1; 少不行:4; 换乘:2; 地铁优先:16; 公交优先:32; 只做公交:64 ; 只乘地铁:128; 常规线路:9; 轨道交通:6; 夜宵线:64; 高峰线:128; 旅游线路:32; 机场线:16; 轮渡线:256; 其他:512。

方法定义

方法 返回值 说明
execute 执行查询

回调函数

查询完成后接口会调用回调函数,将查询结果返回给客户端。回调函数的格式要求如下: 回调函数原型:function(result){} 参数 result 为返回的查询结果,result 为 json 格式如下: (errorCode 为-1 表示没有错误) { errorCode: 错误代码, lines :[{ lineTotalDesc: 线路总体描述, lineDetailDesc: 线路详细描述, busLineInfo:公交线路途径的道路路段信息}, ….] }

STMapBusTransN

命名和构造函数

构造函数 描述
Function STMapBusLineN() 查询公交换乘路线

属性字段定义

序列 参数 参数名称 取值 是否可选
1 QueryType 查询类型 FuzzySearch 必选
2 CITY 城市 SH 必选
3 linename 起点经度 必选
4 cbkFunction 回调函数 必选

方法定义

方法 返回值 说明
execute 执行查询

回调函数

查询完成后接口会调用回调函数,将查询结果返回给客户端。回调函数的格式要求如下: 回调函数原型:function(result){} 返回参数 result 为 json 格式,如下: (errorCode 为-1 表示没有错误) {errorCode: 错误代码, lineName: 线路名称, firstBusDate: 首班车时间, lastBusDate: 末班车时间, company_phone:所属公司 电话, originName: 起点站名称, terminalName: 终点站名称, goStations:[{siteName:站点名称,lon:经度, lat:纬度}, …..], backStations : [{siteName:站点名称,lon:经度, lat:纬度}, …..]}

STMapBusSiteN

命名和构造函数

构造函数 描述
Function STMapBusSiteN() 查询公交站点

属性字段定义

序列 参数 参数名称 取值 是否可选
1 QueryType 查询类型 FuzzySearch 必选
2 CITY 城市 SH 必选
3 stopname 站点名称 必选
4 cbkFunction 回调函数 必选

方法定义

方法 返回值 说明
execute 执行查询

回调函数

查询完成后接口会调用回调函数,将查询结果返回给客户端。回调函数的格式要求如下: 回调函数原型:function(result){} 返回参数 result 为 json 格式,如下: (errorCode 为-1 表示没有错误) {errorCode: 错误代码, sites:[{siteName:站点名称, lon:经度, lat:纬度, routes: [{route:途经站点线路},…...]} , …… ] }

STMapRoadCrossN

命名和构造函数

构造函数 描述
Function STMapRoadCrossN() 查询道路交叉路

属性字段定义

属性字段 类型 说明 是否可选
CITY String 城市 必选
road String 道路名称 必选
cbkFunction Function 回调函数 必选

方法定义

方法 返回值 说明
execute 执行查询

回调函数

查询完成后接口会调用回调函数,将查询结果返回给客户端。回调函数的格式要求如下: 回调函数原型:function(result){} 参数 result 为返回的查询结果,为 json 格式: {errorCode: 错误代码, crossings:[{crossing:{road1:道路 1,road:道路 2,x:经度,y:纬度}},, …..]}

021-61132501