姓名：岳沁
學(xué)號：17101223458
轉(zhuǎn)載自：http://www.cnblogs.com/yufann/p/Vue-Node9.html
【嵌牛導(dǎo)讀】：
Vue2.0與 [百度地圖] 結(jié)合使用
【嵌牛鼻子】：thymeleaf
【嵌牛提問】：如何解決Map未定義？
【嵌牛正文】：
Vue2.0與 [百度地圖] 結(jié)合使用：
1.vue init webpack-simple vue-baidu-map
2.下載axios
cnpm install axios;
3.在main.js中引入axios，并使用
import axios from 'axios'
/* 把a(bǔ)xios對象掛到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:{ //里面存放的也是數(shù)據(jù)，與data里面的數(shù)據(jù)不同的是炊甲，這里的數(shù)據(jù)是從其他地方得到的數(shù)據(jù)
height:{
type:Number,
default:300
},
longitude:{}, //定義經(jīng)度
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);// 創(chuàng)建標(biāo)注
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(){
}
}
