如何构造URL使Bing Maps或OpenStreetMaps直接展示点位路径

Bing Maps 公开URL路径展示方案 #

无需申请API密钥，仅通过GET请求构造URL即可在新标签页打开Bing Maps展示自定义路径，共有两种适用不同场景的实现方式：

方式1：多标点按序连线（适配≤20个点位的场景） #

你已用到的sp参数支持重复传入实现多标点展示，搭配rtp、rtop参数即可强制按传入的点位顺序连线，无需Bing自动计算导航路线，URL基础结构如下：

https://www.bing.com/maps/?v=2&cp={中心纬度}~{中心经度}&lvl={缩放级别1-20}&sty=c&sp=point.{lat1}_{lon1}_{点1名称}&sp=point.{lat2}_{lon2}_{点2名称}&...&rtp=pos.{lat1}_{lon1}~pos.{lat2}_{lon2}~...~pos.{latn}_{lonn}~&rtop=0~1~0

参数说明：

• cp：地图中心坐标，格式为纬度~经度，可选参数，不传时Bing会自动适配所有点位的最佳视野
• lvl：地图缩放级别，可选参数
• sp：单点位标点配置，重复多次即可添加多个标点，点位名称可留空
• rtp：路径点位序列，按你需要的展示顺序用pos.纬度_经度格式拼接，点位间用~分隔，末尾必须额外加一个~
• rtop=0~1~0：固定参数，作用是关闭Bing自动导航路线计算，直接按传入点位顺序连线

方式2：传入Polyline编码路径（适配点位较多的场景） #

如果点位超过20个，可先将所有路径点编码为Google Polyline格式，通过polyline参数直接传入路径：

https://www.bing.com/maps/?v=2&cp={中心纬度}~{中心经度}&lvl={缩放级别}&sty=c&polyline={URL编码后的Polyline字符串}_c{十六进制颜色代码}_w{线宽}

比如需要展示红色2px宽的路径，参数部分为polyline={编码后的字符串}_cFF0000_w2

OpenStreetMap 替代方案 #

完全符合无追踪、开源适配的需求，同样无需密钥即可构造直链展示路径：

• 少量点位按序展示URL结构：

https://www.openstreetmap.org/directions?engine=fossgis_osrm_foot&route={lat1},{lon1};{lat2},{lon2};...;{latn},{lonn}#map={缩放级别}/{中心纬度}/{中心经度}

• 多点位Polyline传入URL结构：

https://www.openstreetmap.org/?way={URL编码后的Polyline字符串}&map={缩放级别}/{中心纬度}/{中心经度}

代码示例（JavaScript） #

// 输入参数：点位数组，格式为 [{lat: 纬度, lon: 经度, name?: 点位名称}]
function generateBingMapUrl(points) {
  if (!points.length) return ''
  // 自动计算所有点位的中心坐标
  const avgLat = points.reduce((sum, p) => sum + p.lat, 0) / points.length
  const avgLon = points.reduce((sum, p) => sum + p.lon, 0) / points.length
  // 生成多标点参数
  const spParams = points.map(p => `sp=point.${p.lat}_${p.lon}_${encodeURIComponent(p.name || '')}`).join('&')
  // 生成路径序列参数
  const rtpPart = points.map(p => `pos.${p.lat}_${p.lon}`).join('~') + '~'
  return `https://www.bing.com/maps/?v=2&cp=${avgLat}~${avgLon}&lvl=15&sty=c&${spParams}&rtp=${rtpPart}&rtop=0~1~0`
}

// 调用示例
const trackPoints = [
  {lat: 53.0210235, lon: -1.48398532, name: '14:23 定位点'},
  {lat: 53.02345, lon: -1.48762, name: '14:28 定位点'}
]
const mapUrl = generateBingMapUrl(trackPoints)
// 新标签页打开：window.open(mapUrl, '_blank')

相关搜索关键词 #

• Bing Maps direct link multiple points
• Bing Maps URL parameters no API key
• Bing Maps draw path from URL
• OSM show custom route URL parameter
• OpenStreetMap direct link polyline

内容的提问来源于stack exchange，提问作者Peter Wone