Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
来源:互联网 发布:java前端和后端的工资 编辑:程序博客网 时间:2024/05/16 20:27
Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
1.vue init webpack-simple vue-baidu-map
2.下载axios
cnpm install axios;
3.在main.js中引入axios,并使用
import axios from 'axios'
Vue.prototype.$http = axios;
4.引入百度地图的js秘钥--->最好在index.js中直接引入
5.新建文件Map.vue,作为map组件使用
export default{
data:(){
return{
style:{
width:'100%',
height:this.height+'px'
}
}
},
props:{ //里面存放的也是数据,与data里面的数据不同的是,这里的数据是从其他地方得到的数据
height:{
type:Number,
default:300
},
longitude:{}, //定义经度
latitude:{} //定义纬度
},
mounted(){
var map = new BMap.Map("div1");
var point = new BMap.Point(this.longitude,this.latitude);
map.centerAndZoom(point, 12);
var marker = new BMap.Marker(point);// 创建标注
map.addOverlay(marker);
}
}
6.假如最终组件在App.vue里面使用
import MapView from './components/Map.vue'
export default{
data(){
return{
height:300,
longitude:116.404,
latitude:39.915
}
},
componets:{
MapView
},
mounted(){
}
}
项目连接:https://github.com/yufann/vue-baidu-map
这个项目中有两个百度地图:
第一个地图实现效果是:vue+webpack+百度地图-->实现父子组件的通信(跳跃的图标(没有使用axios))
第二个地图实现效果是:vue+webpack+axios+百度地图-->实现父子组件的通信(给多个点添加信息窗口(使用了axios))
阅读全文
0 0
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- vue2.0填坑——百度地图API
- 前端框架Vue(9)——百度地图使用
- html5与百度地图API结合使用。
- iOS — 百度地图 使用
- 百度地图与echarts结合
- echarts3与百度地图结合
- vue中使用百度地图
- vue使用百度地图记录
- Vue框架中添加百度地图组件
- 百度地图API的使用——网页中写入百度地图
- (Vue2.0)axios与vuex中actions结合使用的实现
- 百度地图的使用
- 百度地图的使用
- 百度地图的使用
- 百度地图的使用
- 百度地图的使用
- 添加水印文字
- 挑战程序竞赛系列(93):3.6凸包(4)
- 怎么免费恢复手机里删除的照片呢?
- SSD相关基础
- 关于JavaWeb的实例(一)-以eclipse搭建SSH框架
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- 3种转盘抽奖动画效果实现
- 【greenDAO3】 项目搭建与增删改查操作
- svn ignore 的用法(忽略文件及目录)
- 【项目实战经验】电商系统常用数据结构
- ARP协议工作原理[同网段及跨网段]
- 拖了将近一个月的----C++初学之路
- TP 框架实现支付宝接口功能
- 百度java后台实习生面试题