Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

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))