vue和谷歌地图,百度地图开发
vue+Amap || vue+Bmap1.在webpack中加入配置externals: {/* "BMap": "BMap","BMapLib": "BMapLib",*/"AMap": "window.AMap","AMapUI": "AMap
·
vue+Amap || vue+Bmap
1.在webpack中加入配置
externals: { /* "BMap": "BMap", "BMapLib": "BMapLib",*/ "AMap": "window.AMap", "AMapUI": "AMapUI" }
2.在页面中配置
<!--百度地图api--> <!-- <script src="http://api.map.baidu.com/api?v=2.0&ak=OjFCr32PIqozyNKLXTyQDdmefVzam2Ey"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />--> <!--高德地图--> <script src="//webapi.amap.com/maps?v=1.3&key=3455531464dfdc62bcf09689d07daa9f"></script> <script src="//webapi.amap.com/ui/1.0/main.js"></script>
3.在vue组件中的生命周期函数 mounted()中初始化地图
Amap
mounted() { this.map = new AMap.Map("map", Object.assign({}, this.mapDefault, this.mapConfig)); this.initPlugin(); this.initMapConfig(); }Bmap
mounted() { let map = new BMap.Map("map", { minZoom: this.mapConfig.zoom[0] ? this.mapConfig.zoom[0] : 3, maxZoom: this.mapConfig.zoom[1] ? this.mapConfig.zoom[1] : 19, mapType: this.mapType[this.mapConfig.mapType] ? this.mapType[this.mapConfig.mapType] : this.mapType.normal }); this.map = map; this.initMapConfig(); this.initMapEvent(); }
更多推荐
已为社区贡献3条内容
所有评论(0)