vue项目实现便捷接入百度地图API

目录
  • 1.账号注册
  • 2.获取密钥
  • 3.创建项目
  • 4.项目导入
  • 5.效果展示

1.账号注册

在百度地图开放平台注册账号并登录
网站地址： https://lbsyun.baidu.com/index.php?title=jspopularGL

2.获取密钥

进入开发文档并进行密钥申请

3.创建项目

4.项目导入

此时我们已经获取了密钥，接着就可以在项目中导入了

首先安装百度地图

npm install vue-baidu-map --save

接着注册（这里我采用局部注册）

//局部注册   百度地图
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

最后在界面文件中导入

<template>
    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true'>
    </baidu-map>
</template>
<script>
export default {
  name: 'TestBaiDu',
  data () {
    return {
      center: {lng: 109.45744048529967, lat: 36.49771311230842},
      zoom: 13
    }
  },
  methods: {
    handler ({BMap, map}) {
      var point = new BMap.Point(109.49926175379778, 36.60449676862417)
      map.centerAndZoom(point, 13)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
      map.addOverlay(circle)
    },
    getClickInfo (e) {
      console.log(e.point.lng)
      console.log(e.point.lat)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    }
}

5.效果展示

以上就是vue项目实现便捷接入百度地图API的详细内容，更多关于vue接入百度地图API的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解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使用方法

    步骤一:申请百度地图密钥: 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项目中使用百度地图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项目实现便捷接入百度地图API

    vue项目实现便捷接入百度地图API

    目录 1.账号注册 2.获取密钥 3.创建项目 4.项目导入 5.效果展示 1.账号注册 在百度地图开放平台注册账号并登录网站地址: https://lbsyun.baidu.com/index.php?title=jspopularGL 2.获取密钥 进入开发文档并进行密钥申请 3.创建项目 4.项目导入 此时我们已经获取了密钥,接着就可以在项目中导入了 首先安装百度地图 npm install vue-baidu-map --save 接着注册(这里我采用局部注册) //局部注册 百度地图

  • JavaScript接入百度地图API的方法步骤

    JavaScript接入百度地图API的方法步骤

    目录 一.百度地图API接入 二.在HTML中使用百度地图API 1.在html中引入百度地图js文件 2.在网页中定义一个DIV用于显示地图 3.在网页中显示地图 4.添加可选控件 5.定位功能 6.添加地图标记 7.给地图标记添加点击事件 8.添加信息窗口 9.路径规划 10.正逆地址解析 一.百度地图API接入 1.搜索百度地图开发平台 2.注册百度账号 3.登陆并申请成为开发者 4.在百度地图开发平台的首页选择控制台,在控制台中创建应用 创建好应用以后就能在控制台我的应用中看到这个应用,

  • vue全局接入百度地图的实现示例

    vue全局接入百度地图的实现示例

    目录 前言 一.获取ak密钥 二.整合步骤 总结 前言 本文主要教大家如何把百度地图整合到我们的vue项目中 一.获取ak密钥 1.登录网址 https://lbsyun.baidu.com/ 注册百度地图开放平台账号,填写认证信息,并且创建应用 创建完应用后可以在类似界面获取到我们的AK密钥 注意:IP白名单要合理配置 我这里为了方便测试才设置的0.0.0.0/0 二.整合步骤 获取到ak密钥之后就可以与我们的VUE项目进行整合 1.npm下载包 代码如下(示例): npm install -

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

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

  • 百度地图API使用方法详解

    百度地图API使用方法详解

    最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子. 示例一: API地址:http://developer.baidu.com/map/jsdemo.htm#a1_2 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

  • Android 调用百度地图API示例

    Android 调用百度地图API示例

    Android 调用百度地图API 一.到 百度地图开发平台下载SDK http://lbsyun.baidu.com/index.php?title=androidsdk/sdkandev-download 1.点击自定义下载 2.下载自己想要的功能包我这里选了三个 3.获取密钥 获取密钥之前我们要新建一个应用 填写好相关的信息 二. 新建一个项目工程 1. 把下载好的百度sdk中的jar包拷贝到项目的libs目录下 2.在application中添加开发密钥 3.添加所需的权限 <uses-

  • 基于百度地图api清除指定覆盖物(Overlay)的方法

    最近用百度地图api做项目,需要同时在地图显示marker与Polyline,且Polyline需要根据点击来显示或清除,所以遇到了清除指定覆盖物的问题,各种搜索后未能找到完美的解决方法,通过自己思考,摸索了一方法能解决这个问题,发出来给大家分享.好了,进入正题: 清除覆盖物有两个方法:map.removeOverlay()或者 map.clearOverlays(),clearOverlays()方法一次移除所有的覆盖物,removeOverlay()一次移除一个指定覆盖物,显然,我要一次移除

  • 通过netty把百度地图API获取的地理位置从Android端发送到Java服务器端的操作方法

    本篇记录我在实现时的思考过程,写给之后可能遇到困难的我自己也给到需要帮助的人.写的比较浅显,见谅. 在写项目代码的时候,需要把Android端的位置信息传输到服务器端,通过Netty达到连续传输的效果,如下: 我们可以先来看看百度地图官方给出的相关代码 public class MainActivity extends AppCompatActivity { private MapView mMapView = null; private BaiduMap mBaiduMap = null; p

随机推荐