基于高德地图api,vue实现步行导航

vue代码

<template><div><van-nav-bartitle="导航"left-text="返回"left-arrow@click-left="onClickLeft"style="margin-top: .2rem;"/>起始位置：<van-cell-group style="margin-top: .2rem;"><van-field id="start" v-model="startName" /></van-cell-group>结束位置：<van-cell-group style="margin-top: .2rem;"><van-field id="end" v-model="endName" placeholder="输入目的地" /></van-cell-group><div id="container" /><div id="container1" /><van-button type="info" style="margin-top: .2rem;" @click="goView">去往这里</van-button><div class="chat"><Chat></Chat></div><van-popup v-model="show" class="tanchuang"><h1 class="biaoti">是否允许获取当前定位</h1><div><div class="buttonjz"><van-button round type="info" @click="position">获取当前定位</van-button><van-button disabled round  style=" margin-left: .3rem;" type="danger"> 不允许 </van-button></div></div></van-popup></div>
</template><script>
import AMapLoader from "@amap/amap-jsapi-loader";
import Chat from './Chat.vue';
export default {data: () => {return {map: null,startName: "",endName: "",show: true,};},mounted() {window._AMapSecurityConfig = {securityJsCode: "agc19f2351109059453422cfdfb2b66d", // 申请key对应的秘钥};// DOM初始化完成进行地图初始化this.initMap();//   this.position()},components:{Chat},methods: {onClickLeft() {this.$router.replace("/");},goView() {document.getElementById("container").style.zIndex = 9;document.getElementById("container").style.display = "block";document.getElementById("container1").style.display = "none";// eslint-disable-next-line no-undefconst walking = new AMap.Walking({map: this.map,// 步行路线规划策略policy: "panel",});const points = [{ keyword: this.startName, city: "全国" },{ keyword: this.endName, city: "全国" },];walking.search(points, (status, result) => {// 未出错时，result即是对应的路线规划方案console.log("status=", status);console.log("result=", result);});},position() {var that = this;that.show = !that.show;document.getElementById("container").style.display = "none";document.getElementById("container1").style.display = "block";//初始化地图对象，加载地图var map = new AMap.Map("container1", {resizeEnable: true,});var options = {// 设置定位超时时间，默认：无穷大timeout: 4000,// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy: true,showButton: true, //是否显示定位按钮position: "LB", //定位按钮的位置/* LT LB RT RB */offset: [10, 20], //定位按钮距离对应角落的距离showMarker: true, //是否显示定位点markerOptions: {//自定义定位点样式，同Marker的Optionsoffset: new AMap.Pixel(-18, -36),content:'<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',},showCircle: false, //是否显示定位精度圈circleOptions: {//定位精度圈的样式strokeColor: "#0093FF",noSelect: true,strokeOpacity: 0.5,strokeWeight: 1,fillColor: "#02B0FF",fillOpacity: 0.25,},};AMap.plugin(["AMap.Geolocation"], function () {var geolocation = new AMap.Geolocation(options);map.addControl(geolocation);geolocation.getCurrentPosition(function (status, result) {if (status == "complete") {onComplete(result);} else {onError(result);}});});function onComplete(data) {var str = [];str.push("定位结果：" + data.position);str.push("定位类别：" + data.location_type);if (data.accuracy) {str.push("精度：" + data.accuracy + " 米");} //如为IP精确定位结果则没有精度信息str.push("是否经过偏移：" + (data.isConverted ? "是" : "否"));// console.log(str)AMap.plugin("AMap.Geocoder", function () {var geocoder = new AMap.Geocoder({// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycodecity: "010",});var lnglat = [data.position];geocoder.getAddress(lnglat, function (status, result) {if (status === "complete" && result.info === "OK") {// result为对应的地理位置详细信息console.log(result.regeocodes[0].formattedAddress);that.startName = result.regeocodes[0].formattedAddress;// console.log(that.startName)}});});}//解析定位错误信息function onError(data) {console.log("定位失败");console.log("失败原因排查信息:" +data.message +"</br>浏览器返回信息：" +data.originMessage);}},initMap() {AMapLoader.load({key: "cba319d68cfe18669d7f2e94b5f74ad4", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.ToolBar", "AMap.Walking", "AMap.AutoComplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map("container", {// 设置地图容器idviewMode: "3D", // 是否为3D地图模式zoom: 10, // 初始化地图级别// center: [105.602725, 37.076636] // 初始化地图中心点位置});const autoOptions = {// city 限定城市，默认全国city: "全国",input: "start",};// 实例化AutoCompleteconst autoComplete = new AMap.AutoComplete(autoOptions);const autoOptions2 = {// city 限定城市，默认全国city: "全国",input: "end",};// 实例化AutoCompleteconst autoComplete2 = new AMap.AutoComplete(autoOptions2);// 根据关键字进行搜索/* autoComplete.search(this.startName, (status, result) => {// 搜索成功时，result即是对应的匹配数据console.log(result)}) */}).catch((e) => {console.log(e);});},},
};
</script>
<style scoped>
#container {/* display: block; */padding: 0px;margin: 0px;width: 100%;height: 3rem;
}
#container1 {display: none;padding: 0px;margin: 0px;width: 100%;height: 3rem;
}
#panel {position: fixed;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;
}#panel .amap-call {background-color: #009cf9;border-top-left-radius: 4px;border-top-right-radius: 4px;
}#panel .amap-lib-walking {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;overflow: hidden;
}
.biaoti {font-weight: 400;font-size: 25px;margin-top: 0.3rem;margin-left: 0.1rem;margin-bottom: 0.5rem;
}
.tanchuang {width: 4rem;height: 3rem;border-radius: 15px;/* background-color: aqua; */
}
.buttonjz{margin-left: .3rem;
}
.chat{margin-top: .2rem;
}
</style>

实现效果

进入界面是获取当前地址，输入目的地就规划出路线。

基于高德地图api,vue实现步行导航相关推荐

路痴福音！高德地图上线真AR步行导航，可实景指引
2月8日消息,高德地图近日发布V10.76新版本,上线真AR步行导航,借助智能定位.地图导航与AR渲染等技术,可在真实拍摄的道路画面上,呈现更加直观的3D实景指引,帮助方向感不强的用户解决起步找方向难 ...
python 乡镇轮廓高德_基于高德地图api和Python的区县地理边界坐标提取
在工作中,经常想用到类似于地热图的方式进行数据展示,奈何工作环境是内网,无法在线进行地图关联,没办法,只好自己想办法上网找边界坐标. 查了很多文档和费心以后,最终发现高德地图api的方法和方式最简单, ...
HTML5 新特性 - 地理定位（基于高德地图API）
定位的基础与原理 IP定位运营商基站定位 GPS定位地理定位的实现地理定位API允许用户向web应用程序提供他们的位置(经纬度).但是这个操作需要用户授权. 获取地理定位的相关代码如下: let ...
微信小程序-路线规划,地图导航功能基于高德地图API
主要实现微信小程序中的地图路线规划和地图导航功能小程序二维码: 更新 2018年4月18日:新增限行限号查询. 2018年5月7日:新增快递查询,模板消息发送. 准备 1.在http://lbs.a ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...
高德地图API武汉某区域的步行路径规划
高德地图API的武汉某区域的步行路径规划利用python的requests函数,基于高德地图网页服务API 使用地理编码化.步行路径规划等开发方法以武汉武昌.青山交界处以区域为例做已有出行点至 ...
高德地图api @amap/amap-jsapi-loader封装成方法(定位、点标记、路径规划、搜索等) 适用于vue等框架
高德地图api 封装成公共方法用于项目中目前封装的方法有定位点标记比例尺插件信息窗体经纬度附近搜索关键字搜索交通路径规划(经纬度或地点名) 步行路径规划(经纬度或地点名) 经纬度获取地 ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...

基于高德地图api,vue实现步行导航

基于高德地图api,vue实现步行导航相关推荐

最新文章

热门文章