├── static
    └── .gitkeep
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   └── logo.png
    ├── router
    │   └── index.js
    ├── main.js
    ├── App.vue
    └── components
    │   └── Code.vue
├── README.md
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── .babelrc
├── index.html
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SunshineMibai/vuelocation/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Vue移动端地理定位组件
 2 | 
 3 | 基于高德地图
 4 | 
 5 | 可取到 省、市、区县、街道地址详情..
 6 | 
 7 | 方便各种项目所需地理定位功能...
 8 | 
 9 | 注：需申请高德秘钥
10 |    
11 |    npm install
12 |    
13 |    npm run dev
14 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserslist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Code from '@/components/Code'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'code',
12 |       component: Code
13 |     }
14 |   ]
15 | })
16 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-runtime"],
12 |   "env": {
13 |     "test": {
14 |       "presets": ["env", "stage-2"],
15 |       "plugins": ["istanbul"]
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 5 | 	<meta charset="utf-8">
 6 | 	<script src="http://webapi.amap.com/maps?v=1.4.6&key=key"></script>
 7 | 	<title>vue地理定位</title>
 8 | </head>
 9 | <body>
10 | 	<div id="app"></div>
11 | 	<!-- built files will be auto injected -->
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | /* eslint-disable no-new */
10 | new Vue({
11 |   el: '#app',
12 |   router,
13 |   template: '<App/>',
14 |   components: { App }
15 | })
16 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'app'
10 | }
11 | </script>
12 | 
13 | <style>
14 | #app {
15 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   text-align: center;
19 |   color: #2c3e50;
20 |   margin-top: 60px;
21 |   position:relative;
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: '/',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     autoOpenBrowser: true,
28 |     assetsSubDirectory: 'static',
29 |     assetsPublicPath: '/',
30 |     proxyTable: {},
31 |     // CSS Sourcemaps off by default because relative paths are "buggy"
32 |     // with this option, according to the CSS-Loader README
33 |     // (https://github.com/webpack/css-loader#sourcemaps)
34 |     // In our experience, they generally work as expected,
35 |     // just be aware of this issue when enabling this option.
36 |     cssSourceMap: false
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "store",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "kunyashaw <kunyashaw>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "start": "node build/dev-server.js",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "vue": "^2.4.2",
14 |     "vue-resource": "^1.3.4",
15 |     "vue-router": "^2.7.0"
16 |   },
17 |   "devDependencies": {
18 |     "autoprefixer": "^7.1.2",
19 |     "babel-core": "^6.22.1",
20 |     "babel-loader": "^7.1.1",
21 |     "babel-plugin-transform-runtime": "^6.22.0",
22 |     "babel-preset-env": "^1.3.2",
23 |     "babel-preset-stage-2": "^6.22.0",
24 |     "babel-register": "^6.22.0",
25 |     "chalk": "^2.0.1",
26 |     "connect-history-api-fallback": "^1.3.0",
27 |     "copy-webpack-plugin": "^4.0.1",
28 |     "css-loader": "^0.28.0",
29 |     "cssnano": "^3.10.0",
30 |     "eventsource-polyfill": "^0.9.6",
31 |     "express": "^4.14.1",
32 |     "extract-text-webpack-plugin": "^2.0.0",
33 |     "file-loader": "^0.11.1",
34 |     "friendly-errors-webpack-plugin": "^1.1.3",
35 |     "html-webpack-plugin": "^2.28.0",
36 |     "http-proxy-middleware": "^0.17.3",
37 |     "webpack-bundle-analyzer": "^2.2.1",
38 |     "semver": "^5.3.0",
39 |     "shelljs": "^0.7.6",
40 |     "opn": "^5.1.0",
41 |     "optimize-css-assets-webpack-plugin": "^2.0.0",
42 |     "ora": "^1.2.0",
43 |     "rimraf": "^2.6.0",
44 |     "url-loader": "^0.5.8",
45 |     "vue-loader": "^13.0.4",
46 |     "vue-style-loader": "^3.0.1",
47 |     "vue-template-compiler": "^2.4.2",
48 |     "webpack": "^2.6.1",
49 |     "webpack-dev-middleware": "^1.10.0",
50 |     "webpack-hot-middleware": "^2.18.0",
51 |     "webpack-merge": "^4.1.0"
52 |   },
53 |   "engines": {
54 |     "node": ">= 4.0.0",
55 |     "npm": ">= 3.0.0"
56 |   },
57 |   "browserslist": [
58 |     "> 1%",
59 |     "last 2 versions",
60 |     "not ie <= 8"
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------
/src/components/Code.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |    <div style='position:relative'>
  3 |       <h2>Vue地理定位</h2>
  4 |       <button @click='GetCode'>点击定位</button>
  5 |       <p>您当前所在的位置是</p>
  6 |       <div v-if='!loadingActive'>
  7 |          <p>省：{{provinceText}}</p>
  8 |          <p>市：{{cityText}}</p>
  9 |          <p>区/县：{{countyText}}</p>
 10 |          <p>详细地址：{{address}}</p>
 11 |       </div>
 12 |       <p v-if='loadingActive'>请稍后........</p>
 13 |    </div>
 14 | </div>
 15 | </template>
 16 | 
 17 | <script>
 18 |    export default {
 19 |       name: 'hello',
 20 |       data () {
 21 |          return {
 22 |             loadingActive: false,
 23 |             provinceText: '',
 24 |             cityText:'',
 25 |             countyText: '',
 26 |             address: '',
 27 |             areaText: ''
 28 |          }
 29 |       },
 30 |       methods:{
 31 |          GetCode(){
 32 |             this.loadingActive = true
 33 |             let map, geolocation,isRegeo=true;
 34 |             map = new AMap.Map('container', { resizeEnable: true});
 35 |             map.plugin('AMap.Geolocation', ()=>{
 36 |                geolocation = new AMap.Geolocation({
 37 |                   enableHighAccuracy: true,
 38 |                   timeout: 20000,
 39 |                   buttonOffset: new AMap.Pixel(10, 20),
 40 |                   zoomToAccuracy: true,
 41 |                   buttonPosition:'RB'
 42 |                });
 43 |                geolocation.getCurrentPosition();
 44 |                AMap.event.addListener(geolocation, 'complete', (data)=>{
 45 |                   console.log('定位成功===>')
 46 |                   console.log('经度：' + data.position.getLng())
 47 |                   console.log('纬度：' + data.position.getLat())
 48 |                   console.log('精度：' + data.accuracy + '米')
 49 |                   console.log('是否经过偏移：' + (data.isConverted ? '是' : '否'))
 50 |                   if(isRegeo){
 51 |                      this.regeocoder([data.position.getLng(), data.position.getLat()],(result)=>{
 52 |                         console.log('定位地址------>>>' , result)
 53 |                         if(result){
 54 |                            this.areaText = '定位成功！'
 55 |                            setTimeout(()=>{
 56 |                               this.loadingActive = false
 57 |                            },1500)
 58 |                         }else{
 59 |                            this.areaText = '定位失败,请稍后再试!'
 60 |                            setTimeout(()=>{
 61 |                             this.loadingActive = false
 62 |                          },1500)
 63 |                         }
 64 |                         this.provinceText = result.province
 65 |                         if(result.city == ''){
 66 |                            this.cityText = result.province
 67 |                         }else{
 68 |                            this.cityText = result.city
 69 |                         }
 70 |                         this.countyText = result.district
 71 |                         this.address = result.address
 72 |                      })
 73 |                   }else{
 74 |                      complete(data.position.getLng(),data.position.getLat(),null)
 75 |                   }
 76 |                });
 77 |                AMap.event.addListener(geolocation, 'error',  (data)=>{
 78 |                   console.log('定位失败===>'+data.message)
 79 |                });
 80 |             });
 81 |          },
 82 |          regeocoder(lnglatXY,complete) {
 83 |             let resultInfo = {}
 84 |             let geocoder = new AMap.Geocoder({radius: 1000,extensions: "all"});
 85 |             geocoder.getAddress(lnglatXY, (status, result)=>{
 86 |                if (status === 'complete' && result.info === 'OK') {
 87 |                   let addressComponent = result.regeocode.addressComponent;
 88 |                   let aois = result.regeocode.aois;
 89 |                   let crosses = result.regeocode.crosses;
 90 |                   let pois = result.regeocode.pois;
 91 |                   let roads = result.regeocode.roads;
 92 |                   let address = result.regeocode.formattedAddress;
 93 |                   resultInfo.address = result.regeocode.formattedAddress;
 94 |                   resultInfo.province = addressComponent.province;
 95 |                   resultInfo.city = addressComponent.city;
 96 |                   resultInfo.citycode = addressComponent.citycode;
 97 |                   resultInfo.district = addressComponent.district;
 98 |                   resultInfo.adcode = addressComponent.adcode;
 99 |                   resultInfo.township = addressComponent.township;
100 |                   resultInfo.street = addressComponent.street;
101 |                   resultInfo.streetNumber = addressComponent.streetNumber;
102 |                   resultInfo.neighborhood = addressComponent.neighborhood;
103 |                   resultInfo.neighborhoodType = addressComponent.neighborhoodType;
104 |                   resultInfo.building = addressComponent.building;
105 |                   complete(resultInfo)
106 |                }
107 |             })
108 |          } 
109 |       }
110 |    }
111 | </script>
112 | <style scoped>
113 |    span{
114 |       color: #FEB101;
115 |    }
116 |    button{
117 |       background: #FEB101;
118 |       color: #fff;
119 |       height: 40px;
120 |       width: 100px;
121 |       border:none;
122 |       border-radius: 5px;
123 |       outline: none;
124 |    }
125 |    button:active{
126 |       opacity: 0.8;
127 |    }
128 | </style>
129 | 


--------------------------------------------------------------------------------