vue 引入高德地图路线规划

由于vue-amap不支持路线规划，因此不予采纳。
效果如图

在index.html的header中引入

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e72a9f0cac3b081df05259299454cf1a"></script><!--引入UI组件库（1.0版本） -->
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

配置webpack
在build\webpack.base.conf.js 中，找到module.exports，添加如下代码，记得重启项目！！！！

externals: {AMap: 'AMap',AMapUI: 'AMapUI'
},

绘制地图并规划路线（关键代码）

用来放地图

<div class="page" id="map-container"></div>

用来放路线规划

<div id="panel"></div>

初始化

this.map = new AMap.Map("map-container", {resizeEnable: true,center: [108.9470386505, 34.2593889736], // 地图中心点zoom: 16, // 地图显示的缩放级别
});

公交路线查询

new AMap.Transfer({map: this.map,panel: "panel",}).search([{ keyword: "宁波大学", city: "宁波" },{ keyword: "宁波老外滩", city: "宁波" },],function (status, data) {console.log(data);});

完整代码（精简版）

<template><div class="map-content"><div class="page" id="map-container"></div><div id="panel"></div></div>
</template>
<script>
import AMap from "AMap";
import AMapUI from "AMapUI";
export default {name: "Amap",data() {return {map: null,};},mounted() {// 地图初始化this.map = new AMap.Map("map-container", {resizeEnable: true,center: [108.9470386505, 34.2593889736], // 地图中心点zoom: 16, // 地图显示的缩放级别});// 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺// 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位)// 公交站点查询AMap.plugin(["AMap.ToolBar","AMap.Scale","AMap.Transfer","AMap.Geolocation","AMap.StationSearch",],() => {this.map.addControl(new AMap.ToolBar());this.map.addControl(new AMap.Scale());this.map.addControl(new AMap.Transfer());this.map.addControl(new AMap.Geolocation());this.map.addControl(new AMap.StationSearch());});this.getRoute(); // 获取线路规划},methods: {// 1.路线规划，不乘坐地铁2.自行车出行（暂时不做）3.最快捷模式（综合出行[包含地铁]），用1,2,3来区分出行方式（goMethod）// 路线规划文档地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicygetRoute() {new AMap.Transfer({map: this.map,panel: "panel",}).search([{ keyword: "宁波大学", city: "宁波" },{ keyword: "宁波老外滩", city: "宁波" },],function (status, data) {console.log(data);});},},
};
</script>
<style  scoped>
.page {height: calc(100vh - 50px);
}
.map-content {position: relative;
}
#panel {position: absolute;top: 0;right: 0;
}
</style>

完整代码（定位、公交站点搜索、路线规划）


<template><div class="map-content"><div class="page" id="map-container"></div><div id="routeInfo"></div></div>
</template>
<script>
import AMap from "AMap";
import AMapUI from "AMapUI";
export default {name: "Amap",components: { AMap, AMapUI },data() {return {map: null,transOptions: {},routeListData: [],stationListData: [],};},props: {sartAndEnd: Array, // 线路导乘起终点经纬度},mounted() {// 地图初始化this.map = new AMap.Map("map-container", {resizeEnable: true,center: [108.9470386505, 34.2593889736], // 地图中心点zoom: 16, // 地图显示的缩放级别});// 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺// 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位)// 公交站点查询AMap.plugin(["AMap.ToolBar","AMap.Scale","AMap.Transfer","AMap.Geolocation","AMap.StationSearch",],() => {this.map.addControl(new AMap.ToolBar());this.map.addControl(new AMap.Scale());this.map.addControl(new AMap.Transfer());this.map.addControl(new AMap.Geolocation());this.map.addControl(new AMap.StationSearch());});this.getRoute(); // 获取线路规划this.getLocation(); // 获取我的位置this.getBusStation(); // 站点查询},methods: {// 1.路线规划，不乘坐地铁2.自行车出行（暂时不做）3.最快捷模式（综合出行[包含地铁]），用1,2,3来区分出行方式（goMethod）// 路线规划文档地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicygetRoute(params) {params = 1;if (params === 1) {// map：AMap.Map对象, 展现结果的地图实例 panel：结果列表的HTML容器id或容器元素 nightflag：是否计算夜班车 policy：公交换乘策略this.transOptions = {map: this.map,city: "西安",panel: "routeInfo",nightflag: true,policy: AMap.TransferPolicy.NO_SUBWAY,};} else if (params === 2) {this.transOptions = {map: this.map,city: "西安",panel: "routeInfo",nightflag: true,policy: AMap.TransferPolicy.NO_SUBWAY,};} else if (params === 3) {this.transOptions = {map: this.map,city: "西安",panel: "routeInfo",nightflag: true,policy: AMap.TransferPolicy.LEAST_TIME,};}// 构造公交换乘类var transfer = new AMap.Transfer(this.transOptions);// 一：// 根据起、终点坐标查询公交换乘路线,使用父组件传入的起终点经纬度// transfer.search(new AMap.LngLat(108.9342500000, 34.2305300000), new AMap.LngLat(108.9470386505, 34.2593889736), function (status, result) {//   // result即是对应的公交路线数据信息//   if (status === 'complete') {//     // 出行计划按照时间顺序排序//     const route = result.plans.sort(function (a, b) { return a.time - b.time })//     this.routeListData = route//     console.log(this.routeListData)//     // console.log(this.routeListData)//   } else {//     console.log('公交路线数据查询失败' + result)//   }// })// 二：// 根据起、终点坐标查询公交换乘路线,使用父组件传入的起终点经纬度transfer.search(new AMap.LngLat(108.93425, 34.23053),new AMap.LngLat(108.9470386505, 34.2593889736));AMap.event.addListener(transfer, "complete", (res) => {// res即是对应的公交路线数据信息// res为获取到的当前位置的信息console.log(res);// 出行计划按照时间顺序排序const route = res.plans.sort(function (a, b) {return a.time - b.time;});this.routeListData = route;console.log(this.routeListData);}); // 返回出行方式信息AMap.event.addListener(transfer, "error", (err) => {console.log(err);}); // 返回出行方式信息出错信息},// 获取当前位置getLocation() {// 定义定位获取当前位置var geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位，默认:truetimeout: 100000, // 超过100秒后停止定位，默认：无穷大maximumAge: 0, // 定位结果缓存0毫秒，默认：0convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: false, // 显示定位按钮，默认：true// buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)showMarker: false, // 定位成功后在定位到的位置显示点标记，默认：trueshowCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});// 一定要add添加// this.map.addControl(geolocation)geolocation.getCurrentPosition(); // 获取用户当前的精确位置信息当回调函数中的status为complete的时候表示定位成功AMap.event.addListener(geolocation, "complete", (res) => {// res为获取到的当前位置的信息console.log(res);}); // 返回定位信息AMap.event.addListener(geolocation, "error", (err) => {console.log(err);}); // 返回定位出错信息},// 获取站点信息列表,使用父组件传入输入框的值getBusStation() {this.stationSearch = {pageIndex: 1, // 页码pageSize: 30, // 单页显示结果条数city: "029", // 确定搜索城市};var stationList = new AMap.StationSearch(this.stationSearch);// 一：// stationList.search('小', function (status, result) {//   // result即是对应的公交站点数据信息//   if (status === 'complete' && result.info === 'OK') {//     console.log(result)//     console.log(this.stationListData)//   } else {//     console.log('公交路线数据查询失败' + result)//   }// })// 二：stationList.search("西安钟楼"); // mock一个假数据AMap.event.addListener(stationList, "complete", (res) => {// res为获取到的当前位置的信息this.stationListData = res;console.log(this.stationListData);}); // 返回定位信息AMap.event.addListener(stationList, "error", (err) => {console.log(err);}); // 返回定位出错信息},},
};
</script>
<style  scoped>
.page {height: calc(100vh - 50px);
}
.map-content {position: relative;
}
#routeInfo {position: absolute;top: 0;right: 0;
}
</style>

vue 引入高德地图路线规划相关推荐

高德地图小程序步行路线显示_微信小程序高德地图路线规划实现过程详解
前言最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图百度坐标 (BD-09) 腾讯地图火星坐标(GCJ-02) 高德地图火星坐标 ...
iOS 高德地图路线规划
最近做了高德地图路线规划,把自己不熟的点记录一下: 1.地图不显示当前位置精准圈:设置mapview的 customizeUserLocationAccuracyCircleRepresentatio ...
uniapp 开发安卓App实现高德地图路线规划导航
文章目录技术概述技术详述问题与解决我的总结参考文献技术概述描述这个技术是做什么的/什么情况下会使用到这个技术,学习该技术的原因,技术的难点在哪里.控制在50-100字内. uniapp的 ...
vue 引入高德地图
index.html 引入高德地图 <script type="text/javascript" >AMapLoader.load({"key": ...
java 高德地图路线规划_高德地图 web 页面里的出行路线规划
高德地图的引入,有两种方式,第一种在引入链接里直接添加 plugin 参数: 第二种是引入链接里不添加 plugin 参数,而是在在使用插件之前,使用AMap.service方法加载插件,然后在回调 ...
高德地图路线规划时间_路线准、播报拥堵及时，这次自驾出行高德地图可算是帮了大忙...
在我们日常生活中,自驾已经成为一种很普遍的出行方式,不仅在时间上灵活,特别是一家人出行也比较方便.伴随自驾出行的除了爱车外,一款靠谱的地图导航软件也成为了必不可少的旅行伙伴. 目前比较常用的地图导航软 ...
java 高德地图路线规划_高德地图api之路线规划
1.引入 2.创建并初始化实例对象 const map = new AMap.Map("container") 3.创建一个导航元素,用来承载导航路线(这里不要忘了,是个坑,用的啥 ...
Vue 引入高德地图 vue-amap
一.在高德开发平台,获取Key(已有可跳过): 高德开发者平台-链接地址 1.控制台--我的应用--创建应用--添加key 创建应用新建应用选择web端(JS平台) last:到这里的 key ...
Android高德地图路线规划，自定义图层（overlay），所有点和线刚好显示在屏幕中心
高德百度地图SDK路线规划包含:步行,公交,驾车,骑车. 搜索的结果是经纬度点信息Latlng(lat,lng) 功能在地图map中将所有的点连线,并让该线能刚好被当前的地图层级包含,并且当前路线所 ...

vue 引入高德地图路线规划

vue 引入高德地图路线规划相关推荐

最新文章

热门文章

vue 引入高德地图 路线规划

vue 引入高德地图 路线规划相关推荐

最新文章

热门文章

vue 引入高德地图路线规划

vue 引入高德地图路线规划相关推荐