zoukankan      html  css  js  c++  java
  • 项目中 vue与高德地图一起使用 (一)

     vue中使用高德地图的方式(这里介绍我自己知道的方式)

      (一). 第一种script引入

      第一步. script引入的方式,引入到index.html中,

      第二步. vue项目中build文件夹下的webpack.base.config.js中需要配置,写在最下面''node{}''中就可以

        externals: {
          'AMap': 'AMap',
          'Loca': 'Loca',
          'AMapUI': 'AMapUI'
        }

      第三步. 然后在项目中可以直接用 import AMap from AMap

      <style>

        #container{100%;height:500px;}

      </style>

      <template>

        <div id='container'></div>

      </template>

      <script>

      export default {

        data () {

          return {

            map: null

          }

        },

        mounted () {  

          this.map = new AMap.map('container(地图容器,id选择器)', {

            content: [] //中心点

            zooms: [5-11] // 地图缩放级别(做了限制),若不做限制则是 zoom: num

          })

        }

      }

      </script>

      (二).第二种 vue-amap 一套专门用于vue的高德地图插件

        需要npm仓库安装

        npm install vue-amap -S

        然后在main.js入口文件中引入高德地图,分发出去,让每个组件都可以使用,

        import AMap from 'vue-amap'

        Vue.use(AMap)

        // 初始化地图

        AMap.initAMapApiLoader({

          // 高德的key

          key: 'YOUR_KEY',

          // 插件集合

          plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']

        })

        然后在组件中直接调用插件中封装好的组件就可以了,例如

         <el-amap vid="amapDemo" :zoom="zoom" :center="center"></el-amap>

        详情参见官方文档 https://elemefe.github.io/vue-amap/

    此时地图就加载完成了,后面将写入高德地图中一些常用功能

  • 相关阅读:
    完全卸载 Oracle
    Windows 下 Oracle 10g 手工创建数据库
    zip & unzip 命令
    J2EE的13种核心技术规范
    Windows 8发行预览版序列号
    wget百度百科
    Application's Life Cycle
    当前网络存在的安全问题
    Ubuntu 11.10 更换 LightDM 开机登录画面
    tmp文件夹的默认权限
  • 原文地址:https://www.cnblogs.com/0915ty/p/9554213.html
Copyright © 2011-2022 走看看