vue-amap地圖組件的使用

vue-amap是一套基於Vue 2.0和高德地圖的地圖組件。vue

安裝

npm install -S vue-amapgit

使用文檔

https://elemefe.github.io/vue-amapgithub

使用方法

<template>
    <div class="test">
      <div class="amap-wrapper map">
          <!--vid:marker對象id,zoomEnable:鼠標滾輪是否容許放大縮小-->
          <!--dragEnable:書否容許拖拽，zoom:地圖範圍-->
          <!--center:地圖中心-->
          <el-amap class="amap-box" :vid="'amap-vue'" :zoomEnable="maps.enable" :dragEnable="maps.enable" :zoom="maps.zoom" :center="maps.center">
            <!--position:標記中心，label:標記文本-->
            <!--clickable:是否容許點擊，events觸發事件-->
            <div v-for="mark in maps.markpoint">
                <el-amap-marker :position="mark.point" :label="mark.name" :clickable="maps.enableclick" :events="markerEvents">
                </el-amap-marker>
            </div>
          </el-amap>
        </div>
    </div>

</template>

<script> export default { name: "Test", data(){ return { maps:{ enable:false, enableclick:true, markevent:"click", zoom:4, center: [105, 35], markpoint:[ {"name":{"content":"深圳","offset":[20,20]},"point":[114.06, 22.52]}, ], }, markerEvents: { // 點擊事件 click(e) { self.this.$message.success("深圳") } } } }, created() { self.this = this } } </script>

<style scoped>
  /*地圖寬高*/ .amap-wrapper { width: 1000px; height: 400px; } </style>