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

Vue2.0与 [百度地图] 结合使用：

1.vue init webpack-simple vue-baidu-map

2.下载axios

cnpm install axios;

3.在main.js中引入axios，并使用

import axios from 'axios'

/* 把axios对象挂到Vue实例上面，其他组件在使用axios的时候直接 this.$http就可以了 */

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

}

}