vue + 百度地图api

主要分解为如下步骤:

(1)在html文件中引入百度地图,
1
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your token "></script>
(2)在webpack.base.conf.js文件内添加external选项,在module.exports内部,和entry平级;
1
2
3
externals: {
  "BMap": "BMap"
},
(3)添加地图组件BMapComponent.vue,这里主要注意两点:
    a)使用BMap的时候不需要import了,import反而会报错     
    b)注意一定要给bmap的div设置高度,否则会看不见
该组件的代码如下
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
  <!--<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>-->
  <!--<div id="allmap":style="{width: '100%', height: mapHeight + 'px'}"></div>-->
  <div id="allmap" v-bind:style="mapStyle"></div>
</template>
<script>
  export default {
    data:function(){
      return{
        mapStyle:{
          width:'100%',
          height:this.mapHeight +'px'
        }
      }
    },
    props:{
      // 地图在该视图上的高度
      mapHeight:{
        type:Number,
        default:500
      },
      // 经度
      longitude:{
        type:Number,
        default:116.404
      },
      // 纬度
      latitude:{
        type:Number,
        default:39.915
      },
      description:{
        type:String,
        default:'天安门'
      }
    },
    ready:function(){
      var map =newBMap.Map("allmap");
      var point =newBMap.Point(this.longitude,this.latitude);
      var marker =newBMap.Marker(point);
      map.addOverlay(marker);
      map.centerAndZoom(point,15);
      // 信息窗的配置信息
      var opts ={
        width :250,
        height:75,
        title :"地址:",
      }
      var infoWindow =newBMap.InfoWindow(this.description, opts);// 创建信息窗口对象
      marker.addEventListener("click",function(){
        map.openInfoWindow(infoWindow,point);
      });
      map.enableScrollWheelZoom(true);
      map.openInfoWindow(infoWindow,point);//开启信息窗口
    }
  }
</script>
 
<!--Add"scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>
(4) 在父组件中使用
    a)引入 import BMapComponent from './components/BMapComponent.vue'
    b)在template中增加标签
     
1
<b-map-component></b-map-component>
    注意这里标签的命名,在vue文档中有说:http://vuejs.org.cn/guide/components.html#资源命名约定 
.
posted @   每天都要进步一点点  阅读(34640)  评论(2编辑  收藏  举报
(评论功能已被禁用)
点击右上角即可分享
微信分享提示