vue-amap地圖組件的使用

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

安裝

npm install -S vue-amap

使用文檔

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

使用方法

<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>