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 id="div1" :style="style"></div>
</template>
<script>
  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);
    }
  }
</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))

Logo

前往低代码交流专区

更多推荐