Vue2.0 in conjunction with [Baidu Map]:
1.vue Init webpack-simple Vue-baidu-map
2. Download Axios
CNPM Install Axios;
3. Introduce Axios in main.js and use
Import Axios from ' Axios '
/* Attach the Axios object to the Vue instance, and the other components will be directly this when using Axios. $http on it.
Vue.prototype. $http = Axios;
4. Introduction of Baidu Map JS key---> preferably in the Index.js direct introduction
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= your Keys" >
5. Create a new file Map.vue, use as a map component
<template>
<div id= "div1": style= "style" ></div>
</template>
<script>
Export default{
Data: () {
return{
style:{
width: ' 100% ',
height:this.height+ ' px '
}
}
},
props:{//is also stored in the data, and the data inside is different, the data here is from other places to get data
height:{
Type:number,
default:300
},
longitude:{},//defining Longitude
latitude:{}//defining Latitude
},
mounted () {
var map = new Bmap.map ("Div1");
var point = new Bmap.point (this.longitude,this.latitude);
Map.centerandzoom (point, N);
var marker = new Bmap.marker (point);//Create Callout
Map.addoverlay (marker);
}
}
</script>
6. If the final component is used inside the App.vue
<template>
<!--bind the Latitude property to Map.vue, which gets the data through props, similar to the parent component transmitting data to a subassembly--
<mapview:height= "height": longitude= "Longitude": latitude= "Latitude" ></MapView>
</template>
Import Mapview from './components/map.vue '
Export default{
Data () {
return{
HEIGHT:300,
longitude:116.404,
latitude:39.915
}
},
componets:{
Mapview
},
Mounted () {
}
}
Project Connection: Https://github.com/yufann/vue-baidu-map
There are two maps of Baidu in this project:
The first map implementation effect is: vue+webpack+ Baidu Map--to implement communication between parent and child components (jumping icon (not using Axios))
The second map achieves the effect: vue+webpack+axios+ Baidu Map--to implement communication between parent and child components (add Information window to multiple points (using Axios))
Vue2.0 and [Baidu Map] in conjunction with the use of ——— vue+webpack+axios+ Baidu map to achieve communication between components