使用vue-amap进行省市定位

优点：可以直接集成到vue中，而且不需要配置跨域相关信息

使用vue-amap进行省市定位需要用到api插件中的定位插件，链接地址：vue-amap定位插件

在vue项目中使用

使用步骤：

1.安装

npm install vue-amap --save 或者 yarn add vue-amap

2.在.babelrc文件中配置如下信息

{ "presets": [ ["es2015", { "modules": false }] ] }

3.下载 babel-preset-es2015

npm install babel-preset-es2015 --save 或者 yarn add babel-es2015

4.在main.js中引入vue-amap并引用

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

// 初始化省市定位关键是在plugin中加入AMap.Geolocation

VueAMap.initAMapApiLoader({

    key: '你在高德地图注册拿到的key',
    plugin: [
        'AMap.Autocomplete', 
        'AMap.PlaceSearch', 
        'AMap.Scale', 
        'AMap.OverView', 
        'AMap.ToolBar', 
        'AMap.MapType', 
        'AMap.PolyEditor',
        'AMap.CircleEditor',
        'AMap.Geolocation'
    ],
    // 默认高德 sdk 版本为 1.4.4
    v: '1.4.4'
});

5.在页面中使用

<template>
    <div class="amap-page-container">
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"> </el-amap>
      <div class="toolbar">
        <span v-if="loaded">
          location: lng = {{ lng }} lat = {{ lat }}
        </span>
        <span v-else>正在定位</span>
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data() {
        let self = this;
        return {
          center: [121.59996, 31.197646],
          lng: 0,
          lat: 0,
          loaded: false,
          plugin: [{
            pName: 'Geolocation',
            events: {
              init(o) {
                // o 是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    // 如果key是企业的，还可以直接result.addressComponent获取省市，周边等信息
                    self.lng = result.position.lng;
                    self.lat = result.position.lat;
                    self.center = [self.lng, self.lat];
                    self.loaded = true;
                    self.$nextTick();
                  }
                });
              }
            }
          }]
        };
      }
    };
</script>

完！

来源：CSDN

作者：墨染丶倾城

链接：https://blog.csdn.net/weixin_40581330/article/details/81195878

标签

vue

vue-amap

plugin