天地图:https://map.tianditu.gov.cn/
开放平台:http://lbs.tianditu.gov.cn/
控制台:https://console.tianditu.gov.cn/
版本 | 类参考 | 代码示例 |
JavaScript API 4.0 | 类参考 | 代码示例 |
JavaScript API 4.0 开源库 |
资源引用、类参考及示例 |
若不显示地图,请添加域名白名单。
坐标系:CGCS 2000(国家大地坐标系)
版本 | 参考手册 | 示例中心 |
JS API v2 | 参考手册 | 示例中心 |
JS API v1 | 参考手册 | 示例中心 |
更多:坐标获取
坐标系:GCJ-02(火星坐标、国测局坐标系)
控制台:http://lbsyun.baidu.com/apiconsole/center
版本 | 类参考 | 示例DEMO |
JavaScript API GL | 类参考 | 示例DEMO |
JavaScript API v3.0 | 类参考 | 示例DEMO |
更多:拾取坐标系统
坐标系:BD-09(百度坐标)
腾讯地图:https://map.qq.com/
PC端于2022年11月11日停止服务
开放平台(腾讯位置服务):https://lbs.qq.com/
控制台:https://lbs.qq.com/dev/console
版本 | 参考手册 | 示例 |
JavaScript API GL | 参考手册 | 示例 |
坐标系:GCJ-02(火星坐标、国测局坐标系)
JavaScript API GL v1.0 是基于 WebGL 全新开发的地图 API 接口。为了方便开发者迁移升级,大部份接口向下兼容。目前 GL v1.0 版本接口包含了 3D 地图的渲染、基本控件、覆盖物。在后面的版本中,将对原 v2.0、v3.0 中的核心功能进行补全。
JavaScript API GL 版本对手机性能要求较高,不建议在移动端调用。若涉及移动端 JS 服务调用,请使用 JavaScript API v3.0 版本。
JavaScript API GL v1.0 基于 WebGL 开发,对于用户的浏览器环境有兼容性要求。需要完整支持 WebGL 的现代浏览器来支持渲染。对于 WebGL 支持欠佳的浏览器会降级为 Canvas 绘制,若仍然存在兼容性问题,则会降级到瓦片图渲染。确保不同浏览器环境的用户都可以完成地图的基本渲染。
参考:http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/usage
百度地图称之为地面叠加层(GroundOverlay)
类参考:https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html#a3b18
示例DEMO:http://lbsyun.baidu.com/jsdemo.htm#gImageGround
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(117.200, 36.2437), 18);
map.enableScrollWheelZoom(true);
map.setTilt(45);
map.setDisplayOptions({
poiText: false, // 隐藏poi标注
poiIcon: false, // 隐藏poi图标
building: false // 隐藏楼块
});
var pStart = new BMapGL.Point(117.19635, 36.24093);
var pEnd = new BMapGL.Point(117.20350, 36.24764);
var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
var imgOverlay = new BMapGL.GroundOverlay(bounds, {
type: 'image',
url: '/jsdemo/img/shouhuimap.png',
opacity: 1
});
map.addOverlay(imgOverlay);
百度地图 | 天地图 | |
初始化地图 | var map = new BMap.Map("allmap"); | var map = new T.Map("allmap"); |
将覆盖物添加到地图 | addOverlay(overlay: Overlay) | addOverLay(overlay:OverLay) |
从 Map 的 click 事件中获取坐标点 | map.addEventListener("click", function (e) { Point = e.point; } | map.addEventListener("click", function (e) { LngLat = e.lnglat; } |
坐标点 | new BMap.Point(lng: Number, lat: Number) | new T.LngLat(lng: Numbe, lat: Number) |
像素点 | new BMap.Pixel(x: Number, y: Number) | new T.Point(x: Number, y: Number) |
文本标注 |
|
|
设置文本标注样式 | setStyle(styles: Object) | 每个样式使用单独的 set 方法实现 |
图像标注 |
|
|
为图像标注添加文本标注 | Marker.setLabel(label: Label) | 无。 可借用 title(鼠标掠过显示)属性来实现,并通过 Marker.options.title 来获取值 |
从图像标注获取坐标点 | Point = Marker.getPosition(); | LngLat = Marker.getLngLat(); |
绘制折线 |
|
|
绘制多边形 |
|
|
设置多边形的点数组 | Polygon.setPath(points: Array<Point>) | Polyline.setLngLats(lnglats: Array<LngLat>) |
设置地图视野 | Map.setViewport(view: Array<Point> | Viewport, viewportOptions: ViewportOptions) | Map.setViewport(view: Array<LngLat>) |
WGS-84(地球坐标)
用于 GPS 模块 及 Google Earth
GCJ-02(火星坐标、国测局坐标系)
用于 Google Map、必应-中国地图、高德、腾讯、图灵、阿里地图,是对地理位置的一次加密
BD-09(百度坐标)
仅用于百度地图,是对火星坐标的再次加密
CGCS 2000(国家大地坐标系)
用于天地图,与 WGS-84 最大差异 0.11mm
坐标转换:https://github.com/wandergis/coordtransform
微信网页开发的获取地理位置接口(wx.getLocation)默认使用 wgs84,可选 gcj02。
微信网页开发的使用微信内置地图查看位置接口(wx.openLocation)支持 gcj02。