如何在vue-cli中引入百度地图(vue-Baidu-Map)

迷南。 2022-12-19 11:48 363阅读 0赞

最近公司做的一个项目里面需要用到地图标点和圈出地块的面积，所以总结一下如何在vue中引入百度地图。  
**1.安装**

$ npm install vue-baidu-map --save

**2.全局注册，在main.js文件中引入以下代码**

import BaiduMap from 'vue-baidu-map'
    Vue.use(BaiduMap, { 
      ak: '你申请的key'
    })

（ak是百度官方提供的密钥，需要开发者自己去申请 [http://lbsyun.baidu.com/][http_lbsyun.baidu.com]）  
**3.界面**

<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
        }
    }<br>}

这样就可以在自己的页面里面看到自己想要的地图了。

[http_lbsyun.baidu.com]: http://lbsyun.baidu.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读

相关在Web页面引入百度地图

准备工作：获得百度地图的ak 打开：[http://lbsyun.baidu.com/apiconsole/key?application=key][http_lbsyun.

清疚/ 2024年02月19日 21:10/ 0 赞/ 90 阅读

相关如何在项目中加入百度地图？

> 斯人若彩虹，遇上方知有。流程： ①获取账号和密钥参考网址：http://lbsyun.baidu.com/index.php?title=jspopular3

迈不过友情╰/ 2023年10月04日 11:16/ 0 赞/ 24 阅读

相关如何在vue-cli中引入百度地图(vue-Baidu-Map)

最近公司做的一个项目里面需要用到地图标点和圈出地块的面积，所以总结一下如何在vue中引入百度地图。 1.安装 $ npm install vue-baidu-ma

迷南。/ 2022年12月19日 11:48/ 0 赞/ 364 阅读

相关 vue 引入百度地图

注意vue文件中调用地图，在mounted中调用无用时候，要在this.$nextTick()方法中调用，如下 this.$nextTick(() => \{

小咪咪/ 2022年10月30日 11:24/ 0 赞/ 258 阅读

相关如何在网页中嵌入百度地图

http://blog.sina.com.cn/s/blog\_685850f00101e8b3.html　一、打开地图生成器　　百度地图生成器：[http://api

不念不忘少年蓝@/ 2022年08月27日 05:39/ 0 赞/ 328 阅读

相关 Angular引入百度地图js

第一步：申请百度地图密钥，很简单，去网上随便找教程第二步：在Angular项目中引入百度地图API文件，在index.html中引入 ![watermark_type_Z

逃离我推掉我的手/ 2022年04月22日 02:08/ 0 赞/ 378 阅读

相关 Vue --》如何在vue中调用百度地图

1.项目根目录下下载百度地图插件　　npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: 　　<scri

我不是女神ヾ/ 2021年12月10日 04:37/ 0 赞/ 367 阅读

相关 vue引入百度地图

1.创建一个vue项目输入指令 npm install vue-baidu-map –-save 2.在index.html 里面引入 <script type

雨点打透心脏的1/2处/ 2021年11月27日 07:14/ 0 赞/ 410 阅读

相关 vue中引入百度地图

方法一：通过cdn引入一，申请密匙（[http://lbsyun.baidu.com/apiconsole/key?application=key\/home

系统管理员/ 2021年07月25日 14:46/ 0 赞/ 708 阅读

相关百度地图SDK注册、引入

[百度地图引入步骤][Link 1] 代码示例: <html> <head> <meta charset="utf-8"> <meta

朱雀/ 2021年07月24日 23:30/ 0 赞/ 562 阅读