低代码建站,百度公司招聘2022年最新招聘,建站工作室 网站建设工作室,企业建设网站个人总结报告系列文章目录 提示#xff1a;写完文章后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、安装高德地图二、在main.js中配置需要配置2个key值以及1个密钥 三、在页面中使用3.1 新建路由3.2新建vue页面3.2-1 index.vue3.2…系列文章目录 提示写完文章后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、安装高德地图二、在main.js中配置需要配置2个key值以及1个密钥 三、在页面中使用3.1 新建路由3.2新建vue页面3.2-1 index.vue3.2-2 main.vue 主页面显示 3.3 页面效果3.4 使用手机查看定位3.5 必须允许获取位置授权 总结关于插件关于定位常用定位方法 前言
如果没有现成的脚手架可以用我的教程需要看上中下三篇。 传送门 【Vue】Vue2创建移动端项目实战教程创建移动端项目保姆级教程设置axiosutils工具包vue.fonfig.js配置项
也可以直接拿现成的 vue-app 我按照我上面gitee中的包来操作
参考教程Vue高德地图API的使用
一、安装高德地图
npm i amap/amap-jsapi-loader --save如果是用我的脚手架还要npm i一遍其他依赖 二、在main.js中配置 需要配置2个key值以及1个密钥
Vue.prototype.mapJsKey ***************************; // jsApi
Vue.prototype.mapServiceKey ***********************; // 服务端
// 配置安全密钥
window._AMapSecurityConfig {securityJsCode: ***********************, //* 安全密钥
};web js端的变量叫mapJsKey 服务端的变量叫mapServiceKey 把上面的key放进去 后面有用 securityJsCode这个就是密钥存放jsApi的key值 三、在页面中使用
这里不作组件引入了直接在页面中使用 全部可以一键复制粘贴无须担心
3.1 新建路由
{path: /park,name: park,component: () import(../views/park/index.vue),children: [{path: main,name: parkMain,component: () import(../views/park/main.vue),meta: {title: 周边公园,keepAlive: false,},},],},3.2新建vue页面
3.2-1 index.vue
用来作为父级容器好控制路由的写法
templatedivkeep-aliverouter-view v-if$route.meta.keepAlive //keep-aliverouter-view v-if!$route.meta.keepAlive //div
/templatescript
export default {name: park,
};
/script
3.2-2 main.vue 主页面显示
页面所有内容过于简单我全部放在一起后续再一点点加功能
templatediv classcontainerdiv idMap classmap/div/div
/template
script
import AMapLoader from amap/amap-jsapi-loader;
export default {name: vinit,components: {},data() {return {map: null,position: [], // 当前经纬度locationInfo: {}, // 当前位置信息};},computed: {},watch: {},filters: {},created() { },mounted() {this.init();},methods: {init() {this.initMap();},initMap() {AMapLoader.load({key: this.mapJsKey, // 申请好的Web端开发者Key首次调用 load 时必填//2.0版本太卡了 所以使用的1.4.0版本 其插件也有不同 如ToolBarversion: 1.4.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15resizeEnable: true, // 定位到当前位置plugins: [AMap.ToolBar, //工具条AMap.Geolocation, //定位AMap.PlaceSearch, // poi搜索AMap.Scale, // 比例尺], // 需要使用的的插件列表如比例尺AMap.Scale等}).then((AMap) {this.map new AMap.Map(Map, {viewMode: 3D, //是否为3D地图模式zoom: 14, //初始化地图级别});this.map.addControl(new AMap.ToolBar()); // 工具条this.map.addControl(new AMap.Scale()); // 比例尺this.geolocation new AMap.Geolocation({//定位enableHighAccuracy: true, //是否使用高精度定位默认:truetimeout: 5000, //超过10秒后停止定位默认无穷大maximumAge: 0, //定位结果缓存0毫秒默认0convert: true, //自动偏移坐标偏移后的坐标为高德坐标默认trueshowButton: true, //显示定位按钮默认truebuttonPosition: RB, //定位按钮停靠位置默认LB左下角buttonOffset: new AMap.Pixel(60, 20), //定位按钮与设置的停靠位置的偏移量默认Pixel(10, 20)showMarker: true, //定位成功后在定位到的位置显示点标记默认trueshowCircle: true, //定位成功后用圆圈表示定位精度范围默认truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点默认truezoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见默认false});this.map.addControl(this.geolocation); //在地图上引入定位插件this.geolocation.getCurrentPosition((status, result) {if (status complete) {this.locationInfo result;// console.log(位置信息 complete: , result);// console.log(位置经纬度: , result.position);this.position [result.position.lng, result.position.lat];} else {console.log(位置信息 error: , result);}});}).catch((e) {console.log(e);});},},
};
/script
style scoped langscss
.container {background-color: #f4f4f4;height: 100vh;.map {height: 400px;}
}/style 3.3 页面效果
电脑是没有gps模块的所以并不能显示所在位置但是手机可以
3.4 使用手机查看定位
使用草料二维码将本地ip转为二维码用手机系统浏览器打开不要用微信、或者其他例如via浏览器。
草料二维码官网 如果嫌每次都要复制链接去转码比较麻烦可以下载它的插件安装到浏览器如下效果图
3.5 必须允许获取位置授权
为了隐私我缩小了视图。 总结
关于插件 需要用什么用addControl方法添加 传送门地图js 插件的使用
关于定位 这里需要注意的是我创建了插件可以不引入因为引入的这个是地图上的小圆点点击它可以把位置定位到当前来。如果你没有地图只需要13就可以获取到当前位置。 例如下图页面中不需要地图展示但是依旧需要获取当前位置经纬度用来计算距离。这个留在后面了
常用定位方法
this.geolocation new AMap.Geolocation({//定位enableHighAccuracy: true, //是否使用高精度定位默认:truetimeout: 5000, //超过10秒后停止定位默认无穷大maximumAge: 0, //定位结果缓存0毫秒默认0convert: true, //自动偏移坐标偏移后的坐标为高德坐标默认trueshowButton: true, //显示定位按钮默认truebuttonPosition: RB, //定位按钮停靠位置默认LB左下角buttonOffset: new AMap.Pixel(60, 20), //定位按钮与设置的停靠位置的偏移量默认Pixel(10, 20)showMarker: true, //定位成功后在定位到的位置显示点标记默认trueshowCircle: true, //定位成功后用圆圈表示定位精度范围默认truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点默认truezoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见默认false
});this.geolocation.getCurrentPosition((status, result) {if (status complete) {this.locationInfo result;// console.log(位置信息 complete: , result);// console.log(位置经纬度: , result.position);this.position [result.position.lng, result.position.lat];} else {console.log(位置信息 error: , result);}
});
