1、第一步,首先,在HBuilder创建一个Web项目,并在项目下新建一个pages/map目袄嬖艽蛞录,然后新建一个空白的HTML5页面;将地图核心js引入进去,修改title标签内容,如下图所示:
2、第二步,接着,设计地图容器,这里在地图容器外面加一个div,利用div嵌套div的方法,并给地图div一个id,如下图所示:
3、第三步,地图容器以及html、body需要设置样式,关键是设置地图宽度和高度,如下图所示:
4、第四步,然后,编写生成地图的函数,实例化地图和初始化地图,并将函数放在body的onloa蟠校盯昂d事件中,页面初始化时就调用地图方法,如下图所示:
5、第五步,直接预览地图,发现地图无法展示出来,于是我将js移到<html></html>外面,重新预览,如下图所示:
6、第六步,最后,将地图容器外层的div设置样式,再次预览,发现地图可以展示出来,如下图所示: