在地图中显示给定的坐标点

支持通过百度地图高德地图腾讯地图 的 JS SDK 在网页中渲染地图和坐标点,坐标点的坐标系可以是 wgs84,gcj02,bd09ll 中的任意一种。

下面的表单输入经纬度时既可以采用“度分秒”格式,如 113°12'39.6",也可以采用浮点数格式,如 113.211,两种格式的转化规则是 1 度 = 60 分,1 分 = 60 秒。

前面加正负号 +- 可以表示方位(不加默认是 +),对于经度,+ 表示东经,- 表示西经,对应纬度,+ 表示北纬,- 表示南纬,如 -113°12'39.6" 表示西经 113 度 12 分 39.6 秒。

经度有效范围为 -180 到 +180,纬度有效范围大概在 -85 到 +85。

测试数据(中国大陆):

  1. 经度 113°56'18.7" 纬度 22°33'4.2"(wgs84 科兴科学园)
  2. 经度 113.94645 纬度 22.51481(gcj02 中国华润大厦)
  3. 经度 114.06199121673217 纬度 22.53948892955288(bd09ll 平安金融中心)

测试数据(港澳台):

  1. 经度 114.16144 纬度 22.27951(wgs84 香港中银大厦,百度、高德、腾讯均可准确显示)
  2. 经度 113.55683 纬度 22.18612(wgs84 澳门科学馆,百度、高德、腾讯均可准确显示)
  3. 经度 121.51513 纬度 25.04291(wgs84 台湾博物馆,百度、腾讯均可准确显示,高德不行,在高德中,台湾的 wgs84 坐标可以直接用,而无需先转成 gcj02,转换后反而无法准确显示)

测试数据(国外):

  1. 经度 -74.04456 纬度 40.68945(wgs84 纽约自由女神像,百度可以准确显示,高德和腾讯缺少底图)
  2. 经度 151.21528 纬度 -33.85660(wgs84 悉尼歌剧院,百度可以准确显示,高德和腾讯缺少底图)
  3. 经度 -58.37021 纬度 -34.60789(wgs84 阿根廷总统府,百度可以准确显示,高德和腾讯缺少底图)

百度地图和高德地图的 JS SDK 自带坐标系转换的方法,但腾讯地图的 JS SDK 尚未提供此能力,只能通过腾讯地图的 HTTP 服务接口来转换,好在该接口可以使用 jsonp 的方式调用,且腾讯地图的 Key 既可以用于 JS SDK 的加载也可以用于调用 HTTP 服务,所以地图显示和坐标转换才可以纯在前端搞定。相关文档如下:
  1. 百度地图 JS SDK 的坐标系转换方法参考 DEMO,如果使用的是 GL 版的 JS SDK 可以参考 这个 DEMO
  2. 高德地图 JS SDK 的坐标系转换方法参考 DEMO
  3. 百度地图坐标系转换的 HTTP 接口(需要单独的 Key,本项目未使用)
  4. 高德地图坐标系转换的 HTTP 接口(需要单独的 Key,本项目未使用)
  5. 腾讯地图坐标系转换的 HTTP 接口(可复用腾讯地图 JS SDK 的 Key,本项目有使用)
使用 Google Maps 打开坐标时,如果想准确显示坐标点的位置,中国大陆的地点需采用 gcj02 坐标系,非中国大陆的地点需采用 wgs84 坐标系,比如上面“中国华润大厦”的坐标就是 gcj02 的,可以在 Google Maps 中准确的显示,访问地址: https://maps.google.com/?q=22.51481,113.94645。上面那些非中国大陆的地点(坐标系是 wgs84)也可以在 Google Maps 中准确的显示。但像 “科兴科学园” 这种大陆的地点,即使坐标系是 wgs84 的,也无法在 Google Maps 中准确显示,需要先转成 gcj02 坐标再用 Google Maps 打开才行,“科兴科学园” 的 gcj02 坐标是经度 113.9434,纬度 22.548145,访问地址: https://maps.google.com/?q=22.548145,113.9434