VUE之使用百度地图API
利用vue创建点餐系统,在点餐系统中需要知道商家地址信息,这时就需要借用百度地图API。
步骤一:申请百度地图密钥;
步骤二:在index.html中添加百度地图JavaScript API接口;
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KCzp8claYra8uYAvahElV9oKUT6j7Gx1" ></script>
步骤三:在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级;
externals: {
"BMap": "BMap"
}
步骤四:在地图组件中import BMap,否则会出现"BMap undefined";
import BMap from 'BMap';
步骤五:创建地图对象,在mounted生命周期调用;
mounted() {
this.ready();
},
methods: {
ready: function() {
var map = new BMap.Map('allmap');
var point = new BMap.Point(104.075796, 30.659684);
map.centerAndZoom(point, 14);
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
map.enableDoubleClickZoom(true);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
}
步骤六:将组件插入父组件中;
VUE之使用百度地图API的更多相关文章
- vue项目使用百度地图API获取经纬度
一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...
- vue框架导入百度地图API接口的方法
百度请求API接口:
- vue项目,百度地图api高亮选取区域,高亮某个地区,行政区域等
效果如下: var blist = [] ,maxZoom: });// 创建地图实例 var point = new window.BMap.Point(89.48,31.57); map.cent ...
- vue中百度地图API的调用
1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...
- vue项目 调用百度地图 BMap is not defined
这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- Vue中使用百度地图——根据输入框输入的内容,获取详细地址
知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客: 百度地图的引用,初步了解参考博客:http://blog.csdn. ...
- 百度地图API的使用
------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...
- 吐槽贴:百度地图 api 封装 的实用功能 [源码下载]
ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...
随机推荐
- PhpStorm编辑器
PhpStorm编辑文字过程中发现其有二种方式, 可以通过按“Insert”键进行转换. 第一种是直接在光标后面修改 第二种是直接在光标处修改 很多编辑器也有类似的输入转换,包括Mac的命令台
- mysql 5.5 安装配置方法图文教程(转发)
MySQL下载地址:http://dev.mysql.com/downloads/installer/ 1.首先进入的是安装引导界面 2.然后进入的是类型选择界面,这里有3个类型:Typical(典型 ...
- 添加启动项及常用Windows+R
常用Windows+R services.msc---本地服务设置 msconfig---系统配置实用程序 mspaint--------画图板 notepad--------打开记事本 Nslook ...
- vim有用的快捷键
多行前插入字符: ctrl + v (进入列模式,选上要插入的行) shift + i 输入要统一插入的字符 esc (虽然从外面看着是只有一行插入了,但是按下esc后就会发现之前选的都插入了 删除多 ...
- China sets economic reform priorities for 2015
BEIJING -- China's State Council, the cabinet, on Monday unveiled this year's priorities for economi ...
- 系统安装记录 install OS
上个系统很乱,基本系统是lfs7.7,上面应用都是基于lfs7.9,基本系统是才接触lfs时搭建的,打包保存后一直没怎么使用过,到lfs7.10快出来的时候有段时间有空就拿出来跑了一下,安装了一些软件 ...
- Socket bind failed: [730048] ?????????×???(Э?é/???????/???)????í??错误
启动项目的时候发现tomcat跑不起来.后台输出错误Socket bind failed: [730048] ?????????×???(Э?é/???????/???)????í?? 发现是ecli ...
- php构造函数的继承方法
第一种情况:子类没有定义构造函数时,默认继承.例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 <?php class A{ public $name; function _ ...
- 分享知识-快乐自己:Maven 无法加载 Oracle 数据库驱动源
由于Oracle授权问题,Maven3不提供Oracle JDBC driver,为了在Maven项目中应用Oracle JDBC driver,必须手动添加到本地仓库. 手动添加到本地仓库需要本地有 ...
- Linux-NoSQL之Redis(三)
一.Redis数据常用操作 1.string常用操作 set key1 aminglinux get key1 set key1 aming //一个key对应一个value,多次赋值,会覆盖前面 ...