天地图：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（火星坐标、国测局坐标系）
类参考：http://lbs.tianditu.gov.cn/api/js4.0/opensource/class/ImageOverlay.html
资源引用：http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.js
压缩文件：http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.min.js
示例：http://lbs.tianditu.gov.cn/api/js4.0/opensource/demo/ImageOverlay.html
添加图片覆盖物：
map = new T.Map('mapDiv');
map.centerAndZoom(new T.LngLat(116.390750, 39.916980), zoom);
var bd = new T.LngLatBounds(
new T.LngLat(116.385360, 39.911380),
new T.LngLat(116.395940, 39.921400));
img = new T.ImageOverlay("http://lbs.tianditu.gov.cn/images/openlibrary/gugong.jpg", bd, {
opacity: 1,
alt: "故宫博物院"
});
map.addOverLay(img);修改图片地址：
img.setImageUrl(imgBase64);百度地图称之为地面叠加层（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);// 控制组件
map.addControl(new T.Control.MapType());
// 切换到“地图”视图
map.setMapType(TMAP_NORMAL_MAP);
// 切换到“卫星”视图
map.setMapType(TMAP_SATELLITE_MAP);
// 切换到“卫星混合”视图
map.setMapType(TMAP_HYBRID_MAP);| 百度地图 | 天地图 | |
| 初始化地图 | 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。