高德地圖web端JSAPI

• 效果圖
• • 搜索提示
  • 路線規劃
• 引入依賴
• vue代碼

效果圖

搜索提示

路線規劃

引入依賴

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 路线规划、搜索提示教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。