目录
效果图
前提准备
代码展示
效果图
两个页面
页面一（粗略定位）
点击城市进入页面二 （粗略定位），搜索框输入具体位置（以大连理工大学为例）
点击大连理工大学，回到页面一，并展示精准位置
再次点击位置，进入页面二精准定位地图
前提准备
一、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.namereturn}// eslint-disable-next-line no-undefAMap.plugin('AMap.CitySearch', function () {// eslint-disable-next-line no-undefvar 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-undefAMap.plugin('AMap.AutoComplete', function(){var autoOptions = {//city 限定城市，默认全国city: that.cityText};// 实例化AutoComplete// eslint-disable-next-line no-undefvar autoComplete= new AMap.AutoComplete(autoOptions);// 根据关键字进行搜索// eslint-disable-next-line no-undefautoComplete.search(that.iptVal, function(status, result) {// 搜索成功时，result即是对应的匹配数据console.log(result);that.searchList=result.tips;})})}},mounted() {var that=this;//--------------------定位-------------------------// eslint-disable-next-line no-undefAMap.plugin('AMap.CitySearch', function () {// eslint-disable-next-line no-undefvar 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-undefvar map = new AMap.Map('box', {zoom:18,//级别center: [cityInfo.location.lng, cityInfo.location.lat],//中心点坐标});// eslint-disable-next-line no-undefvar 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-undefvar 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: {}})
使用别的方法跨页面传递数据，需要对页面一二获取与存入数据进行更改
路由根据自己实际情况更改
