嵌入百度地图 · SuperMap GIS在线Web开发教程

在网页中嵌入百度地图

本例将带领您在网页中插入百度地图。

Step1 创建一个页面BaiduMap.html，添加地图容器

从零开始，您可以：

先创建一个页面BaiduMap.html

然后在页面中创建一个用于显示地图的容器：一个div，并设置id = "map"

定义样式，如高度设为600px

Step2 引入在线JS库

在标签前，加入引用的脚本。在使用百度地图前，您需要先注册百度的开发账户，并获取需要的ak。有了ak就可以引入JS可以了。

具体如下所示：

其中，SuperMap.Include.js是SuperMap Online提供的在线脚本，可以很方便地嵌入地图。

Step3 在页面中插入百度地图

创建Map实例，初始化地图并指定显示的中心点坐标和地图级别以及城市。一般情况下，地图都需要支持鼠标缩放，所以还需要开启enableScrollWheelZoom。代码如下：

在线演示与源码编辑

将BaiduMap.html保存后，直接在浏览器中打开这个页面，您就可以开始浏览嵌入的百度地图。

您也可以通过在线体验的方式，直接在线编辑源码并实时查看演示效果。

在线演示

编辑源码