如何在vue-cli中使用百度地图

首先第一步搭建项目的架子 vue init webpack + 项目名称第二部就是申请密钥 http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 申请密钥后看一下百度开放平台问题反馈 http://lbsyun.baidu.com/index.php?title=FAQ/jsapi在index.html引入<scri

树沙&

12950人浏览 · 2018-04-28 15:55:54

树沙& · 2018-04-28 15:55:54 发布

首先第一步搭建项目的架子 vue init webpack + 项目名称

第二部就是申请密钥 http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

申请密钥后看一下百度开放平台问题反馈 http://lbsyun.baidu.com/index.php?title=FAQ/jsapi

在index.html引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥也就是ak值"></script>

 
   <!DOCTYPE html 
   > 
  
 
   < 
   html 
   > 
  
 
   < 
   head 
   > 
  
 
   < 
   meta 
   charset= 
   "utf-8" 
   > 
  
 
   < 
   meta 
   name= 
   "viewport" 
   content= 
   "width=device-width,initial-scale=1.0" 
   > 
  
 
   < 
   title 
   >map 
   </ 
   title 
   > 
  
 
   </ 
   head 
   > 
  
 
   < 
   style 
   > 
  
 
   /* 去掉地图左下角的百度LOGO */ 
  
 
   .anchorBL { 
  
 
   display: 
   none 
  

    } 
  
 
   </ 
   style 
   > 
  
 
   < 
   script 
   type= 
   "text/javascript" 
   src= 
   "https://api.map.baidu.com/api?v=2.0 
   & 
   ak=" 
   ></ 
   script 
   > 
  
 
   < 
   body 
   > 
  
 
   < 
   div 
   id= 
   "app" 
   ></ 
   div 
   > 
  
 
   <!-- built files will be auto injected --> 
  
 
   < 
   div 
   id= 
   "allmap" 
   ></ 
   div 
   > 
  
 
   </ 
   body 
   > 
  
 
   </ 
   html 
   > 
  

地图容器必须需要div 包裹起来

在webpack.base.conf.js里面 配置

 
  module. 
  exports = { 
 
  context: 
  path. 
  resolve( 
  __dirname, 
  '../'), 
 
  entry: { 
 
  app: 
  './src/main.js' 
 
   }, 
 
  externals: { 
 
  "BMap" 
  : 
  "BMap" 
 
   }, 
 
   }

在需要使用百度地图的组件中导入

 
 import 
 BMap 
 from 
 'BMap' 

最后一步就是查看地图的api http://lbsyun.baidu.com/jsdemo.htm#lite_2_0 进行使用了

一定记住需要在mounted钩子函数里面操作API 因为地图需要在所以的dom树加载完毕后才能操作

 
  < 
  template 
  > 
 
  < 
  div 
  > 
 
  < 
  div 
  id= 
  "allmap" 
  class= 
  "allmap" 
  ></ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  template 
  > 
 
  < 
  script 
  > 
 
  import 
  BMap 
  from 
  'BMap' 
 
  export 
  default { 
 
  name: 
  'HelloWorld', 
 
  data () { 
 
  return { 
 
   } 
 
   }, 
 
  created () { 
 
   }, 
 
  mounted() { 
 
  // var lng=''; 
 
  // var lat=''; 
 
  var 
  map = 
  new 
  BMap. 
  Map( 
  "allmap"); 
  // 创建地图实例  
 
  var 
  point = 
  new 
  BMap. 
  Point( 
  116.331398, 
  39.897445); 
  // 创建点坐标  
 
  map. 
  centerAndZoom( 
  point, 
  15); 
  // 初始化地图，设置中心点坐标和地图级别  
 
  map. 
  enableScrollWheelZoom( 
  true); 
  //开启鼠标滚轮缩放  
 
  map. 
  addControl( 
  new 
  BMap. 
  NavigationControl()); 
 
  map. 
  addControl( 
  new 
  BMap. 
  ScaleControl()); 
 
  map. 
  addControl( 
  new 
  BMap. 
  OverviewMapControl()); 
 
  map. 
  addControl( 
  new 
  BMap. 
  MapTypeControl()); 
 
  map. 
  setCurrentCity( 
  "武汉"); 
  // 仅当设置城市信息时，MapTypeControl的切换功能才能可用 
 
  // var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM}  
 
  // map.addControl(new BMap.NavigationControl(opts)); 自定义控件 
 
  map. 
  setMapStyle({ 
  style: 
  'midnight'}); 
  //地图风格

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^