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

猜你喜欢

转载自www.cnblogs.com/foxcharon/p/8929307.html
今日推荐