百度地图配合 vue， vue 绑定的事件怎么调用地图的函数呢？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2392 天前的主题，其中的信息可能已经有所发展或是发生改变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">  
    html {
      height:100%
    }  
    body {
      height:100%;
      margin:0px;
      padding:0px
    }  
    #main {
      height:100%
    }
    #map {
      height: 90%
    }
    .circle-marker {
      position: absolute;
      width: 90px;
      height: 90px;
      background: #c00;
      border-radius: 50%;
      opacity: .7
    }
  </style>  
  <script src="http://api.map.baidu.com/api?v=2.0&ak=Ls1zIpQI8SB8bi46cSGieAYLHYeyHzfW"></script>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="main">
    <div id="map"></div>
    <div><button @click="subway(1)">1 号线</button></div>
  </div>
  <script>
    new Vue({
      el: '#main',
      mounted() {
        var map = new BMap.Map("map", {enableMapClick: false});   // 创建地图实例
        var point = new BMap.Point(116.400551, 39.893524);        // 创建点坐标
        map.centerAndZoom(point, 12);             // 初始化地图，设置中心点坐标和地图级别

        map.enableScrollWheelZoom()
        map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}))
        
        // 画地铁线
        var busline = new BMap.BusLineSearch(map,{
          renderOptions:{map:map},
            onGetBusListComplete: function(result){
              if(result) {
                var fstLine = result.getBusListItem(0);
                busline.getBusLine(fstLine)
              }
            }
        })
        function busSearch(bus){
          busline.getBusList(bus)
          busline.setMarkersSetCallback(function(e) {
            for(var i =0; i<e.length; i++) {
              map.removeOverlay(e[i])
            }
          })
        }

      },
      methods: {
        subway(num) {
          // vue 配合百度地图，怎么给元素绑定事件，添加方法呢？
          console.log(num)
        }
      }
    })
  </script>
</body>
</html>

2 条回复 • 2017-10-20 11:54:29 +08:00

WenJimmy

2017-10-20 11:43:31 +08:00

不知道啥意思，point，map，buseline 放 data 里？

LeeSeoung

2017-10-20 11:54:29 +08:00

把 map 存在 data 里方法里就可以访问到了吧