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

2017-10-20 11:33:24 +08:00
 yantianqi
<!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>
3663 次点击
所在节点    程序员
2 条回复
WenJimmy
2017-10-20 11:43:31 +08:00
不知道啥意思,point,map,buseline 放 data 里?
LeeSeoung
2017-10-20 11:54:29 +08:00
把 map 存在 data 里 方法里就可以访问到了吧

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/399194

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX