部署百度地图神级教程

最新推荐文章于 2024-05-17 22:18:45 发布
最新推荐文章于 2024-05-17 22:18:45 发布
阅读量688 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WUYOU798/article/details/123908115
版权

1需要在百度开发平台注册一个账号

web服务API | 百度地图API SDK

2进入控制台-应用管理-我的应用，创建应用得到一个访问ak（秘钥）

3进入开发文档-开发指南-hello world部署一个百度地图

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=（改成自已的秘钥）"></script>
    <title>地图展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>

 

1申请百度账号和ak
2准备页面
根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明： 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#394a64"><!DOCTYPE html></span></span></span></span></span></span>

您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。

3适应移动端页面展示
下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><meta</span> <span style="color:#3b5bb5">name</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"viewport"</span> <span style="color:#3b5bb5">content</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"initial-scale=1.0, user-scalable=no"</span> <span style="color:#4c4e6a">/></span>  </span></span></span></span></span>
4设置容器样式
设置容器样式大小，使地图充满整个浏览器窗口： 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><style</span> <span style="color:#3b5bb5">type</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"text/css"</span><span style="color:#4c4e6a">></span><span style="color:#000000">  
    html</span><span style="color:#000000">{</span><span style="color:#000000">height</span><span style="color:#000000">:</span><span style="color:#3b5bb5">100</span><span style="color:#000000">%}</span><span style="color:#000000">    
    body</span><span style="color:#000000">{</span><span style="color:#000000">height</span><span style="color:#000000">:</span><span style="color:#3b5bb5">100</span><span style="color:#000000">%;</span><span style="color:#000000">margin</span><span style="color:#000000">:</span><span style="color:#3b5bb5">0px</span><span style="color:#000000">;</span><span style="color:#000000">padding</span><span style="color:#000000">:</span><span style="color:#3b5bb5">0px</span><span style="color:#000000">}</span>    
    <span style="color:#9e868f">#container{height:100%}    </span>
<span style="color:#4c4e6a"></style></span> </span></span></span></span></span>
5引用百度地图API文件 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><script</span> <span style="color:#3b5bb5">type</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"text/javascript"</span> <span style="color:#3b5bb5">src</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"</span><span style="color:#4c4e6a">></span></span></span></span></span></span>
6创建地图容器元素
地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#4c4e6a"><div</span> <span style="color:#3b5bb5">id</span><span style="color:#000000">=</span><span style="color:#3f9b1d">"container"</span><span style="color:#4c4e6a">></div></span> </span></span></span></span></span>
7创建地图实例
位于BMapGL命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#fb0e0e">var</span><span style="color:#000000"> map </span><span style="color:#000000">=</span> <span style="color:#fb0e0e">new</span> <span style="color:#3b5bb5">BMapGL</span><span style="color:#000000">.</span><span style="color:#3b5bb5">Map</span><span style="color:#000000">(</span><span style="color:#3f9b1d">"container"</span><span style="color:#000000">);</span></span></span></span></span></span>

注意：

1、在调用此构造函数时应确保容器元素已经添加到地图上；

2、命名空间 API GL版使用BMapGL作为命名空间，所有类均在该命名空间之下，比如：BMapGL.Map、BMapGL.Control、BMapGL.Overlay；

8设置中心点坐标
这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标） 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#fb0e0e">var</span><span style="color:#000000"> point </span><span style="color:#000000">=</span> <span style="color:#fb0e0e">new</span> <span style="color:#3b5bb5">BMapGL</span><span style="color:#000000">.</span><span style="color:#3b5bb5">Point</span><span style="color:#000000">(</span><span style="color:#3b5bb5">116.404</span><span style="color:#000000">,</span> <span style="color:#3b5bb5">39.915</span><span style="color:#000000">);</span></span></span></span></span></span>

注意：

在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法。

9地图初始化，同时设置地图展示级别
在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作 
<span style="color:#333333"><span style="background-color:#ffffff"><span style="color:#666666"><span style="background-color:#f7f7f7"><span style="color:#e29629"><span style="color:#000000">map</span><span style="color:#000000">.</span><span style="color:#000000">centerAndZoom</span><span style="color:#000000">(</span><span style="color:#000000">point</span><span style="color:#000000">,</span> <span style="color:#3b5bb5">15</span><span style="color:#000000">);</span> </span></span></span></span></span>
至此，我们就快速创建了一张以天安门为中心的地图。

添加控件

更新时间：2020年12月21日

简介

控件是负责与地图交互的UI元素，百度地图API支持比例尺、缩放、定位、城市选择列表、版权，以及自定义控件。

DEMO详情

详情可见类参考。

控件类名简介
抽象基类Control所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
比例尺ScaleControl默认位于地图左下方，显示地图的比例关系
缩放ZoomControl默认位于地图右下方，控制地图级别的缩放
定位LocationControl默认位于地图左下方，用于获取定位
城市选择列表CityListControl默认位于地图左上方，用于进行城市选择定位
版权CopyrightControl默认位于地图左下方，用于展示版权信息
 

向地图添加控件

使用Map.addControl()方法向地图添加控件。

1参考展示地图教程完成地图初始化

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
    <title>地图展示</title>
</head>
<body></body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

2声明控件并添加到地图中

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

控制控件位置

初始化控件时，可提供一个可选参数，其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置，即控件停靠在地图的哪个角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整自己的位置。

anchor值位置说明
BMAP_ANCHOR_TOP_LEFT表示控件定位于地图的左上角
BMAP_ANCHOR_TOP_RIGHT表示控件定位于地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT表示控件定位于地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT表示控件定位于地图的右下角

控件位置偏移

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。

如下示例为：将比例尺放置在地图的左下角，由于API默认会有版权信息，因此需要添加一些偏移值以防止控件重叠。

var opts = {
    offset: new BMapGL.Size(150, 5)
}
// 添加控件
map.addControl(new BMapGL.ScaleControl(opts));
// 移除控件
map.removeControl(new BMapGL.ScaleControl(opts));

添加标注点

Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。

API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions（可选）。

注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置。

1参考展示地图创建基本地图

2向地图中添加标注

如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

3向地图中添加标注

定义标注图标 通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以使用marker.setIcon()方法。

var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {   
    // 指定定位位置。  
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
    // 图标中央下端的尖角位置。   
    anchor: new BMapGL.Size(10, 25),   
    // 设置图片偏移。  
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
    imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移   
});     
    // 创建标注对象并添加到地图  
var marker = new BMapGL.Marker(point, {icon: myIcon});   
map.addOverlay(marker);

4监听标注事件

JSAPI支持监听覆盖物的事件。

marker.addEventListener("click", function(){   
    alert("您点击了标注");   
});

添加折线

Polyline表示地图上的折线覆盖物，它包含一组点，并将这些点连接起来形成折线。Polyline使用详情请见类参考

1添加折线

首先参考展示地图创建基本地图，之后添加折线覆盖物到地图中。折线覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。

var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.910),
		new BMapGL.Point(116.405, 39.920),
		new BMapGL.Point(116.425, 39.900)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

添加多边形

Polygon表示地图上的多边形覆盖物，它包含一组点。多边形将这组点按顺序首尾相连，最终围成一个封闭图形。

1添加多边形

首先参考展示地图创建基本地图，之后添加多边形覆盖物到地图中。多边形覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。

var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);

部署地图搜索实例

 在vue中部署百度地图

1.在public中的index.html中引用百度地图API文件

2.在aboutview.vue文件中使用

 

南山~鹤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于百度地图的离线地图资源压缩包
03-23
本资源压缩包“基于百度地图的离线地图资源”是为Vue.js框架设计的，旨在帮助开发者实现离线环境下依然能提供地图服务的功能。 首先，我们需要理解Vue.js是一个轻量级的前端JavaScript框架，它以其简洁的API和组件...
手把手教你搭建个人地图服务器（高德离线部署解决方案）：获取地图瓦片数据、高德JS API、私有化部署和调用。。。
hualinger的博客
12-04 1万+
众所周知，目前常见的地图（高德、百度、腾讯等）只提供在线API服务，对于一些内网应用而言，如果需要使用地图展示，则由于不能访问互联网而无法使用类似的第三方地图服务。 本文，通过将高德地图瓦片数据 和 在线JS API做了本地部署，并修改API，将其所有的网络请求均变为本地请求。成功实现了私有化部署！1.获取地图下载器 这是一个开源项目，使用Java开发的地图瓦片图下载工具，支持OpenStreetMap、天地图、谷歌地图、高德地图、腾讯地图、必应地图的XYZ瓦片图下载与合并。点击以下任意链接获取工具。 1）
闲来无事，实现一下百度地图~
m0_58856160的博客
04-01 876
一，申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。 打开网址：http://lbsyun.baidu.com/ 然后进行申请账号 和 申请成为百度开发者 的操作 这过程中需要邮箱进行验证 创建账号完成之后 获取到AK码 准备工作已经完成 在使用中只需要将（AK）码 （即密钥）写入代码中即可 二、实现首图效果（可以参考开发者指南） 编写HTML页面的基础代码 1，在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。 <!DOCTYPE html>
离线百度地图部署包含卫星地图、矢量图、路况图。超详细教程
最新发布
weixin_48969002的博客
05-17 542
离线百度地图 GIS
百度地图API基本使用（三）
每天努力一点点比昨天强一点点
08-03 1098
本文系作者 chaoCode原创，转载请私信并在文章开头附带作者和原文地址链接。 违者，作者保留追究权利。 前言 PS：我所使用的的是百度地图Javascript API 3.0 本文是对之前使用的延续，继续对百度地图API的一些使用去做归纳和总结，本次主要是对地图上的事件以及路线规划做下一下介绍，如果有小伙伴没有看过之前的百度地图API基本使用（一）｜8月更文挑战，百度地图API基本使用（二）｜8月更文挑战，可以先去观看一下，前期所需要的一些准备，以及一些基本的用法。 感兴趣的小伙伴可以自行查看百度地图官
JS百度地图PC端API基本使用(二)
qq_38329392的博客
08-09 1086
JS百度地图PC端API基本使用(二)
HTML5 地理定位 【来自百度应用分享平台】
weixin_30748995的博客
04-11 234
百度给的地图API接口相当完善，复制过来一下，以后备用 基本使用方法： <!--引入百度地图API--> <scriptsrc="http://api.map.baidu.com/api?v=1.4"type="text/javascript"></script> 首先引入百度地图API 之后创建地图： var mp =newBM...
调用百度地图API时，在for循环中使用new BMap.InfoWindow()，只显示最后一个的问题
打工人的博客
04-13 718
{${${
百度地图WebGL离线版V1.0示例,包含3D地球模式
02-23
《百度地图WebGL离线版V1.0：探索3D地球模式的奥秘》 在当今互联网时代，地图服务已经成为了我们生活中不可或缺的一部分。尤其是随着WebGL技术的发展，地图服务逐渐迈向了3D立体视界，为用户带来了更为直观、真实的...
百度地图隐藏无关区域
10-11
在给定的标题“百度地图隐藏无关区域”中，我们可以深入探讨如何利用百度地图API定制化地显示地图内容，使其仅展示用户关心的特定行政区，从而提高界面的清晰度和用户体验。 百度地图是中国主流的地图服务平台之一...
OpenStack自动部署教程
03-19
这份资源是一份关于OpenStack自动部署的教程，旨在向用户介绍如何利用自动化工具和脚本来快速、高效地部署OpenStack云平台。通过自动部署，您可以更便捷地搭建和配置OpenStack环境，节省时间和减少人为错误的风险。 ...
百度离线地图示例V3.0
09-28
综上所述，百度离线地图示例V3.0是一个全面的教程，涵盖了从地图切片管理到JavaScript API的使用，对于想要深入理解和实践百度地图离线应用的开发者来说，这是一个非常有价值的资源。通过学习和研究这个示例，开发者...
百度地图添加自定义边界值
qq_38519358的博客
11-03 5249
使用百度地图过程中常常需要给某个区域添加边界，这里有两种方法： 一种是使用百度地图自带的Boundary方法，通过输入区域名称可自动给地图添加边界 不足：这种方法只适用于省市区级行政区域的，如果想自定义区域增加边界，则不能使用该方法 code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt.
百度地图搜索功能的实现--new BMap.LocalSearch
z1093541823的博客
04-12 4580
new BMap.LocalSearch实现百度地图搜索功能
百度地图的基本知识与使用
qq_68086484的博客
10-31 2814
v=1.0&&type=webgl&ak=你自己的AK">map.centerAncZoom(point, 15);var point new BMap.Point(经度，纬度)
你好，百度地图
Lin_heng的博客
04-01 388
1、新建文件并引入script <script type="text/javascript" src="https://api.map.baidu.com/api? v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script> 初始化地图，设置中心坐标 var map = new BMapGL.Map("container"); var po
百度地图api-基本用法总结
热门推荐
星银色飞行船的博客
02-11 1万+
百度地图api的一些常用方法
使用百度地图绘制点、线、面 | Javascript
this_zq的博客
05-09 4798
写在前面： 本文为百度地图开发系列文章之一， 前期回顾： webGIS，基于百度地图的HelloWord实现 如何使用前端css代码去掉百度地图左下角的图标 使用百度地图绘制点、线、面 | Javascript（本篇讲解） 百度地图开发系列之个性化地图使用的2种方法 以上对应视频教程（博客与视频前面的序号是一一对应的）： 百度地图开发从零开始00初始化地图创建helloWorld 百度地图开发从零开始01去地图左下角图标 个人前端网站：zhangqiang.hk.cn 欢迎加入博主的前端
百度离线地图金字塔瓦片发布
fashenhc975193的博客
09-28 849
百度离线地图金字塔瓦片发布 1、简介 BIGEMAP一键离线地图发布服务器主要帮助企业内部（局域网）环境搭建私有地图服务。支持一键快速发布，无需二次开发，无需配置环境，安装即可发布离线地图，可应用在局域网地图发布，内网地图发布，手持设备地图发布，移动端地图发布。在没有网络的情况下，依然可以实现地图浏览。       支持离线地图的标绘：点、线、面、上传图片等等

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值