在html页面中用js引入百度地图

如何使用百度地图?
当我们在第一次使用时,必须要申请申请密钥引入api后才能实现
具体流程
申请账号->获得秘钥->引入API
在这里插入图片描述
在书写代码时引入API:

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的秘钥"></script>

在这里插入图片描述
注:ak=每个人在申请时有自己的ak(秘钥),不输入无法引入地图
利用api完成一个小demo在HTML网页中展示地图
引入api:

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
    <!-- 创建地图容器元素 -->
<!-- 地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素。 -->
    <div id="allmap"></div>
 // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));     
    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

效果图:
在这里插入图片描述


版权声明:本文为weixin_45846805原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。