博客 (6)

天地图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(国家大地坐标系)


高德地图https://www.amap.com/

开放平台:https://lbs.amap.com/

控制台:https://console.amap.com/

版本 参考手册 示例中心
JS API v2 参考手册 示例中心
JS API v1 参考手册 示例中心

更多:坐标获取

坐标系:GCJ-02(火星坐标、国测局坐标系)


百度地图https://map.baidu.com/

开放平台:http://lbsyun.baidu.com/

控制台: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(火星坐标、国测局坐标系)


附:常见地图经纬度坐标系及转换

xoyozo 4 年前
8,236

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

xoyozo 4 年前
7,490

百度地图称之为地面叠加层(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);


xoyozo 4 年前
6,038

百度地图天地图
初始化地图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)
文本标注
new BMap.Label(content: String, {
    offset: Size,
    position: Point
})
new T.Label({
    text: string, 
    position: LngLat, 
    offset: Point
})
设置文本标注样式
setStyle(styles: Object)每个样式使用单独的 set 方法实现
图像标注
new BMap.Marker(Point, {
    offset: Size,
    icon: Icon,
    enableMassClear: Boolean,
    enableDragging: Boolean,
    enableClicking: Boolean,
    raiseOnDrag: Boolean,
    draggingCursor: String,
    rotation: Number,
    shadow: Icon,
    title: String
})
new T.Marker(LngLat, {
    icon: Icon,
    draggable: boolean,
    title: string,
    zIndexOffset: number,
    opacity: number
})
为图像标注添加文本标注Marker.setLabel(label: Label)

无。

可借用 title(鼠标掠过显示)属性来实现,并通过 Marker.options.title 来获取值

从图像标注获取坐标点Point = Marker.getPosition();
LngLat = Marker.getLngLat();
绘制折线
new BMap.Polyline(points: Array<Point>, {
    strokeColor: String,
    strokeWeight: Number,
    strokeOpacity: Number,
    strokeStyle: String,
    enableMassClear: Boolean,
    enableEditing: Boolean,
    enableClicking: Boolean,
    icons: Array<IconSequence>
})
new T.Polyline(points:Array<LngLat>, {
    color: string,
    weight: number,
    opacity: number,
    lineStyle: string
})
绘制多边形
new BMap.Polygon(points: Array<Point>, {
    strokeColor: String,
    fillColor: String,
    strokeWeight: Number,
    strokeOpacity: Number,
    fillOpacity: Number,
    strokeStyle: String,
    enableMassClear: Boolean,
    enableEditing: Boolean,
    enableClicking: Boolean
})
new T.Polygon(points:Array<LngLat>,{
    color: string,
    weight: number,
    opacity: number,
    fillColor: String,
    fillOpacity: number,
    lineStyle: string
})
设置多边形的点数组Polygon.setPath(points: Array<Point>)Polyline.setLngLats(lnglats: Array<LngLat>)
设置地图视野Map.setViewport(view: Array<Point> | Viewport, viewportOptions: ViewportOptions)Map.setViewport(view: Array<LngLat>)
xoyozo 6 年前
6,457

例:http://api.map.baidu.com/marker?location=纬度,经度&title=标题&content=介绍&output=html

可用于静态图超链接。

xoyozo 6 年前
3,949

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。

xoyozo 7 年前
9,168