Easymap-ui NPM

安装

npm i easymap-ui -S

引用

1. npm引用

1）在 main.js 引入并注册

import 'easymap-ui/lib/easymap-ui.css'
import EasymapUI from 'easymap-ui'
Vue.use(EasymapUI)

2）组件中引用

<template>
  <div class="hello">
    <easymap-message
      :message="message">
      easymap message inner
    </easymap-message>
    <easymap-button
      :theme="'blue'"
      @click="clickEvent()">确定
    </easymap-button>
    <easymap-icon
      :icon="'easymap-icon-add-location'"
      :size="'mini'"/>
    <easymap-map
      ref="map"
      :center="[105.943, 38.0815]"
      :zoom="4"
      @map-loaded="mapLoaded"
      class="map">
    </easymap-map>
  </div>
</template>

<script>

export default {
  name: 'Test',
  computed: {},
  data () {
    return {
      message: 'easymap123',
      map: null
    }
  },
  mounted () {},
  methods: {
    mapLoaded (map) {
      console.log(map)
      this.$refs.map.addOsmTile()
    },
    clickEvent () {
      alert(1234)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.map {
  width: 100%;
  height: 500px;
}
</style>

2. cdn使用

<!-- 引入Vue -->
<script src="https://unpkg.com/vue@2.5.22/dist/vue.min.js"></script>
<!-- 引入Element -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入easymap-ui -->
<link rel="stylesheet" href="./lib/easymap-ui.css">
<script src="./lib/easymap-ui.js"></script>

<div id="app">
  <easymap-message :message="message"> 我是一个兵，来自老百姓 </easymap-message>
  <easymap-button :theme="'red'">取消</easymap-button>
  <easymap-button :theme="'blue'">确定</easymap-button>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        message: ' easymap'
      }
    }
  });
</script>