vue引入vue-amap

高德全局引入vue

一、安装

1、npm install vue-amap --save

2、在main.js中引入

import VueAMap from 'vue-amap'

Vue.use(VueAMap)

VueAMap.initAMapApiLoader({
  key: '你的key',
  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'
})

二、在组件中用

 

 

1、HTML

  :plugin="plugin"
  :center="center"
  :zoom="zoom"
  class="amap-demo">
                    :position="marker.position"
                  :key="marker.id"
                  :events="marker.events"
                  :icon="'/static/police.png'">
  
                         :position="window.position"
                       :visible="window.visible"
                       :content="window.content"
                       :offset="window.offset">
  

2、script

data：

zoom: 12,
center: [113.883107, 22.590993],

// 数据储存

pointMarker:[],

markers: [],
windows: [],
window: '',
plugin: [{
  pName: 'ToolBar',
  events: {
    init (instance) {
      // console.log(instance)
    }
  }
}]

methods:

point () {
  let markers = []
  let windows = []
  let that = this
  this.pointMarker.forEach((item, index) => {
    markers.push({
      position: [item.lng, item.lat],
      icon: item.icon,
      events: {
        click () {
          that.windows.forEach(window => {
            window.visible = false
          })
          that.window = that.windows[index]
          that.$nextTick(() => {
            that.window.visible = true
          })
        }
      }
    })
    windows.push({
      position: [item.lng, item.lat],
      content: '
' + '
' +
        '
' + '烟感报警-方形测试' + '
' +
        '报警状态：' + item.status + '
' +
        '报警时间：' + item.time + '
' +
        '联系人：' + item.linkman + '
' +
        '联系电话：' + item.phone + '
' +
        '设备名称：' + item.equipment + '
' +
        '烟感环境温度：' + item.temp + '
' +
        '发现地址：' + item.site + '
' + '
' +
        '' + '查看视频' + '' + '
' + '
' + '
',
      offset: [5, -15],
      visible: false
    })
  })
  //  加窗体
  this.markers = markers
  // 加弹窗
  this.windows = windows
}



注意要给高度显示地图

.amap-demo{
  width: 100%;
  height: 775px;
}

 

转载于:https://www.cnblogs.com/luckyShuang/p/11527194.html