Vue:引用百度地图教程

1、首先安装百度地图依赖:

 npm install vue-baidu-map –save

记得在百度地图开放平台申请百度地图密钥(申请链接:http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey)按照网站提示填写应用信息,

Vue:引用百度地图教程_第1张图片

申请好之后,记住自己的ak码。注意如果在浏览器使用的话,因新系统升级,“服务端AK”不再支持浏览器端使用;在浏览器端使用,请选择“浏览器端AK”,例如JavaScript API只支持浏览器类型AK。
对于以前申请的服务端AK,不变更即不受影响,仍支持浏览器端使用;如更新老的服务端AK,再次保存,则按新创建AK处理,不再支持浏览器端使用;

2、在index.html中引入:



  
    
    
    
    my-project
  
  
    

这里的ak是填写上面的ak码哦;

3、在组件中创建一个容器,用来显示百度地图(宽高自己设置):




注意这里直接用new BMap可能会报错 'BMap' is not defined哦,只需要像这样在前面加上window.即可

这样再到页面上看就能看到地图啦!

Vue:引用百度地图教程_第2张图片

你可能感兴趣的:(Vue起步学习,前端开发)