index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxxx"></script> <title>voidvue_map</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
ak填的是你自己申请的密钥。
百度地图的开发者平台上有详细的说明。
mymap.vue
<template> <div class="hello"> <div style="margin-bottom:10px"> <button @click="clickStart('jinting')">设定坐标</button> <button @click="clickEnd">退出设定</button> </div> <!-- map start --> <div style="" id="dituContent" class="ditu-content"></div> <!-- map end --> </div> </template> <script> export default { name: 'mymap', data () { return { polygons: [], clickCity: '', polyline: null, marker: null, cityName: '', status: 'none', centerPoint: [], savePointsArray: [], savePointsString: '', jinting: '', mapObj:null } }, mounted () { this.initMap() }, methods:{ clickEnd(){ console.log('======================== CLICK END ======================') this.clickCity = '' this.status = 'none' }, initMap () { this.createMap() ; //创建地图 }, createMap(){ let self = this let m = new BMap.Map("dituContent") let point = new BMap.Point(120.49,31.15) m.centerAndZoom(point,12) m.setCurrentCity("苏州") this.setMapEvent(m) }, setMapEvent(m){ m.enableDragging();//启用地图拖拽事件，默认启用(可不写) m.enableScrollWheelZoom();//启用地图滚轮放大缩小 m.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写) m.enableKeyboard();//启用键盘上下左右键移动地图 this.addMapControl(m);//向地图添加控件 }, addMapControl(m){ //向地图中添加缩放控件 let ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); m.addControl(ctrl_nav); //向地图中添加缩略图控件 let ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); m.addControl(ctrl_ove); //向地图中添加比例尺控件 let ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); m.addControl(ctrl_sca);
this.mapObj = m } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .ditu-content{ width:70%; height:600px; border:#ccc solid 1px; margin:0 auto; } .pointwords{ word-wrap: break-word; text-align: center; padding: 0 20px; } .button{ height: 100px; } </style>
关于BMap地图对象：
原本我打算把它作为参数传到别的函数里，但发现这样在使用上还是不太方便，所以还是把它放到了vue页面实例的data中了。
参考：
https://blog.csdn.net/qq_38903950/article/details/78022174?locationNum=7&fps=1