vue & 百度地图：使用百度地图

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中了。

vue & 百度地图：使用百度地图

猜你喜欢