如何引入百度地图到html中展示位置

最新推荐文章于 2024-06-12 13:52:41 发布
最新推荐文章于 2024-06-12 13:52:41 发布
阅读量657 收藏
点赞数
https://github.com/gztrljh
本文链接：https://blog.csdn.net/ljh101/article/details/108946229
版权 
#官方说明
http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show

#csdn博友
https://blog.csdn.net/weixin_45846357/article/details/105477838

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>zan-admin</title>
    <script src="static/js/checkie&edge.js"></script>
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/zan-admin.min.css" rel="stylesheet">
    <style>
        #baidumap {
            height: 300px;
        }
    </style>
</head>

<body>
    <header class="zan-header">
        <span class="glyphicon glyphicon-menu-hamburger zan-sidebar-toggle" aria-hidden="true"></span>
        <div class="zan-header-center">
            <div class="zan-nav-item"><a href="index.html">首页</a></div>
            <div class="zan-nav-item"><a href="platform.html">平台</a></div>
            <div class="zan-nav-item"><a href="#">商城</a></div>
            <div class="zan-nav-item"><a href="#">运营</a></div>
            <div class="zan-nav-item"><a href="#">百度</a></div>
            <div class="zan-nav-item"><a href="#">谷歌</a></div>
            <div class="zan-nav-item"><a href="#">天猫</a></div>
            <div class="zan-nav-item"><a href="#">淘宝</a></div>
            <div class="zan-nav-item"><a href="#">京东</a></div>
        </div>
        <div class="zan-avatar-wrap">
            <div class="dropdown">
                <img class="zan-avatar" data-toggle="dropdown" src="static/images/avatar.jpg" alt="头像">

                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">admin</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">超级管理员</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">通知 <span class="badge">10</span></a></li>
                    <li><a href="#">个人资料</a></li>
                    <li><a href="#">修改密码</a></li>
                    <li><a href="#">清空缓存</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>
    <aside class="zan-aside">
        <div class="zan-brand">
            <a href="index.html">zan-admin后台管理系统</a>
        </div>
        <ul class="zan-sidebar">
            <li>
                <a href="index.html">
                    <span class="glyphicon glyphicon-home" aria-hidden="true"></span>后台首页
                </a>
            </li>
            <li>
                <a href="fonticon.html">
                    <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>字体图标
                </a>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>日期选择器
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_flatpickr.html">flatpickr</a></li>
                    <li><a href="plug_datetimepicker.html">datetimepicker</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>文件上传
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_fileupload.html">fileupload</a></li>
                    <li><a href="plug_webuploader.html">webuploader</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>图表插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_chart.html">chart</a></li>
                    <li><a href="plug_echarts.html">echarts</a></li>
                </ul>
            </li>

            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>富文本
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_tinymce.html">tinymce</a></li>
                    <li><a href="plug_editor.md.html">editor.md</a></li>
                    <li><a href="plug_ueditor.md.html">ueditor</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-saved" aria-hidden="true"></span>表单验证
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_formvalidation.html">formvalidation</a></li>
                    <li><a href="plug_jquery.validation.html">jquery.validation</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>地图插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_lbsbaidu.html">百度地图</a></li>
                </ul>
            </li>

            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>其它插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_sweetalert.html">sweetalert</a></li>
                    <li><a href="plug_notify.html">notify</a></li>
                    <li><a href="plug_timeline.html">timeline</a></li>
                    <li><a href="plug_clipboard.html">clipboard</a></li>
                    <li><a href="plug_croppie.html">croppie</a></li>
                    <li><a href="plug_lightbox.html">lightbox</a></li>
                    <li><a href="plug_touchslider.html">touchslider</a></li>
                    <li><a href="plug_rocket.html">rocket</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-file" aria-hidden="true"></span>示例页面
                </a>
                <ul class="zan-submenu">
                    <li><a href="page_login.html" target="_blank">登录页面</a></li>
                    <li><a href="page_curd.html">CURD页面</a></li>
                    <li><a href="page_password.html">修改密码</a></li>
                    <li><a href="page_error.html" target="_blank">错误页面</a></li>
                </ul>
            </li>
        </ul>
    </aside>
    <!-- 面包屑导航 -->
    <div class="zan-breadcrumb">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
        </ol>
    </div>

    <main class="zan-main">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div id="baidumap"></div>
                </div>
            </div>
           
        </div>
    </main>

    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/zan-admin.min.js"></script>
    <!-- 插件依赖 -->
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=QLnury6Qqs17img1SncCzIrQtzvhI7XB"></script>
    <script>
        var map = new BMapGL.Map("baidumap");          // 创建地图实例 
        var point = new BMapGL.Point(118.14621, 24.51253);  // 创建点坐标 
        map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.setHeading(64.5);   //设置地图旋转角度
        map.setTilt(73);       //设置地图的倾斜角度
    </script>
</body>

</html>

高德地图官方教程

https://lbs.amap.com/api/javascript-api/guide/abc/quickstart
「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html用百度的地图，显示指定坐标点并提示坐标点信息
01-23
html页面调用百度的地图，显示指定坐标点并提示坐标点信息，自己可以在里面将JavaScript里面的代码剪切创建单独的js调用。
百度地图API记录轨迹和里程Javascript版html
06-01
里面包含完整代码，自己提供ak密钥，到百度地图页面申请即可
html在百度地图显示位置,在百度地图显示当前位置.html
weixin_31272749的博客
06-10 620
获取当前位置并显示在百度地图中*{margin: 0;padding:0;}html,body{width: 100%;height: 100%;}#container{width: 100%;height: 100%;}//console.log(window.navigator.geolocation);if(window.navigator.geolocation){var options ...
HTML实现百度地图定位及导航功能
最新发布
2401_85123750的博客
06-12 358
body {设置容器样式地图存放的div。
前端项目引入高德地图
tt1234561009的博客
08-14 2059
进入高德开发平台申请，具体操作可以参考官方提供的文档说明准备-地图 JS API 2.0 | 高德地图API按照上面的步骤就可以成功申请一个应用，得到 key 和 安全密钥，后面都会用到。
如何在网页中嵌入百度地图
zhouzhiwengang的专栏
05-15 746
http://blog.sina.com.cn/s/blog_685850f00101e8b3.html
HTML5获取当前地理位置并在百度地图上展示的实例
11-19
- 首先，需要在HTML文档中引入百度地图API的JavaScript库： ```html <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> ``` - 创建地图实例： ```javascript var map = ...
html5定位获取当前位置并在百度地图上显示
05-09
首先，需要在网页中引入百度地图的JavaScript库： ```html 您的百度地图API密钥"> ``` 然后创建一个div元素作为地图容器： ```html ; height: 400px;"> ``` 接下来，使用百度地图API初始化地图，并在地图上添加...
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
09-27
在本文中，我们将深入探讨如何在HTML5页面中利用百度地图API来获取用户当前位置并直接导航至指定的目的地。这是一个非常实用的功能，特别是在移动设备上，例如在微信中使用自定义菜单，用户可以直接进入导航，简化...
Echarts2.0引入百度地图.rar
07-16
在ECharts 2.0中引入百度地图，可以使数据可视化与地理位置信息紧密结合，实现地理信息的动态展示。 首先，我们需要了解如何在ECharts中配置百度地图。ECharts支持自定义地图，其中包括了对百度地图的支持。引入...
echarts3.0引入百度地图.rar
07-16
在 ECharts 3.0 中引入百度地图，意味着开发者可以将 ECharts 的图表功能与百度地图的地理信息相结合，创建出既有数据分析又有地理位置展示的交互式应用。这种结合使得数据可视化的场景更加广泛，例如，我们可以用它...
百度在线地图HTML格式
11-19
百度在线地图HTML格式，通过调用HTML代码进行百度地图的API调用，以网页的形式进行百度地图的显示功能。
html中加入百度地图
08-07
html中计入百度地图，代码可以修改，可以修改当前位置。
百度地图标注和Bootstrap样式冲突解决方案
huangdou0204的专栏
07-07 3236
问题：百度的地图标注和Bootstrap样式有冲突，会导致标题框宽度不对和信息框左边栏和下边拦有1-2px的错位。 解决方案：在自定义的css中加入这个样式即可解决这2个样式冲突问题。dituContent为百度地图标注的div id #dituContent label { max-width:none; } #dituContent div { box-sizing: in
html 导入百度地图 网页中如何导入百度地图
暂时还没想好博客简介
01-19 6204
html 导入百度地图 网页中如何导入百度地图
HTML嵌入百度地图
热门推荐
ZGHXH的博客
04-15 2万+
我们经常会在各类网站中看到有百度地图的存在，那么百度地图是如何加载到html中的呢？ 1.打开网址百度地图API； 2.打开后如图所示，在红框处填写自己想要定位的地址 3.点击左侧彩电设置地图，设置参数，宽高好像不太好用，后续可以自己去代码中修改 4.点击左侧添加标注即可添加标注，标注自己想要描述的地带你定位，画路线图到达自己标注的位置，然后点击保存按钮，一定要点击保存按钮
如何将百度地图引入到HTML和VUE文件中？
gang456789的博客
09-21 2632
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富，交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，并支持HTML5特性的地图开发。该套API免费对外开放。自V1.5版本起，您需先申请密钥（AK）才可使用，接口无使用次数限制。因此，本人这里将介绍V1.5版本以下，不需要密钥即可使用，推荐使用版本1.4后者版本1.1。
html5 引入百度地图案例
Robocop_Mao的博客
09-27 3592
html5 引入百度地图案例一： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="view
HTML实现百度地图的效果
最有趣的编程
11-04 4989
1.新建一个html文件，将要嵌入地图的部分留出来。 2.html嵌入百度地图学习网址http://jingyan.baidu.com/article/c45ad29cdc5d4f051753e2d2.html。 1 打开“百度地图生成器”的网址：http://api.map.baidu.com/lbsapi/creatmap/index.
百度地图API开发手册：从入门到精通
- **引用API文件**：通过`<script>`标签引入百度地图API的JavaScript库。 - **创建地图容器元素**：在HTML中定义一个div元素作为地图的容器。 - **命名空间**：使用`bmap`命名空间来访问百度地图API的方法和对象。 -...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值