如下图所示:
接着,设置下禁止浏览器窗口大小改变地图大小,并引入地图核心JS
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
设置因浏览器大小改变地图大小,进行禁止;引入地图核心js前,记得到官网上申请密钥
如下图所示:
地图如何在页面上展示出来,这里就需要一个地图容器。于是,我在<body></body>中设置一个div,作为地图容器,
如下图所示:
接着,设置下body、div元素的样式,如宽度、高度、字体以及字体大小等。这里,必须要设置下宽度和高度,且使用百分比,这样让其自适应,
如下图所示:
然后,编写生成地图的核心JS,指定地图的经纬度,地图为2D的,放大级别zoom,
如下图所示:
最后,将地图初始化函数放到body中的onload事件中,让初始化页面就加载地图,
如下图所示:
7
但是,我发现这样写的话,地图始终不出来;于是,我仔细检查下,结果发现地图容器的ID和初始化函数地图ID不一致,还有没有设置html元素的样式,导致地图始终显示不了。修改完了之后,重新刷新浏览器,地图显示出来了
进入: (创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用)切换城市,搜索需标注位置。(如下图:)
设置地图:大家可以对网站显示地图的宽高进行设置,其余选项不动。
添加标注:点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位。标记图标处可更换图标形状,名称和备注填入位置相关信息。(如下图:)
步骤阅读
完成以上4步后,点获取代码。