百度地图 JS api使用

最新推荐文章于 2024-03-23 14:01:49 发布

Donmind29

最新推荐文章于 2024-03-23 14:01:49 发布

阅读量285

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/yl971129/article/details/116496436

版权

百度地图API WebGL 地图样式自定义图标 JavaScript

关键词由CSDN通过智能技术生成

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

首先进入百度地图开放平台，注册成为开发者，并创建应用，得到自己的AK
地址：http://lbsyun.baidu.com/apiconsole/key/create#/home

然后在页面中引入JS文件：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=自己的AK"></script>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度地图测试</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=yCvS1aOq0H8LenHSomT59pKd2w98PEU2"></script>
    <style> 
        *{
            margin:0;
            padding:0;
        }
        html, body, #map {
            width: 100%;
            height: 100%;
        }
        .anchorBL, .BMap_cpyCtrl{
            display:none;
        }
    </style>
</head>
<body>
        <div id="map">

        </div>

        <script>
            console.log(window.BMapGL);  //挂载到window上的一个对象
            var map = new BMapGL.Map("map",{
                minZoom: 6,  //最小缩放比例
                maxZoom: 20  //最大缩放比例
            });  //初始化地图
            var point = new BMapGL.Point(111.65, 40.82);  //设置地图中心点
            map.centerAndZoom(point, 12);  //让地图出来，设置中心点及缩放比例
            map.enableScrollWheelZoom(true);  //允许鼠标滚轮进行放大缩小
            var zoomCtrl = new BMapGL.ZoomControl({ //缩放控件
                anchor: BMAP_ANCHOR_TOP_RIGHT
            })
            map.addControl(zoomCtrl);
            var scaleControl = new BMapGL.ScaleControl({  //标尺控件
                anchor: BMAP_ANCHOR_TOP_LEFT
            });
            map.addControl(scaleControl);
            map.setMapStyleV2({   //地图的自定义样式
                styleId: "556b6c846f130ec3ad0016f2eba410f6"
            })
            
            var myIcon = new BMapGL.Icon(   //设置图标
                "./images/jiqun.png",   //图标路径
                new BMapGL.Size(35, 35),  //图标大小
                {}
            )
            var marker = new BMapGL.Marker(point, {icon: myIcon})
            map.addOverlay(marker);
        </script>
</body>
</html>

效果如下：
在这里插入图片描述

Donmind29

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图 JS api使用

首先进入百度地图开放平台，注册成为开发者，并创建应用，得到自己的AK地址：http://lbsyun.baidu.com/apiconsole/key/create#/home然后在页面中引入JS文件：<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=自己的AK"></script>完整代码：<!DOCTYPE html
复制链接

扫一扫

专栏目录