效果图

搜索提示

路线规划

引入依赖

npm i @amap/amap-jsapi-loader --save

vue代码

注意：key：申请web端JSAPI的key
securityJsCode是申请key对应的秘钥
申请地址：https://console.amap.com/dev/key/app

<template><div>起始位置：<el-input id="start" v-model="startName"></el-input>结束位置：<el-input id="end" v-model="endName"></el-input><el-button @click="goView">查询</el-button><div id="container" /></div>
</template><script>
import AMapLoader from '@amap/amap-jsapi-loader'export default {name: 'AMapView',data() {return {map: null,startName: '',endName: ''}},mounted() {window._AMapSecurityConfig = {securityJsCode: '' // 申请key对应的秘钥}// DOM初始化完成进行地图初始化this.initMap()},methods: {goView() {// eslint-disable-next-line no-undefconst driving = new AMap.Driving({map: this.map,// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式// eslint-disable-next-line no-undefpolicy: AMap.DrivingPolicy.LEAST_TIME})const points = [{ keyword: this.startName, city: '全国' },{ keyword: this.endName, city: '全国' }]driving.search(points, (status, result) => {// 未出错时，result即是对应的路线规划方案console.log('status=', status)console.log('result=', result)})},initMap() {AMapLoader.load({key: '', // 申请好的Web端开发者Key，首次调用 load 时必填version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then(AMap => {this.map = new AMap.Map('container', { // 设置地图容器idviewMode: '3D', // 是否为3D地图模式zoom: 5, // 初始化地图级别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{padding:0px;margin: 0px;width: 100%;height: 800px;
}
#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-driving {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;overflow: hidden;
}
</style>

vue使用高德地图web端JSAPI 路线规划、搜索提示教程相关推荐

前端系列——vue2+高德地图web端开发（poi搜索两种方式）
前端系列--vue2+高德地图web端开发(poi搜索) 前言基础什么是poi搜索 1. 输入提示结合poi搜索官方代码步骤 1.进行plugins插件注册 2.data中编写placeSea ...
vue使用高德地图web端JS API（vue-amap插件）
高德地图地图 JS API v2.0:https://lbs.amap.com/api/jsapi-v2/summary/ vue-amap(基于Vue 2.0和高德地图的地图组件):https:// ...
前端系列——vue2+高德地图web端开发（使用和引入）
vue2+高德地图web端开发(使用和引入) 前言基础准备工作高德地图的个人开发者注册高德api网址 1.点击进行注册 2.注册完之后进入控制台 3.创建新应用 4.添加高德 2.0 新增 ...
前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
高德地图web端接入
1.准备阶段进入高德开发平台(高德开放平台 | 高德地图API),登录你的账号,如果没有账号需要先注册,进行开发者的认证,这里由于我已经认证过了,所以直接注册流程就不展示了. 打开控制台,选择应用管 ...
高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)
使用高德地图在很多时候需要在地图上标记位置,并且很多时候需要用到自定义的图标去完成这种位置的标记. 当然,这些功能高德地图都为我们准备了,比如常用的地图覆盖物Marker和信息窗体等.这里就先说一下点 ...
高德地图WEB端软件应用
以前就想自己做一个旅游导航项目,在网上一搜发现了高德地图开放平台,发现高德可以非常简单地应用到自己的项目中,当即我申请了一个 key来学习,仔细研究了一下,觉得还是挺难的,网上找了一些案例什么的,经过 ...
高德地图WEB端，在所画的圆（Circle）内显示在圆（Marker）内的点
1.圆和点都是自己定义的,如图: 2.在高德地图的示例中心测试通过,代码如下: <!doctype html> <html> <head><meta char ...
高德地图web端js
下面是一些高德地图使用例子,自定义展示,右击拖动,搜索,画圆,定位等功能,没有整理仅供参考 var infoWindow = new AMap.InfoWindow({isCustom:true,// ...
高德地图-web端根据地理编码和逆地理编码
首先,用地址生成器快速生成一张地图,网址为lbs.amap.com/console/show/tools: <!DOCTYPE html> <html> <head> ...

vue使用高德地图web端JSAPI 路线规划、搜索提示教程

高德地图web端JSAPI

效果图

搜索提示

路线规划

引入依赖

vue代码

vue使用高德地图web端JSAPI 路线规划、搜索提示教程相关推荐

最新文章

热门文章