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版本)
·
由于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_TransferPolicy
getRoute() {
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_TransferPolicy
getRoute(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, // 是否使用高精度定位,默认:true
timeout: 100000, // 超过100秒后停止定位,默认:无穷大
maximumAge: 0, // 定位结果缓存0毫秒,默认:0
convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: false, // 显示定位按钮,默认:true
// buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
showMarker: false, // 定位成功后在定位到的位置显示点标记,默认:true
showCircle: false, // 定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy: 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>
更多推荐
已为社区贡献4条内容
所有评论(0)