# <stl:map> 地图展示

<stl:map
  type="地图类型"
  ak="百度地图密钥"
  point="经纬度"
  width="显示宽度"
  height="显示高度"
  theme="地图样式"
  isHybrid="显示卫星影像"
  zoom="地图缩放级别"
>
</stl:map>

# 说明

通过 stl:map 标签将百度地图嵌入到 HTML 文档中。

# 属性

属性 说明
type 指定地图类型
ak 指定百度地图密钥
point 指定地图位置所处的经纬度
width 显示宽度
height 显示高度
theme 地图样式
isHybrid 显示卫星影像
zoom 地图缩放级别

# type - 地图类型

地图类型,默认为 baidu

  • "baidu" 百度地图
  • "amap" 高德地图

# ak - 百度地图密钥

如果使用的地图类型为百度地图(type="baidu"),在使用地图标签之前需要先申请百度地图密钥(ak)。

进入百度地图账号和获取密钥 (opens new window),按照页面提示申请百度地图密钥(ak)。

# point - 经纬度

百度地图经纬度

访问百度地图拾取坐标系统 (opens new window),进入百度地图拾取坐标系统界面:

在上图红框 1的位置输入地图的详细地址,搜索出现地图位置后,点击上图红框 2所示地图标识,在上图红框 3处即可获取地图所处经纬度信息。

在上图获取的经纬度信息为 116.426202,39.904389,其中逗号前面的部分为经度信息,逗号后面的部分为维度信息,复制后设置到 point 属性中即可。

高德地图经纬度

访问高德地图拾取坐标系统 (opens new window),进入高德地图拾取坐标系统界面:

在上图红框 1的位置输入地图的详细地址,搜索出现地图位置后,点击上图红框 2所示地图标识,在上图红框 3处即可获取地图所处经纬度信息。

在上图获取的经纬度信息为 116.42,39.90,其中逗号前面的部分为经度信息,逗号后面的部分为维度信息,复制后设置到 point 属性中即可。

# width - 显示宽度

显示地图的宽度,非必填项。

width 是标准 CSS,支持所有单位,包括 px,%,em 和 rem。

# height - 显示高度

显示地图的高度,非必填项。

height 是标准 CSS,支持所有单位,包括 px,%,em 和 rem。

# theme 地图样式

地图的显示样式,默认为 normal

  • "normal" 默认地图样式
  • "light" 清新蓝风格
  • "dark" 黑夜风格
  • "bluish" 清新蓝绿风格
  • "grayscale" 高端灰风格
  • "hardedge" 强边界风格
  • "darkgreen" 青春绿风格
  • "pink" 浪漫粉风格
  • "midnight" 午夜蓝风格
  • "grassgreen" 自然绿风格
  • "googlelite" 精简风格
  • "redalert" 红色警戒风格

# isHybrid 显示卫星影像

设置为否显示地图卫星影像层,默认为 true

# zoom 地图缩放级别

地图缩放级别,3-19级,默认值为 16

# 示例

# 在页面中显示指定位置

下面的例子指定显示的 map 地址并设置显示宽度与高度:

<stl:map
  type="baidu"
  ak="3rKHdDkGzculXfZ8iPzr0h6xSxHowlct"
  point="116.331829,39.954602"
  height="500px"
  width="100%"
>
</stl:map>
上次更新: 2024/8/16 上午10:06:39