效果图

两个页面

页面一（粗略定位）

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

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

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

前提准备

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

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

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

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

vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情
PC端高德地图使用步骤: 1.注册并登录高德开放平台获取 2.安装高德依赖(amap-jsapi-loader) 3.初始化地图 4.首次打开地图获取当前定位并标记 5.根据已有地址自动定位到指定地址 ...
VUE项目使用高德地图进行精准定位高德地图API
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.高德地图API 二.使用步骤 1.引入key 2.创建方法总结前言提示:以下是本篇文章正文内容,下面案例可供 ...
h5手机端或PC端利用高德地图获取当前定位位置
踩的坑写在前面: 想直接利用h5的特性来获取,但是一直报错,需要https服务,结果还去了阿里云搞ssl的域名卡住了,然后一直报未检测到DNS配置记录,如果你们服务是https就可以直接用这个了. 后 ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
vue 项目中使用高德地图
官方文档: 高德地图API官网高德地图2.0参考手册高德地图JS API 2.0 示例在项目中使用 vue-amap 高德地图JSAPI在Vue框架下使用高德地图在线 JS API 示例一. ...
vue传中文标点_vue项目引入第三方高德地图实现标点定位
vue项目中,高德地图使用. 引入vue中.异步导入vue中. gaoDe(key) { window.onApiLoaded = function () { var map = new AMap.M ...
手机端或PC端利用高德地图和腾讯地图获取用户当前位置信息
目录一.简介二.高德地图三.腾讯地图四.总结一.简介最近在项目中,有需要使用到获取用户当前地理位置信息的功能,获取当前用户位置保存到数据库中的场景,并且需要支持多种地图定位方式,我这里采用 ...
vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...

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

效果图

前提准备

代码展示

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

最新文章

热门文章