vue里使用百度地图
最近公司项目里要用到百度地图，然后查阅了一些资料，并总结了下；
- 首先呢，由于本公司使用的是百度离线地图，那么我们首先需要将百度地图离线包放置static静态文件目录下（我的离线地图包名是“baidu_new_t”），然后在首页入口文件index.html里head标签里引入百度地图需要的js；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mo</title>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你申请的秘钥"></script> -->//在线
<script type="text/javascript" src="/static/baidu_new_t/js/apiv.2.0-wy.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script type="text/javascript"> document.body.onmousedown = function(){
return false;
}
</script>
</html> - 然后在项目里新建一个百度地图组件：地图对象生成方法写在组件mounted方法里面，在需要的地方导入此组件即可使用；
<template>
<div id="allmap"></div>
</template>
<script>
//import BMap from 'BMap'
export default {
data(){
return { }
},
mounted(){
console.log(123123)
if(BMap){
var map =new BMap.Map("allmap");
var point =new BMap.Point(116.404, 39.915);
map.centerAndZoom(point,15);
map.enableScrollWheelZoom();//启用滚轮放大缩小
var marker =new BMap.Marker(point);
map.addOverlay(marker);
}
}
}
</script>
<style>
#allmap {
width: 200px;
height: 200px;
}
</style> - 注意点
- 本人使用的是离线地图，如果想要使用在线地图，再第一步骤里引入在线js即可；
- 如果使用vue-cli 3.x版本，需要将百度地图离线包放在public文件夹下；
- 需要将script标签写在body标签之前，否则mounted事件里面会存在找不到bmap
vue里使用百度地图的更多相关文章
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- vue项目 调用百度地图 BMap is not defined
这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...
- Vue项目引入百度地图
先去百度开放平台申请ak.http://lbsyun.baidu.com/ 进来之后 按照步骤走,先登录百度账号,然后申请成为开发者,然后申请ak密钥 填写完毕后提交,会给你邮箱发个激活邮件 点击申请 ...
- vue项目使用百度地图API获取经纬度
一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...
- vue 中结合百度地图获取当前城市
首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script ...
- Vue中使用百度地图——根据输入框输入的内容，获取详细地址
知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客: 百度地图的引用,初步了解参考博客:http://blog.csdn. ...
- VUE之使用百度地图API
利用vue创建点餐系统,在点餐系统中需要知道商家地址信息,这时就需要借用百度地图API. 步骤一:申请百度地图密钥: 步骤二:在index.html中添加百度地图JavaScript API接口: & ...
- vue中引入百度地图
xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...
- vue中使用百度地图vue-baidu-map
安装 npm install vue-baidu-map --save 全局注册 全局注册将一次性引入百度地图组件库的所有组件.需在入口文件main.js中引入vue-baidu-map import ...
随机推荐
- 2017年10月9日 冒泡&去重复习
今天看了一下,就是数组跟js还是不太熟悉 冒泡排序 var arr = [4, 2, 1, 3, 6, 5]; for(var i = 1; i < arr.length; ...
- pod install 出错
今天使用cocoapods的时候在执行pod install出错,如下: 使用很多方法都不行,但是问题感觉应该是需要升级,所有就找到升级cocoapods:sudo gem install -n /u ...
- Thrift笔记(四)--Thrift client源码分析
thrift文件 namespace java com.gxf.demo namespace py tutorial typedef i32 int // We can use typedef to ...
- 自己动手实现STL 01：内存配置器的实现(stl_alloc.h)
一.前言 在STL中,容器是其中的重中之重,基本的STL中的算法,仿函数等都是围绕着容器实现的功能.而,内存配置器,是容器的实现的基础.所以,我第一次要去编写便是内存配置器的实现.在STL中,内存配置 ...
- HDU 5014 异或之和
http://acm.hust.edu.cn/vjudge/contest/122814#problem/H 这道题就是求异或之和 知识点: a^b = c 等价于 b^c =a 和 a^c = b ...
- 一般处理程序、ASP.NET和MVC的区别
这个问题说起来,我有点惭愧 想当初在大学里学的就是ASP.NET WebForms 在实习期间也是用的WebForms来开发网站,然后就觉得.NET开发网站就是用这个开发模式 现在想想都想笑...实在 ...
- mysql三：表操作
一.存储引擎介绍 存储引擎即表类型,mysql根据不同的表类型会有不同的处理机制. 详见:点击查看 二.表的介绍 表相当于文件,表中的一条记录就相当于文件的一行内容,不同的是,表中的一条记录有对应的标 ...
- 【阿里云产品公测】PTS压力测试最低配ECS性能及评测
PTS是一个性能测试工具,可以使用PTS对自身系统性能在阿里云环境里的状况进行整体评估来找出你的系统性能瓶颈从而优化系统,同时你还可以在了解自己的系统性能指标情况下便于未来新增扩容.在使用PTS前你必 ...
- 【JS 综合】JS综合
视频教程链接:http://www.xuexi111.com/s/javascript/ 张孝祥:http://www.21edu8.com/pcnet/programming/26685/
- GridCellChoiceEditor
choice_editor = wx.grid.GridCellChoiceEditor(choices_list, True) grid.SetCellEditor(row, col, choice ...