vue + 百度地图api
vue + 百度地图api
主要分解为如下步骤：
（1）在html文件中引入百度地图，
<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平级；
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
|
<template><br><!--<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>
exportdefault{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中增加标签
<b-map-component></b-map-component>
注意这里标签的命名，在vue文档中有说：http://vuejs.org.cn/guide/components.html#资源命名约定
.