Vue2.0 and [Baidu Map] in conjunction with the use of ——— vue+webpack+axios+ Baidu map to achieve communication between components

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.