vue（移动端）使用高德地图实现精准定位

目录

效果图

 前提准备

代码展示

---

效果图

两个页面

页面一（粗略定位）

点击城市进入页面二 （粗略定位），搜索框输入具体位置（以大连理工大学为例）

 点击大连理工大学，回到页面一，并展示精准位置

再次点击位置，进入页面二精准定位地图

 前提准备

一、vue项目

二、移动端配置（不配置也可用）

vue移动端适配

三、高德地图创建应用获取key及使用前配置

见如下文章，一、创建应用获取key，二、配置

vue移动端高德地图的使用及实现最简单的地图功能

代码展示

页面一（路由：path:"/home"）

页面二（路由：path:"/map"）

vuex(实现跨页面传递数据)

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cityinfo:{}
  },
  getters: {
  },
  mutations: {
    uptCityInfo(state,val){
      state.cityinfo=val;
    }

  },
  actions: {
  },
  modules: {
  }
})

使用别的方法跨页面传递数据，需要对页面一二获取与存入数据进行更改

路由根据自己实际情况更改