我是主要做java开发的,前台需要使用高德地图集成vue2进行页面展示,所以在第三个案例中,开始的经纬度和结束的经纬度都进行了变量定义且进行了格式优化,如需要后台调用参数,则只需要修改变量的值进行赋值,则可以正常进行开始点和结束点的路程规划以及调用,前台具体的行程信息(例如预计路程,时间,以及到某个路口需要怎么转弯等实际的导航内容)都放到了result中进行返回
页面展示组件
<div id="showMap"></div>//这个主要用于展示地图数据按照关键字进行地名规划
响应速度没有经纬度快,使用体验不佳
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
data() {
return {
map: null,
};
},
mounted() {
this.initAMap();
},
unmounted() {
this.map.destroy();
},
methods: {
initAMap() {
window._AMapSecurityConfig = {
securityJsCode: "你的调用cod",
};
AMapLoader.load({
key: "你申请的高德api秘钥",
version: "2.0",
plugins: ["AMap.Scale"],
})
.then((AMap) => {
var map = new AMap.Map("showMap", {
viewMode: "3D",
zoom: 11,
center: [116.397428, 39.90923],
});
AMap.plugin(
["AMap.ToolBar", "AMap.Driving", "AMap.Polyline", "AMap.Marker"],
function() {
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
var driving = new AMap.Driving({
map: map,
});
driving.search([
{ keyword: '北京市地震局(公交站)', city: '北京' },//起点的关键字,必带城市搜索依据
{ keyword: '亦庄文化园(地铁站)', city: '北京' }//终点关键字
],
function(status, result) {
if (status === "complete") {
console.log("绘制驾车路线完成", result);
} else {
console.log("获取驾车数据失败：" + result);
}
});
}
);
});
},
},
};
</script>
按照经纬度进行查询
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
data() {
return {
map: null,
};
},
mounted() {
this.initAMap();
},
unmounted() {
this.map.destroy();
},
methods: {
initAMap() {
window._AMapSecurityConfig = {
securityJsCode: "你的cod",
};
AMapLoader.load({
key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
})
.then((AMap) => {
var map = new AMap.Map("showMap", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [116.397428, 39.90923],//地图显示中心点坐标
});
AMap.plugin(
["AMap.ToolBar", "AMap.Driving", "AMap.Polyline", "AMap.Marker"],
function() {
//异步同时加载多个插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
var driving = new AMap.Driving({
map: map,
}); //驾车路线规划
driving.search(
new AMap.LngLat(116.379028, 39.865042),//起点的路径
new AMap.LngLat(116.427281, 39.903719),//终点的路径
function(status, result) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === "complete") {
console.log("绘制驾车路线完成", result);
} else {
console.log("获取驾车数据失败：" + result);
}
}
);
}
);
})
},
},
};
</script>总结:关键字和经纬度都差不多,修改的也就是起始和终点位置,我们去修改为高德给定的格式,即可实现查询数据
完善距离判断,时间判断,路径判断,通过经纬度实现逆向解析地名
以下红色圈子里的所有内容都实现api动态代理实现动态页面,且都经过了特定格式的解析.
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import StartIcon from "@/assets/导航起点.png"
export default {
data() {
return {
map: null,
driverTime: null,
driverLong: null,
startaddress:"",
endaddress:"",
// 开始的经纬度
startLatitudeAndLongitude: "116.379028, 39.865042",
// 结束的经纬度
endLatitudeAndLongitude: "116.427281, 39.803719",
};
},
mounted() {
this.initAMap();
},
unmounted() {
this.map.destroy();
},
methods: {
initAMap() {
window._AMapSecurityConfig = {
securityJsCode: "你的code",
};
let self = this;
AMapLoader.load({
key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Scale","AMap.Geocoder"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
})
.then((AMap) => {
var map = new AMap.Map("showMap", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [116.397428, 39.90923],//地图显示中心点坐标
});
var icon = new AMap.Icon({
// 图标尺寸 ===> new AMap.Size(宽, 高)
size: new AMap.Size(80, 50),
// Icon图片
image: StartIcon,
// 根据所设置的大小拉伸或压缩图片 ===> new AMap.Size(宽, 高)
imageSize: new AMap.Size(50, 50)
});
// 逆地址
var geocoder = new AMap.Geocoder({
city: "", //城市设为北京，默认：“全国”
});
//添加点标记
var marker = new AMap.Marker({
position: [116.397428, 39.90923],
// 在这个里面需要设置偏移度,值应和图标的大小一致,如不设置,则会出现定位点随着地图缩略的变化而变化
offset: new AMap.Pixel(-50, -50),
icon
});
map.add(marker); //添加到地图
AMap.plugin(
["AMap.ToolBar", "AMap.Driving", "AMap.Polyline", "AMap.Marker"],
function() {
//异步同时加载多个插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
var driving = new AMap.Driving({
map: map,
}); //驾车路线规划
// var在函数作用外,否则无法调用
var startTranse = self.startLatitudeAndLongitude.split(",");
var endTranse = self.endLatitudeAndLongitude.split(",");
driving.search(
// 因地址值用2214.111的经纬度,所以需要格式转换
new AMap.LngLat(parseFloat(startTranse[0]), parseFloat(startTranse[1])),
new AMap.LngLat(parseFloat(endTranse[0]), parseFloat(endTranse[1])),
function(status, result) {
if (status === "complete") {
console.log("绘制驾车路线完成", result);
// 在这一块需要设置加时时间和大概的路程多少公里,用四舍五入的方式计算
self.driverTime = Math.round(result.routes[0].time / 60);
self.driverLong = Math.round(result.routes[0].distance / 1000);
// 逆地理编码获取地址信息
var start = self.startLatitudeAndLongitude.split(",");
var end = self.endLatitudeAndLongitude.split(",");
// 寻找开始地址的方法
geocoder.getAddress(start, function(status, result) {
if (status === 'complete' && result.regeocode) {
self.startaddress = result.regeocode.formattedAddress;
} else {
console.log("获取开始地址失败");
}
});
// 寻找结束地址的方法
geocoder.getAddress(end, function(status, result) {
if (status === 'complete' && result.regeocode) {
self.endaddress = result.regeocode.formattedAddress;
console.log(result.regeocode + "end");
} else {
console.log("获取结束地址失败");
}
});
} else {
console.log("获取驾车数据失败：" + result);
}
}
);
}
);
}
)
},
},
};
</script>原创不易,希望点个关注支持一下!
标签：status,map,api,result,vue2,var,new,高德,AMap From： https://blog.csdn.net/2201_76122201/article/details/141534771