效果图

两个页面

页面一（粗略定位）

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

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

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

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

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

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

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

前提准备

一、vue项目

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

vue移动端适配

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

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

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

代码展示

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

<template>
  <div>
    <router-link to="/map">{{ cityText }}</router-link>
  </div>
</template>

<script>

export default {
  data(){
    return{
      cityText:""
    }
  },
  mounted() {
    var that=this;
    if(that.$store.state.cityinfo.name){
      that.cityText=that.$store.state.cityinfo.name
      return
    }
    // eslint-disable-next-line no-undef
    AMap.plugin('AMap.CitySearch', function () {
      // eslint-disable-next-line no-undef
      var citySearch = new AMap.CitySearch()
      citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          // 查询成功，result即为当前所在城市信息
          that.cityText=result.city;
          console.log(result)
        }
      })
    })
  }
}
</script>

<style scoped>

</style>

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

<template>
<div class="body">
  <input type="text" v-model="iptVal">
  <ul>
    <li v-for="item in searchList" :key="item.id" @click="goHome(item)">{{item.name}}</li>
  </ul>
<!--  -------------------放地图的盒子-----------------------  -->
  <div id="box"></div>
</div>
</template>

<script>
import {
  mapMutations,
  // mapState
} from "vuex"
export default {
  data(){
    return {
      iptVal:"",
      cityText:"",
      searchList:[]
    };

  },
  watch:{
    //----------------------监听搜索框变化，获取有关数据-----------------
    iptVal(){
      var that=this;
      // eslint-disable-next-line no-undef
      AMap.plugin('AMap.AutoComplete', function(){
        var autoOptions = {
          //city 限定城市，默认全国
          city: that.cityText
        };
        // 实例化AutoComplete
        // eslint-disable-next-line no-undef
        var autoComplete= new AMap.AutoComplete(autoOptions);
        // 根据关键字进行搜索
        // eslint-disable-next-line no-undef
        autoComplete.search(that.iptVal, function(status, result) {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result);
          that.searchList=result.tips;
        })
      })
    }
  },
  mounted() {
    var that=this;
    //--------------------定位-------------------------
    // eslint-disable-next-line no-undef
    AMap.plugin('AMap.CitySearch', function () {
      // eslint-disable-next-line no-undef
      var citySearch = new AMap.CitySearch()
      citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          // 查询成功，result即为当前所在城市信息
          that.cityText=result.city;
          console.log(result)
        }
      })
    })
    //如果cityinfo里存在数据，地图显示cityinfo里的地点（上一次搜索点击的地点），否则展示定位市区（pc端定位不准）
    if(that.$store.state.cityinfo.name){
      var cityInfo=this.$store.state.cityinfo;
      // eslint-disable-next-line no-undef
      var map = new AMap.Map('box', {
        zoom:18,//级别
        center: [cityInfo.location.lng, cityInfo.location.lat],//中心点坐标
      });
      // eslint-disable-next-line no-undef
      var marker = new AMap.Marker({
        position:[cityInfo.location.lng, cityInfo.location.lat]//选择标记位置
      })
      map.add(marker);//将标记添加到地图
      return
    }else{
      // eslint-disable-next-line no-redeclare,no-unused-vars,no-undef
      var map = new AMap.Map('box', {
        zoom:8,//级别
      });
    }

  },
  methods:{
    //点击搜索的地点，将该地点存入cityInfo，并回到首页
    goHome(val){
      this.addCityINfo(val);
      this.$router.push("/home")
    },
    ...mapMutations({
      addCityINfo:"uptCityInfo"
    })
  }
}
</script>

<style scoped>
#box{
  width: 100%;
  height: 800px;
}
.body input{
  margin:50px;
  border: 1px solid #ccc;
  border-radius: 10px;
  height: 80px;
}
.body ul li{
  text-align: left;
  font-size: 20px;
  padding: 10px;
  border-bottom: 1px solid #cccccc;
  margin: 10px;
}
</style>

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: {
  }
})

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

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

秒客网

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

效果图

前提准备

代码展示

相关文章