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#资源命名约定
![](https://images2015.cnblogs.com/blog/1090399/201704/1090399-20170402165553617-1008689586.jpg)
.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步