html接入百度地图

1.申请key

key申请地址:https://lbsyun.baidu.com/apiconsole/key#/home

注意:白名单设置*则所有可访问,正式发布保证安全需修改为域名

官方文档

https://lbsyun.baidu.com/index.php?title=jspopularGL

2.html接入示例

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>百度地图demo</title>

    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=YOUR_KEY"></script>
<script type="text/javascript">
    // 创建地图实例
    var map = new BMapGL.Map("container");
    // 设置中心点及缩放级别
    var point = new BMapGL.Point(104.70049, 29.422945);
    map.centerAndZoom(point, 18);
    // 启用鼠标滚轮缩放功能
    map.enableScrollWheelZoom(true);
    // 添加标注
    var marker = new BMapGL.Marker(point);
    // 点标记添加点击事件
    var infoWindow = new BMapGL.InfoWindow('世界无花果博览园', {width: 10, height: 60});
    marker.addEventListener('click', function () {
        map.openInfoWindow(infoWindow, point);
    });
    map.addOverlay(marker);
</script>
</body>
</html>
相关推荐
南风木兮丶2 分钟前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少15 分钟前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务17 分钟前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
Mintopia24 分钟前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia25 分钟前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc
Olrookie27 分钟前
若依前后端分离版学习笔记(十六)——scoped、路由跳转
前端·笔记
qaqxiaolei28 分钟前
高效办公利器:前端实现表格导出excel格式 + 自定义水印的完整方案
前端·javascript
叫我詹躲躲30 分钟前
为什么Bun.js能在3秒内启动一个完整的Web应用?
前端·javascript·bun
Olrookie31 分钟前
若依前后端分离版学习笔记(十七)——ruoyi开发规范&流程,请求流程,依赖引入,组件注册&通信
前端·笔记
Keepreal49632 分钟前
谈谈对闭包的理解以及常见用法
前端·javascript