0


vue项目中使用百度地图,详细过程

简述:我们在写项目的时候,有时候难免会用到地图,这里给大家介绍一下如何在vue项目中使用百度地图,获取可视区域坐标,以及添加线路、站点。

1、****首先,在项目中安装百度地图依赖。

npm install vue-baidu-map --save

2、****全局注册,在main.js中一次性引入百度地图组件库的所有组件,

import Vue from 'vue';
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'
})

// **ak 是在百度地图开放平台申请的密钥 详见:我要申请百度地图ak **

申请百度地图ak的具体步骤如下:

(1)首先进入百度地图开放平台,然后是右上角导航栏 > 开发文档 > JavaScript API,如下图:

ec5eadeb592d4459b47f00ecf507a5cc.png

(2)左边侧边栏 > 开发指南 > 账号和获取密钥,如下图:

0a6a3ebe337f4d4ba52f5295c7960ce2.png

** 或者使用局部注册,详见:百度地图局部注册**。

3、****然后在vue页面直接使用。

<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>

四角坐标>>

百度地图获取可视区域四角坐标https://blog.csdn.net/weixin_65793170/article/details/128317808?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168136965416800197026426%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168136965416800197026426&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-4-128317808-null-null.blog_rank_default&utm_term=%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE&spm=1018.2226.3001.4450**路线站点>>**

百度地图添加路线和站点https://blog.csdn.net/weixin_65793170/article/details/127846466?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168136965416800197026426%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168136965416800197026426&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-127846466-null-null.blog_rank_default&utm_term=%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE&spm=1018.2226.3001.4450

Vue Baidu Map>>

百度地图,在Vue项目中的使用文档https://dafrok.github.io/vue-baidu-map/#/zh/start/usage

JavaScript API GL>>

百度地图,JavaScript使用文档https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/maptype


本文转载自: https://blog.csdn.net/weixin_65793170/article/details/127839712
版权归原作者 北城笑笑 所有, 如有侵权,请联系我们删除。

“vue项目中使用百度地图,详细过程”的评论:

还没有评论