如何在vue项目中使用百度地图API

目录
  • 1、在百度地图开放平台注册账号并登录
  • 2、选择自己所需的地图版本：
  • 3、在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak(这个ak不是其他的ak哈)
  • 4、之后就可以随处使用我们的百度地图了：
  • 5、标记点的添加并拥有点击弹窗效果：
  • 6、为坐标点添加文本标记：

1、在百度地图开放平台注册账号并登录

　　网址：http://lbsyun.baidu.com/index.php?title=jspopularGL

2、选择自己所需的地图版本：

　　我个人使用2.0足够了，其实就是懒，一直用的2.0没看3.0。但是3.0应该也差不多的使用。

3、在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak(这个ak不是其他的ak哈)

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

4、之后就可以随处使用我们的百度地图了：

　在我们需求的页面组件中添加地图容器：

<div id="map" class="map"></div>

这里的class用来定义大小、布局等样式操作；重要的是id值map。

一般我们会在组件加载，也就是页面渲染时加载我们的地图，所以我们可以在mounted阶段添加我们的核心代码：

// 百度地图API功能
var map = new BMap.Map("map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 20); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(
   new BMap.MapTypeControl({
     mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
   })
);
map.setCurrentCity("成都"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);

这样就在页面显示出来了我们的百度地图，记得css中添加宽高！！

5、标记点的添加并拥有点击弹窗效果：

let point = new BMap.Point(104.07258, 30.550501);
// 创建点标记
var marker = new BMap.Marker(point);
// 在地图上添加点标记
map.addOverlay(marker);
// 创建信息窗口
var opts = {
  width: 200,
  height: 100,
  title: "弹窗标题",
};
var infoWindow = new BMap.InfoWindow(
  "弹窗内容",
  opts
);
// 点标记添加点击事件
marker.addEventListener("click", function () {
  map.openInfoWindow(infoWindow, point); // 开启信息窗口
});

6、为坐标点添加文本标记：

//设置文本标记
var opts2 = {
  position: point, // 指定文本标注所在的地理位置
  offset: new BMap.Size(30, -30), // 设置文本偏移量
};
// 创建文本标注对象
var label = new BMap.Label("成都书论技术有限公司", opts2);
// 自定义文本标注样式
label.setStyle({
  color: "blue",
  borderRadius: "5px",
  borderColor: "#ccc",
  padding: "10px",
  fontSize: "16px",
  height: "50px",
  lineHeight: "30px",
  fontFamily: "微软雅黑",
});
map.addOverlay(label);

以上就是如何在vue项目中使用百度地图API的详细内容，更多关于vue项目中使用百度地图API的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • vue.js的vue-cli脚手架中使用百度地图API的实例

    vue.js的vue-cli脚手架中使用百度地图API的实例

    第一步,去百度地图开发者申请密钥. 1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript  API-->立即使用-->创建应用) 2.密钥申请成功后 第二步,在项目的需要模板中引入,具体如下: 项目路径 其中index.html存放地图链接,代码如下 在百度地图开放平台 服务介绍中 选择我们所需要的地图类型  demo演示可查看 选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=j

  • 详解vue.js下引入百度地图jsApi的两种方法

    前言 今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script> 这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们

  • 如何在vue项目中使用百度地图API

    如何在vue项目中使用百度地图API

    目录 1.在百度地图开放平台注册账号并登录 2.选择自己所需的地图版本: 3.在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak(这个ak不是其他的ak哈) 4.之后就可以随处使用我们的百度地图了: 5.标记点的添加并拥有点击弹窗效果: 6.为坐标点添加文本标记: 1.在百度地图开放平台注册账号并登录 网址:http://lbsyun.baidu.com/index.php?title=jspopularGL 2.选择自己所需的地图版本: 我个人使用2.0

  • vue项目中使用百度地图的方法

    vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {

  • 详解在HTTPS 项目中使用百度地图 API

    百度地图 API 产品简介 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口,可帮助您在网站中构建功能丰富.交互性强的地图应用,支持 PC 端和移动端基于浏览器的地图应用开发,且支持 HTML5 特性的地图开发. 百度地图 JavaScript API 支持 HTTP 和 HTTPS,免费对外开放,可直接使用.接口使用无次数限制.在使用前,您需先申请密钥(ak)才可使用. 基础使用 引用百度地图 API, 将 "您的密匙" 替换为你在百度地

  • 2种在vue项目中使用百度地图的简单方法

    地图在项目中用得很多,最近也用了几次,好长时间不用都记不清了,闲暇时整理了vue里使用百度地图的2种方法,方便自己查看,也分享给大家,希望可以帮助有需要的人. 普遍的方法是: 1.index.html 中引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 2.新建个组件maps 注意 :不要把组件命名为

  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    第一步,去百度地图开发者申请秘钥. 第二步在项目中引入,具体如下 其中index.html存放地图链接,代码如下 然后在APP.vue里面实现,代码如下 <template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </tem

  • Vue2项目中对百度地图的封装使用详解

    Vue2项目中对百度地图的封装使用详解

    目录 需求 知识点 实现 打点控件封装 代码总览 代码 总结 百度地图的使用: vue项目,有个 vue-baidu-map 可以用,但是好久不更新了. React项目,百度官方出了个React版的,可以直接用,React-BMapGL. 除此以外,百度官方的都是 JavaScript API,这里以此来用vue封装下,方便使用. 需求 组件按需引入.个人喜欢代码干干净净,只要项目需要的功能就行了 简单的封装下,方便直接按官方文档使用需要的功能,方便复用 基于Vue2 .JavaScript A

  • 如何在vue项目中使用UEditor--plus

    如何在vue项目中使用UEditor--plus

    目录 1:UEditor-plus富文本编辑器如何在vue项目中使用 2.使用方法 3.运行项目 1:UEditor-plus富文本编辑器如何在vue项目中使用 备注:UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器,由于该项目不在维护:程序员自发对其进行了维护,详见 https://gitee.com/modstart-lib/ueditor-plus?_from=gitee_search: 2.使用方法 第一步:在git上拉取ueditor代码到本地 第二步:解压后找

  • 在vue项目中引入高德地图及其UI组件的方法

    引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script

  • 详解如何在Vue项目中导出Excel

    详解如何在Vue项目中导出Excel

    Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的. 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据. 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader. 所以你先需要安装如下命令: npm install xlsx file-saver -S npm install script-loader -S -D 由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以

随机推荐