绍兴的网站建设公司,上海公司建设网站,深圳网页设计与制作工资多少钱,查看域名注册信息JS API 结合 Vue 使用
高德地图 jsapi 下载、引入
npm add amap/amap-jsapi-loaderimport AMapLoader from amap/amap-jsapi-loader
使用2.0版本的loader需要在window对象下先配置 securityJsCode JS API 安全密钥使用
JS API 使用 script 标签同步加载增加代理服务器设置…JS API 结合 Vue 使用
高德地图 jsapi 下载、引入
npm add amap/amap-jsapi-loaderimport AMapLoader from amap/amap-jsapi-loader
使用2.0版本的loader需要在window对象下先配置 securityJsCode JS API 安全密钥使用
JS API 使用 script 标签同步加载增加代理服务器设置脚本并将「您申请的安全密钥」替换为您的安全密钥注意您这个设置必须是在JS API 脚本加载之前进行设置否则设置无效。
window._AMapSecurityConfig {securityJsCode: 「您申请的安全密钥」
}使用ts时上面这里会显示类型错误因此需要在类型文件中配置Window的类型
interface Window {_AMapSecurityConfig: {securityJsCode: string}
} 页面地图初始化加载
自定义地图-设置地图显示样式 自定义地图-地图
AMapLoader.load({key: , // 申请好的Web端开发者Key首次调用 load 时必填version: 2.0 // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15
}).then((AMap) {// 地图初始化// Map构造函数第一个传参的map为初始化地图的容器的id,第二个传参是配置对象const map new AMap.Map(map, {viewMode:3D, //是否为3D地图模式mapStyle: amap://styles/whitesmoke, //设置地图的显示样式zoom: 12 //设置地图的缩放级别}) }).catch((e) {console.error(e) //加载错误提示})
根据后台返回的经纬度数组自定义绘制行车路径参考官方文档 - 路线规划
使用插件 AMap.Driving-根据起点和终点规划自动行车路径 AMapLoader.load({key: , // 申请好的Web端开发者Key首次调用 load 时必填version: 2.0 // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15
}).then((AMap) {// 地图初始化const map new AMap.Map(map, {// viewMode:3D, //是否为3D地图模式mapStyle: amap://styles/whitesmoke, //设置地图的显示样式zoom: 12 //设置地图的缩放级别})// 使用插件 AMap.DrivingAMap.plugin(AMap.Driving, function () {const driving new AMap.Driving({map: map, // 配置参数map,意思是在那个地图中绘制行车路径showTraffic: false, // 关闭道路情况(设置是否显示实时路况信息)hideMarkers: true // 关闭沿途标记(设置隐藏路径规划的起始点图标 )})// logisticsInfo是后端返回的行车路径的数组if (logistics.value?.logisticsInfo logistics.value.logisticsInfo.length 2) {const list [...logistics.value.logisticsInfo]// 起点 startconst start list.shift()// 终点 endconst end list.pop()// 传入起点和终点的经纬度信息获取对应的驾车路线规划driving.search([start?.longitude, start?.latitude],[end?.longitude, end?.latitude],function () {// 未出错时result即是对应的路线规划方案// 在这里绘制沿途运输位置})}})}).catch((e) {console.error(e) // 加载错误提示})
使用插件 AMap.Driving-自定义绘制路径也就是把路途的途径点告知地图让其渲染路径 参考官方文档 途经点参数 路线规划-途经点 // 途经点 opts 是一个对象属性waypoints就是绘制途经点参数
const opts {// 途经点参数最多支持传入16个途经点waypoints: list.map((item) [item.longitude, item.latitude])
}
driving.search([start?.longitude, start?.latitude],[end?.longitude, end?.latitude],opts,function () {}
)
实现业务关闭途径标记 hideMarkers: true并且实现自定义绘制起点-终点-和当前运输位置 其实就是绘制一个标记参考官方实例 自定义图标-点标记
让当前的运输位置显示在地图的正中间并且设置缩放比例参考官方文档 setFitView-setZoom方法
参考手册-地图 JS API // 创建一个标记点函数
const getMarker (point: Location, image: string, width 25, height 30) {// 创建一个 Icon,这种方式可以设置图标的大小const Icon new AMap.Icon({// 图标尺寸size: new AMap.Size(width, height),// 图标的取图地址image: image,// 图标所用图片大小imageSize: new AMap.Size(width, height)})// 将 icon 传入 markerconst marker new AMap.Marker({position: [point?.longitude, point?.latitude],// 将一张图片的地址设置为 iconicon: Icon,// 设置了 icon 以后设置 icon 的偏移量以 icon 的 [center bottom] 为原点offset: new AMap.Pixel(-width / 2, -height)})return marker
}
const startMarker getMarker(start!, startImg) // 起点icon标记
const endMarker getMarker(end!, endImg) // 终点icon标记// 往地图上增加标记
map.add([startMarker, endMarker])driving.search(function () {// 绘制当前运输位置后端返回 currentLocationInfo 就是当前的运输位置 标记const curr logistics.value?.currentLocationInfo // 当前的运输位置经纬度const currMarker getMarker(curr!, carImg, 33, 20) // 当前运输位置标记map.add([currMarker]) // 往地图上增加当前运输位置标记// 2s后定位当中间进行缩放setTimeout(() {map.setFitView([currMarker]) // 定位到当前运输的位置map.setZoom(10) // 一定比例的缩放}, 2000)}
) 下面贴出完整绘制物流信息地图的代码
import startImg from /assets/start.png
import endImg from /assets/end.png
import carImg from /assets/car.pngconst initMap () {AMapLoader.load({key: , // 申请好的Web端开发者Key首次调用 load 时必填version: 2.0 // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15}).then((AMap) {// 地图初始化const map new AMap.Map(map, {// viewMode:3D, //是否为3D地图模式mapStyle: amap://styles/whitesmoke, //设置地图的显示样式zoom: 12 //设置地图的缩放级别})AMap.plugin(AMap.Driving, function () {const driving new AMap.Driving({map: map,// panel: panelshowTraffic: false,hideMarkers: true})if (logistics.value?.logisticsInfo logistics.value.logisticsInfo.length 2) {const list [...logistics.value.logisticsInfo]// 创建标记函数const getMarker (point: Location, image: string, width 25, height 30) {// 创建一个 Icon,这种方式可以设置图标的大小const Icon new AMap.Icon({// 图标尺寸size: new AMap.Size(width, height),// 图标的取图地址image: image,// 图标所用图片大小imageSize: new AMap.Size(width, height)})// 将 icon 传入 markerconst marker new AMap.Marker({position: [point?.longitude, point?.latitude],// 将一张图片的地址设置为 iconicon: Icon,// 设置了 icon 以后设置 icon 的偏移量以 icon 的 [center bottom] 为原点offset: new AMap.Pixel(-width / 2, -height)})return marker}// 起点 startconst start list.shift()const startMarker getMarker(start!, startImg)// 终点 endconst end list.pop()const endMarker getMarker(end!, endImg)map.add([startMarker, endMarker])// 途经点 optsconst opts {// 途经点参数最多支持传入16个途经点waypoints: list.map((item) [item.longitude, item.latitude])}driving.search([start?.longitude, start?.latitude],[end?.longitude, end?.latitude],opts,function () {// 未出错时result即是对应的路线规划方案// 绘制运输位置const curr logistics.value?.currentLocationInfoconst currMarker getMarker(curr!, carImg, 33, 20)map.add([currMarker])// 2s后定位当中间进行缩放setTimeout(() {map.setFitView([currMarker])map.setZoom(10)}, 2000)})}})}).catch((e) {console.error(e) //加载错误提示})
}
