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中直接引入

　　<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">

5.新建文件Map.vue，作为map组件使用

<template>

　　<div > </script>

6.假如最终组件在App.vue里面使用

<template>

　　<!-- 绑定latitude属性，传给Map.vue，这样通过props就拿到了数据，类似于父组件往子组件传数据 -->

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

　　}

}

项目连接：https://github.com/yufann/vue-baidu-map

这个项目中有两个百度地图：

第一个地图实现效果是：vue+webpack+百度地图-->实现父子组件的通信(跳跃的图标(没有使用axios))

第二个地图实现效果是：vue+webpack+axios+百度地图-->实现父子组件的通信(给多个点添加信息窗口(使用了axios))