vue-amap的简单demovue-amap的简单demovue-amap的简单demovue-amap的简单demo

<html>

<head>
  <title>demo | vue-amap</title>
  <meta charset="UTF-8">
</head>

<body>
  <div id="app">
    <el-amap ref="map" vid="amap" :center="center" :zoom="zoom" :events="events" :plugin="plugin">
      <!-- 在这里写其它地图要素组件 -->
      <el-amap-marker v-for="u in markers" :position="u.position" :offset="[-10,-26]" :events="events2">
      </el-amap-marker>
      <!-- <el-amap-marker :position="[121.5273285, 31.21515044]" :icon="icon"></el-amap-marker> -->
      <!-- <el-amap-text text="文本内容" :events="{init(o) { o.setStyle({'color': 'red', 'font-size' : '16px'}) }}"
        textAlign="left" verticalAlign="top" :position="[121.5273285, 31.41515044]" /> -->

      <el-amap-info-window closeWhenClickMap :offset="[-6, -34]" :events="{init(m) {
   m.on('open', () => isShow = true)
   m.on('close', () => isShow = false)
 }}" :position="[121.5273285, 31.41515044]" :visible="isShow">
        <div style="width: 300px;padding: 20px 0;">
          我是个弹窗
        </div>
      </el-amap-info-window>

    </el-amap>
  </div>
</body>
<!-- 先引入 Vue -->
<script src="vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue-amap/dist/index.js"></script>
<script>
  // 初始化高德地图的 key 和插件
  window.VueAMap.initAMapApiLoader({
    key: '5705b6e903e8158dceaac9baa75fabcc',
    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',
      'AMap.PolyEditor', 'AMap.CircleEditor'
    ],
    // 默认高德 sdk 版本为 1.4.4
    v: '1.4.4'
  });

  new Vue({
    el: '#app',
    data: function () {
      return {
        events2: {
          click: a => {
            console.log('a', a);
          }
        },
        isShow: true,
        markers: [{
            position: [121.5273285, 31.41515044]
          },
          {
            position: [121.5273286, 31.31515045]
          }
        ],
        //使用其他组件
        plugin: [{
            pName: 'Scale',
            events: {
              init(instance) {
                console.log(instance)
              }
            }
          },
          {
            pName: 'ToolBar',
            events: {
              init(instance) {
                console.log(instance)
              }
            }
          }
        ],
        center: [121.5273285, 31.21515044],
        zoom: 12,
        position: [121.5273285, 31.21515044],
        icon: '/huoche.png',
        events: {
          init(o) {
            console.log(o.getCenter());
          },
          zoomchange: (e) => {
            console.log(e);
          },
          zoomend: (e) => {
            //获取当前缩放zoom值
            console.log(this.$refs.map.$$getInstance().getZoom());
            console.log(e);
          },
          click: e => {
            alert('map clicked')
          }
        },
      }
    }
  });
</script>

</html>