# <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>