vue-amap_vue-amap文档 - CSDN
精华内容
参与话题
  • VUE——vue-amap简单使用

    万次阅读 热门讨论 2018-06-26 16:06:34
    一、 down一个vue webpack的模板vue init webpack vueamap根据提示完成模板下载,此处我的项目中选择router为yes 其他测试插件全为no vueamap为文件夹名称模板下载后 安装依赖cnpm install依赖安装完成后 执行开发...

    一、 down一个vue webpack的模板

    vue init webpack vueamap
    根据提示完成模板下载,此处我的项目中选择router为yes 其他测试插件全为no  vueamap为文件夹名称

    模板下载后 安装依赖
    cnpm install

    依赖安装完成后 执行开发环境

    npm run dev

    若提示在"localhost:8080"上查看效果,在浏览器上查看效果,若出现VUE效果 则模板下载成功

    二、 安装vue-amap

    安装vue-amap

    cnpm install vue-amap --save

    安装完成后,main.js文件中引入

    import VueAMap from "vue-amap";
    Vue.use(VueAMap);

    初始化高德地图,此处需要有一个KEY,可以到高德地图平台上去申请.

    初始化高德地图的key与插件

    VueAMap.initAMapApiLoader({
    key: "e1dedc6bdd765d46693986ff7ff969f4",
    plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.MapType", //类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", //编辑 折线多,边形
    "AMap.CircleEditor", //圆形编辑器插件
    "AMap.Geolocation" //定位控件,用来获取和展示用户主机所在的经纬度位置
    ],
    uiVersion: "1.0"
    });

    三、 使用

    下面开始正式运用此组件库
    注:后续所用到的配置并非全面配置,若有不懂或想详细了解,
    请移步vue-amap文档:vue-amap文档
    文档介绍比较简单,建议到高德官方查看参考手册对照使用

    高德参考手册:参考手册

    1,构建地图

    模板:

    <div class="amap-wrapper">
    <el-amap class="amap-box" vid="map"
    :zoom="zoom"
    :center="center">
    </el-amap>
    </div>

    data中数据:

    zoom:16,
    center:[121.406051,31.179695],

    保存后,浏览器中运行,效果图如下:







    2,添加标注点(此处以地图的center为位置点添加)

    模板:
    <div class="amap-wrapper">
    <el-amap vid="amapDemo"
    :center="center"
    :zoom="zoom"
    class="amap-demo">
    <el-amap-marker vid="marker"
    :position="center"
    :label="label"
    >
    </el-amap-marker>
    </el-amap>
    </div>
    增加一条label数据,作为该点的介绍使用 ,可参照文档自行决定是否添加
    label:{
    content:'钦汇园',
    offset:[10,12]
    },
    保存后结果如下图 marker已经加载了


    3,添加圆形区域 (此处依旧以中心点为圆心 半径为100)
    注意:添加圆形区域时,要在初始化插件里初始化"AMap.CircleEditor",否则会报错

    模板:
    <div class="amap-wrapper">
    <el-amap vid="amapDemo"
    :center="center"
    :zoom="zoom"
    class="amap-demo">
    <el-amap-marker vid="marker"
    :position="center"
    :label="label"
    >
    </el-amap-marker>
    <el-amap-circle vid="circle"
    :center="center"
    :radius="radius"
    fill-opacity="0.2"
    strokeColor="#38f"
    strokeOpacity="0.8"
    strokeWeight="1"
    fillColor="#38f"
    >
    </el-amap-circle>
    </el-amap>
    </div>
    拓展:动态更改圆形区域的半径,可用于设置范围
    此处我以“精度++”按钮为例,每点击一次半径加10

    data数据:

    radius:100

    增加事件:

    addRadius(){
    this.radius+=10;
    }

    PS:添加其他覆盖物,如折线,图片,多边形等,用法与此类似,参照官方文档进行使用即可

    效果图如下:



    3,使用插件

    只用插件时,一定要在前面initAMapApiLoader里面进行初始化,否则会报错

    模板:

    <div class="amap-wrapper">
    <el-amap class="amap-box" vid="map"
    :zoom="zoom"
    :center="center"
    :plugin="plugin">
    <el-amap-marker vid="marker"
    :position="center"
    :label="label"
    >
    </el-amap-marker>
    <el-amap-circle vid="circle"
    :center="center"
    :radius="radius"
    fill-opacity="0.2"
    strokeColor="#38f"
    strokeOpacity="0.8"
    strokeWeight="1"
    fillColor="#38f"
    >
    </el-amap-circle>
    </el-amap>
    </div>

    data里添加插件数据:

    plugin: [
    {
    pName: 'ToolBar',//工具条插件
    position:'LB',
    },
    {
    pName: 'MapType',//卫星与地图切换
    defaultType: 0,
    showTraffic:true,//实时交通图层
    },
    {
    pName:'OverView',
    //isOpen:true//鹰眼是否打开
    },
    {
    pName:'Scale'
    },
    {
    pName:'Geolocation',//定位插件
    showMarker:false,
    events:{
    init(o){
    //定位成功 自动将marker和circle移到定位点
    o.getCurrentPosition((status, result) => {
    console.log(result);
    vm.center=[result.position.lng,result.position.lat]
    });
    }
    }
    }
    ]

    效果图如下:



    全部代码如下:

    <template>
    <div>
    <p>{{msg}}</p>
    <button @click="addRadius">精度++</button>
    <hr>
    <div class="amap-wrapper">
    <el-amap class="amap-box" vid="map"
    :zoom="zoom"
    :center="center"
    :plugin="plugin">
    <el-amap-marker vid="marker"
    :position="center"
    :label="label"
    >
    </el-amap-marker>
    <el-amap-circle vid="circle"
    :center="center"
    :radius="radius"
    fill-opacity="0.2"
    strokeColor="#38f"
    strokeOpacity="0.8"
    strokeWeight="1"
    fillColor="#38f"
    >
    </el-amap-circle>
    </el-amap>
    </div>
    </div>
    </template>
    <script>
    export default {
    name:'home',
    data(){
    let vm=this;
    return{
    msg:'vue-amap demo',
    zoom:16,
    center:[121.406051,31.179695],
    label:{
    content:'钦汇园',
    offset:[10,12]
    },
    radius:100,
    plugin: [
    {
    pName: 'ToolBar',//工具条插件
    position:'LB',
    },
    {
    pName: 'MapType',//卫星与地图切换
    defaultType: 0,
    showTraffic:true,//实时交通图层
    },
    {
    pName:'OverView',
    //isOpen:true//鹰眼是否打开
    },
    {
    pName:'Scale'
    },
    {
    pName:'Geolocation',//定位插件
    showMarker:false,
    events:{
    init(o){
    //定位成功 自动将marker和circle移到定位点
    o.getCurrentPosition((status, result) => {
    console.log(result);
    vm.center=[result.position.lng,result.position.lat]
    });
    }
    }
    }
    ]
    }
    },
    methods:{
    addRadius(){
    this.radius+=10;
    }
    }
    }
    </script>
    <style scoped>
    hr{
    border-color: red;
    border-style: dashed;
    }
    .amap-wrapper{
    height: 300px;
    }
    </style>





    展开全文
  • vue-amap详细使用教程

    千次阅读 2019-09-25 04:09:34
    在antd pro内使用vue-amap,实现地图和坐标点。 1,安装 npm install vue-amap --save 2,在main,js内引入 import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: '...

    在antd pro内使用vue-amap,实现地图和坐标点。

    1,安装

    npm install vue-amap --save

    2,在main,js内引入

    import VueAMap from 'vue-amap';
    
    Vue.use(VueAMap);
    VueAMap.initAMapApiLoader({
      key: 'YOUR_KEY',
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
      v: '1.4.4'
    });

    3.在vue中使用,template

    <template>
      <div id="app">
        <div class="amap-wrapper">
          <el-amap
            ref="map"
            :vid="'amapDemo'"
            :center="center"
            :zoom="zoom"
            :plugin="plugin"
            :events="events"
            class="amap-demo"
          >
            <el-amap-marker v-for="u in markers" :position="u.position"></el-amap-marker>
            <el-amap-marker :position="[121.5273285, 31.21515044]" :icon="icon"></el-amap-marker>
          </el-amap>
        </div>
      </div>
    </template>

    script

    <script>
    export default {
      data() {
        return {
          center: [121.5273285, 31.21515044],
          zoom: 12,
          position: [121.5273285, 31.21515044],
          icon: '/huoche.png',
          events: {
            init(o){
              console.log(o.getCenter());
            },
            zoomchange: (e) => {
                console.log(e);
            },  
            zoomend: (e) => {
            //获取当前缩放zoom值 console.log(
    this.$refs.map.$$getInstance().getZoom()); console.log(e); }, click: e => { alert('map clicked') } }, markers: [ { position: [121.5273285, 31.41515044] }, { position: [121.5273286, 31.31515045] } ],
    //使用其他组件 plugin: [ { pName:
    'Scale', events: { init(instance) { console.log(instance) } } }, { pName: 'ToolBar', events: { init(instance) { console.log(instance) } } } ] } }, } </script>

     

    转载于:https://www.cnblogs.com/blog-zy/p/11504683.html

    展开全文
  • 业务需求: 1.... 2.... ...1. vue-amap能够抛开高德原生 SDK 覆盖大多数场景,但对于部分定制化程度较高的场景而言,可能还是需要引入高德原生 SDK 来支持。这章将介绍如何在 vue-amap 中使用高德...

    业务需求1. 点击地图获取经纬度及地址;

                       2. 输入内容搜索获取经纬度及地址;

    开始: 

    使用前

    可以先查阅官网: vue-amap 

    其中比较重要的: 

    1. vue-amap 能够抛开高德原生 SDK 覆盖大多数场景,但对于部分定制化程度较高的场景而言,可能还是需要引入高德原生 SDK 来支持。这章将介绍如何在 vue-amap 中使用高德 SDK。

    实例方式

    对于大多数 vue-amap 组件,都有 init 这个 event,参数为高德的实例,通过这样暴露高德实例的方式,开发者能够非常自由地将原生 SDK 和 vue-amap 结合起来使用。

    这里以 el-amap 组件举例。el-amap 比较特殊,它同时还支持一个 amap-manager 属性,通过这个属性,可以在任何地方拿到高德原生 AMap.Map 实例。下面的例子,将介绍两种方式的使用。

    若涉及到高德原生 AMap 需要注意的点:

    • 确保 vue-amap 的导入名不是 AMap,推荐 import VueAMap from 'vue-amap' 避免和高德全局的 AMap 冲突
    • 若 eslint 报错 AMap is undefined 之类的错误。请将 AMap 配置到 .eslintrc 的 globals 中。

     

    1. 安装 

    2. main.js 中引入

    import VueAMap from 'vue-amap'
    Vue.use(VueAMap)
    VueAMap.initAMapApiLoader({
      key: 'd7918df******************a5',
      plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
      v: '1.4.4',
      uiVersion: '1.0'
    })

    key: 高德的key(自己申请)

    plugin: 引用的插件(根据需要引入)

    v: 高德SDK 版本

    uiVersion:UI库 版本

    3. 在map.vue 中调用

    template

    <template lang="html">
      <div class="container">
          <div class="search-box">
            <input
              v-model="searchKey"
              type="search"
              id="search">
            <button @click="searchByHand">搜索</button>
            <div class="tip-box" id="searchTip"></div>
          </div>
          <!--
            amap-manager: 地图管理对象
            vid:地图容器节点的ID
            zooms: 地图显示的缩放级别范围,在PC上,默认范围[3,18],取值范围[3-18];在移动设备上,默认范围[3-19],取值范围[3-19]
            center: 地图中心点坐标值
            plugin:地图使用的插件
            events: 事件
          -->
          <el-amap class="amap-box"
            :amap-manager="amapManager"
            :vid="'amap-vue'"
            :zoom="zoom"
            :plugin="plugin"
            :center="center"
            :events="events"
          >
            <!-- 标记 -->
            <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
          </el-amap>
        </div>
    </template>

    amap-manager: 地图管理对象
    vid:地图容器节点的ID
    zooms: 地图显示的缩放级别范围,在PC上,默认范围[3,18],取值范围[3-18];在移动设备上,默认范围[3-19],取值范围[3-19]
    center: 地图中心点坐标值
    plugin:地图使用的插件
    events: 事件

    JavaScript

    <script>
    import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'
    let amapManager = new AMapManager()
    export default {
      data () {
        let self = this
        return {
          address: null,
          searchKey: '',
          amapManager,
          markers: [],
          searchOption: {
            city: '全国',
            citylimit: true
          },
          center: [121.329402, 31.228667],
          zoom: 17,
          lng: 0,
          lat: 0,
          loaded: false,
          events: {
            init () {
              lazyAMapApiLoaderInstance.load().then(() => {
                self.initSearch()
              })
            },
            // 点击获取地址的数据
            click (e) {
              // console.log(e)
              self.markers = []
              let { lng, lat } = e.lnglat
              self.lng = lng
              self.lat = lat
              self.center = [lng, lat]
              self.markers.push([lng, lat])
              // 这里通过高德 SDK 完成。
              let geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: 'all'
              })
              geocoder.getAddress([lng, lat], function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    console.log(result.regeocode.formattedAddress)
                    self.address = result.regeocode.formattedAddress
                    self.searchKey = result.regeocode.formattedAddress
                    self.$nextTick()
                  }
                }
              })
            }
          },
          // 一些工具插件
          plugin: [
            // {
            //   pName: 'Geocoder',
            //   events: {
            //     init (o) {
            //       console.log(o.getAddress())
            //     }
            //   }
            // },
            {
              // 定位
              pName: 'Geolocation',
              events: {
                init (o) {
                  // o是高德地图定位插件实例
                  o.getCurrentPosition((status, result) => {
                    if (result && result.position) {
                      // 设置经度
                      self.lng = result.position.lng
                      // 设置维度
                      self.lat = result.position.lat
                      // 设置坐标
                      self.center = [self.lng, self.lat]
                      self.markers.push([self.lng, self.lat])
                      // load
                      self.loaded = true
                      // 页面渲染好后
                      self.$nextTick()
                    }
                  })
                }
              }
            },
            {
              // 工具栏
              pName: 'ToolBar',
              events: {
                init (instance) {
                  // console.log(instance);
                }
              }
            },
            {
              // 鹰眼
              pName: 'OverView',
              events: {
                init (instance) {
                  // console.log(instance);
                }
              }
            },
            {
              // 地图类型
              pName: 'MapType',
              defaultType: 0,
              events: {
                init (instance) {
                  // console.log(instance);
                }
              }
            },
            {
              // 搜索
              pName: 'PlaceSearch',
              events: {
                init (instance) {
                  // console.log(instance)
                }
              }
            }
          ]
        }
      },
      methods: {
        initSearch () {
          let vm = this
          let map = this.amapManager.getMap()
          AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
            var poiPicker = new PoiPicker({
              input: 'search',
              placeSearchOptions: {
                map: map,
                pageSize: 10
              },
              suggestContainer: 'searchTip',
              searchResultsContainer: 'searchTip'
            })
            vm.poiPicker = poiPicker
            // 监听poi选中信息
            poiPicker.on('poiPicked', function (poiResult) {
              // console.log(poiResult)
              let source = poiResult.source
              let poi = poiResult.item
              if (source !== 'search') {
                poiPicker.searchByKeyword(poi.name)
              } else {
                poiPicker.clearSearchResults()
                vm.markers = []
                let lng = poi.location.lng
                let lat = poi.location.lat
                let address = poi.cityname + poi.adname + poi.name
                vm.center = [lng, lat]
                vm.markers.push([lng, lat])
                vm.lng = lng
                vm.lat = lat
                vm.address = address
                vm.searchKey = address
              }
            })
          })
        },
        searchByHand () {
          if (this.searchKey !== '') {
            this.poiPicker.searchByKeyword(this.searchKey)
          }
        }
      }
    }
    </script>

    css

    <style lang="css">
    .container {
      width: 700px;
      height: 500px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      border: 1px solid #999;
    }
    .search-box {
      position: absolute;
      z-index: 5;
      width: 70%;
      left: 13%;
      top: 10px;
      height: 30px;
    }
    .search-box input {
      float: left;
      width: 80%;
      height: 100%;
      border: 1px solid #30ccc1;
      padding: 0 8px;
      outline: none;
    }
    .search-box button {
      float: left;
      width: 20%;
      height: 100%;
      background: #30ccc1;
      border: 1px solid #30ccc1;
      color: #fff;
      outline: none;
    }
    .tip-box {
      width: 100%;
      max-height:260px;
      position: absolute;
      top: 30px;
      overflow-y: auto;
      background-color: #fff;
    }
    </style>

    问题: 

    出现报错

    解决:

    在.eslintrc.js 中引入 globals

    globals: {
        'AMap': false,
        'AMapUI': false
      },

    然后重启: cnpm run dev (本人用的是cnpm);

    完成

    完整代码: github

    展开全文
  • vue-amap的使用

    2020-10-14 16:47:36
    vue-amap的使用一、效果图二、安装三、使用 一、效果图 二、安装 第一步:安装 npm install vue-amap --save 第二步:入口main.js文件配置 import VueAMap from "vue-amap"; Vue.use(VueAMap); VueAMap....

    一、效果图

    在这里插入图片描述

    二、安装

    第一步:安装
    npm install vue-amap --save
    第二步:入口main.js文件配置

    
    import VueAMap from "vue-amap";
    
    Vue.use(VueAMap);
    
    VueAMap.initAMapApiLoader({
     key: "95fa72137f4263f8e64ae01f766ad09c",
     plugin: [
       "AMap.Autocomplete",
       "AMap.PlaceSearch",
       "AMap.Scale",
       "AMap.OverView",
       "AMap.ToolBar",
       "AMap.MapType",
       "AMap.PolyEditor",
       "AMap.CircleEditor",
       "AMap.Geocoder"
     ],
     // 默认高德 sdk 版本为 1.4.4
     v: "1.4.4"
    });
    
    

    三、使用

    <template>
    <div>
     <el-dialog
       title="定位地点"
       :visible.sync="showDialog"
       width="1200px"
       :before-close="handleClose"
       :close-on-click-modal="false"
     >
       <div>
         <el-amap-search-box
           class="search-box"
           :search-option="searchOption"
           :on-search-result="onSearchResult"
         ></el-amap-search-box>
         <el-amap
           class="vueAmap"
           vid="amapEdit"
           :zoom="amap.zoom"
           :center="amap.center"
           :plugin="amap.plugin"
           :events="amap.events"
         >
           <el-amap-marker
             v-for="(marker, index) in amap.markers"
             :key="'marker' + index"
             :position="marker.position"
           >
           </el-amap-marker>
           <el-amap-text
             v-for="(marker, index) in amap.markers"
             :key="'text' + index"
             :text="marker.text"
             :offset="marker.offset"
             :position="marker.position"
           ></el-amap-text>
         </el-amap>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submit">
           确 定
         </el-button>
         <el-button @click="handleClose">关 闭</el-button>
       </span>
     </el-dialog>
    </div>
    </template>
    
    <script>
    function getFormData() {
    return {
     lat: "27.644778",
     lon: "106.893565",
     orgAddr: "区政府"
    };
    }
    export default {
    data() {
     const vm = this;
     return {
       showDialog: false,
       // form对象
       dataForm: getFormData(),
       // 地图搜索对象
       searchOption: {
         city: "",
         citylimit: true
       },
       // 地图对象
       amap: {
         zoom: 16,
         center: [106.893565, 27.644778],
         events: {
           click(e) {
             let { lng, lat } = e.lnglat;
             self.lng = lng;
             self.lat = lat;
             // 这里通过高德 SDK 完成。
             var geocoder = new AMap.Geocoder({
               radius: 1000,
               extensions: "all"
             });
             geocoder.getAddress([lng, lat], function(status, result) {
               if (status === "complete" && result.info === "OK") {
                 if (result && result.regeocode) {
                   vm.dataForm.orgAddr = result.regeocode.formattedAddress;
                   vm.dataForm.lat = lat ? lat.toString() : "";
                   vm.dataForm.lon = lng ? lng.toString() : "";
                   vm.amap.markers = [];
                   const obj = {
                     position: [lng, lat],
                     text: result.regeocode.formattedAddress,
                     offset: [0, 30]
                   };
                   vm.amap.markers.push(obj);
                 }
               }
             });
           }
         },
         plugin: ["ToolBar"],
         markers: [
           {
             position: [106.893565, 27.644778],
             text: "区政府",
             offset: [0, 30]
           }
         ]
       }
     };
    },
    methods: {
     // 地图搜索回调
     onSearchResult(pois) {
       const vm = this;
       vm.amap.markers = [];
       let latSum = 0;
       let lngSum = 0;
       if (pois.length > 0) {
         pois.forEach((poi, index) => {
           let { lng, lat } = poi;
           if (index === 0) {
             lngSum = lng;
             latSum = lat;
             const obj = {
               position: [poi.lng, poi.lat],
               text: poi.name,
               offset: [0, 30]
             };
             vm.amap.markers.push(obj);
             vm.dataForm.orgAddr = poi.name;
             vm.dataForm.lat = poi.lat ? poi.lat.toString() : "";
             vm.dataForm.lon = poi.lng ? poi.lng.toString() : "";
           }
         });
         vm.amap.center = [lngSum, latSum];
       }
     },
     // 打开弹窗
     open(data) {
       const vm = this;
       vm.dataForm = getFormData();
       if (data) {
         vm.amap.markers = [
           {
             position: [data.lon, data.lat],
             text: data.addr,
             offset: [0, 30]
           }
         ];
         vm.amap.center = [data.lon, data.lat];
         /*vm.dataForm.lon = data.lon;
         vm.dataForm.lat = data.lat;
         vm.dataForm.orgAddr = data.addr;
         vm.amap.center = [data.lon, data.lat];*/
       }
       vm.showDialog = true;
     },
     // 关闭弹窗
     handleClose() {
       const vm = this;
       vm.showDialog = false;
       vm.dataForm = getFormData();
       vm.amap.markers = [];
       const obj = {
         position: [vm.dataForm.lon, vm.dataForm.lat],
         text: vm.dataForm.orgAddr,
         offset: [0, 30]
       };
       vm.amap.markers.push(obj);
       vm.amap.center = [vm.dataForm.lon, vm.dataForm.lat];
       //vm.$refs.dataForm.resetFields();
     },
     // 提交方法
     submit() {
       const vm = this;
       vm.$emit("map", vm.amap.markers);
       vm.handleClose();
     }
    }
    };
    </script>
    
    <style>
    .search-box {
    position: absolute;
    right: 20px !important;
    top: 100px !important;
    }
    </style>
    
    
    展开全文
  • 使用vue-amap

    千次阅读 2019-05-06 19:04:44
    (图一) 页面预览 :当前位置(红色 图标处) (图二)页面预览: 文字设置 + 弹框设置 (图三) 搜索插件 + toolBar 插件 (图四) 时间轴插件 &lt;template&...amap-page-container&...el-amap-search-box c...
  • 通过vue-amapvue项目中使用高德地图

    万次阅读 热门讨论 2020-03-20 11:09:23
    有些项目我们需要用到地图相关的能力,当我们在vue项目中需要使用高德地图的时候,vue-amap是个比较好的选择,vue-amap是一套基于Vue 2.0和高德地图的地图组件,它帮你封装了一遍,相对直接使用高德地图,它使用起来...
  • vue使用vue-amap

    2020-10-19 17:05:21
    vue-amap是一套基于Vue 2.0和高德地图的地图组件。 安装: cnpm install -S vue-amap 在main.js配置 import AMap from 'vue-amap' Vue.use(AMap) AMap.initAMapApiLoader({ key: '自己的key值', plugin: ['AMap....
  • 高德地图VueAPI(vue-amap)学习记录

    万次阅读 2017-06-03 17:48:59
    最近想测试一下地图插件,就先试了一下引用高德地图,鉴于我主要在学习Node.js和Vue.js,所以先找了一下高德地图的Vue插件,vue-amap,这个插件很不错的一点就是,有一个不错的文档。具体使用方法并不难。
  • 在main.js中initAMapApiLoader中写入:AMap.Geocoder,注意 官方文档中有提示: 所以插件中使用的依然是AMap,与导入名无关 不然会报错,Geocoder无法使用。 定位文档 照着文档写就行 注意在main.js中注...
  • vue 使用 vue-amap 生成高德地图

    万次阅读 2020-05-28 16:04:25
    首先说一下,什么是vue-amapvue-amap 是 基于 Vue 2.x 与高德的地图组件,数据状态与地图状态单向绑定,开发者无需关心地图的具体操作 vue-amap 官网 ...
  • 项目简介前往项目首页 ...vue-amap ...vue-amap是基于Vue 2.0和高德地图的地图组件。...npm install -S vue-amap ...引入vue-amap ...import AMap from 'vue-amap'; Vue.use(AMap); // 初始化vue-amap AMap.ini
  • vue项目中使用vue-amap进行定位功能

    千次阅读 2018-11-26 21:39:41
    vue-amap定位 安装 :npm install vue-amap --save 注册以及获取key 在官网进行注册 https://lbs.amap.com/ 在控制台的应用管理/我的应用中添加应用,添加key 配置 :main.js中引入并配置,plugin根据自己需要...
  • vuemap用法

    万次阅读 热门讨论 2018-08-14 15:45:16
    后端给我返回格式是这样 [‘2018-8-14’, ‘2018-8-14’] 但是我是想要 {date: “2018/08/13”, title: “”} {date: “2018/08/14”, title: “”} ... let newArr = arr.map(val =&gt; { ...
  • npm install vue-amap --save 第二步:在main.js中 import AMap from "vue-amap"; Vue.use(AMap); AMap.initAMapApiLoader({ key: "开发者申请的key", plugin: ["AMap.Scale", ...
  • 在坐标点上方显示该点的一些信息,使用el-amap-text组件, 该组件需要位于el-amap-marker之下,在maker属性中增加text和offset text是显示的文字,offset是调整文本框出现位置的偏移量...
  • vue结合vue-amap调用高德地图api

    千次阅读 2019-06-04 18:52:38
    2、npm安装vue-amap 3、在main.js中引入并初始化 4、以获取周边信息为例,PlaceSearch的官方文档 5、展示结果 6、上面方式是根据设定的经纬度获取周边信息,如果想实时获取当前位置可以这样,在data中添加一个...
  • vue2调用高德地图(Amap)及其UI组件

    万次阅读 2018-08-30 20:24:30
    vue调用高德地图只需四步,具体如下: 1、申请高德KEY。方法自行百度 http://lbs.amap.com/dev/key/app; 2、在项目的index.js文件中引入高德地图JS_API,如下: 3、在项目build/webpack.base.conf.js中加入...
  • vue-amap基于高德地图的vue组件使用

    千次阅读 2018-06-01 18:03:01
    1. 文档https://elemefe.github.io/vue-amap/#/2. 安装`npm install vue... 引入地图在main.js中引入`import AMap from 'vue-amap';Vue.use(AMap);AMap.initAMapApiLoader({ key: 'your amap key', plugin: ['AMap...
  • 有几个注意事项是,我是2017-6-15开发的,目前的vue-amap api太简陋了,而且定制化很恼火,所以建议集成vue-amap后,再结合官方文档。随便值得高兴的是,终于摆脱了百度地图恶心的api,不需要头部直接引用百度地图...
  • vue2.0组件如何使用高德地图

    千次阅读 2017-10-10 15:10:03
    vue2.0直接使用高德地图 html> html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> script src="vue.js">script> script type="text/javascript" src="http://webapi.amap.com/maps?
1 2 3 4 5 ... 20
收藏数 20,850
精华内容 8,340
关键字:

vue-amap