Vue 高德地图 路径规划 画点
时间:2019-10-22
本文章向大家介绍Vue 高德地图 路径规划 画点,主要包括Vue 高德地图 路径规划 画点使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
CDN 方式
<!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的key值"></script> <!--引入UI组件库(1.0版本) --> <script src="//webapi.amap.com/ui/1.0/main.js"></script>
配置externals 文件路径 build>webpack.base.conf.js > module.exports = {}
externals: { 'AMap': 'AMap', 'AMapUI': 'AMapUI' },
页面实现
<template> <div class="amap-page-container"> <div id="container" style="width:100vw;height:70vh"></div> </div> </template> <script> export default { data() { return {}; }, created() { // 配置 }, mounted() { this.$nextTick(() => { var map = new AMap.Map("container", { center: [116.397559, 39.89621], zoom: 14 }); // 定义图标信息 var icon = new AMap.Icon({ // 图标尺寸 size: new AMap.Size(32, 46), // 图标的取图地址 image: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", // 图标所用图片大小 imageSize: new AMap.Size(32, 46) }); // 文字描述内容 var labelContent = "<span>1</span>"; // 文字描述显示位置 var labelOffset = new AMap.Pixel(8, 7); // 绘制坐标点 var marker = new AMap.Marker({ icon: icon, position: [116.303843, 39.983412], offset: new AMap.Pixel(-10, -46), title: 1, text: 1, label: { content: labelContent, offset: labelOffset } }); marker.setMap(map); var labelContent = "<span>2</span>"; var labelOffset = new AMap.Pixel(8, 7); var marker2 = new AMap.Marker({ icon: icon, anchor: "center", //设置锚点 position: [116.321354, 39.896436], offset: new AMap.Pixel(-10, -28), title: 2, clickable: true, bubble: true, label: { content: labelContent, offset: labelOffset } }); marker2.setMap(map);
// 事件
AMap.event.addListener(marker, "click", function(e) {
debugger;
//得到的数据
});
AMap.event.addListener(marker2, "click", function(e) {
debugger;
//得到的数据
});
// 绘制路线 map.plugin("AMap.TruckDriving", function() { var truckDriving = new AMap.TruckDriving({ map: map, policy: 0, // 规划策略 size: 1, // 车型大小 width: 2.5, // 宽度 height: 2, // 高度 load: 1, // 载重 weight: 12, // 自重 axlesNum: 2, // 轴数 province: "京", // 车辆牌照省份 isOutline: true, outlineColor: "#ffeeee", hideMarkers: true }); var path = []; path.push({ lnglat: [116.303843, 39.983412] }); //起点 path.push({ lnglat: [116.321354, 39.896436] }); //途径 path.push({ lnglat: [116.407012, 39.992093] }); //终点 truckDriving.search(path, function(status, result) { // searchResult即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult if (status === "complete") { log.success("获取货车规划数据成功"); } else { log.error("获取货车规划数据失败:" + result); } }); }); }); }, methods: {} }; </script> <style> .amap-marker-label { border: 0px; background: rgba(255, 255, 255, 0); color: #fff; font-size: 17px; font-weight: 550; text-align: center; } </style>
NPM 方式
npm install vue-amap --save
配置main.js
import VueAMap from 'vue-amap' // 初始化vue-amap VueAMap.initAMapApiLoader({ key: '您申请的key值', plugin: [ 'AMap.Autocomplete', // 输入提示插件 'AMap.PlaceSearch', // POI搜索插件 'AMap.Scale', // 右下角缩略图插件 比例尺 'AMap.OverView', // 地图鹰眼插件 'AMap.ToolBar', // 地图工具条 'AMap.MapType', // 类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制 'AMap.PolyEditor', // 编辑 折线多,边形 'AMap.CircleEditor', // 圆形编辑器插件 'AMap.Geolocation', // 定位控件,用来获取和展示用户主机所在的经纬度位置 'AMap.TruckDriving' // 路径规划 ], v: '1.4.13' }) Vue.use(VueAMap)
页面实现
<template> <div class="amap-page-container"> <el-amap :plugin="plugin" :amap-manager="amapManager" :zoom="zoom" :center="center" vid="amapDemo" ref="reds" style="width:100vw;height:80vh" :events="events" ></el-amap> </div> </template> <script> import { AMapManager } from "vue-amap"; let amapManager = new AMapManager(); var map = amapManager.getMap(); export default { data() { let _obj = this; return { amapManager, center: [116.303843, 39.983412], plugin: [ { pName: "Scale", events: { init(instance) { console.log(instance); } } } ], zoom: 12, events: { init(o) { _obj.createMap(); } } }; }, created() { // 配置 }, mounted() {}, methods: { createMap() {
let o = amapManager.getMap(); var icon = new AMap.Icon({ // 图标尺寸 size: new AMap.Size(32, 46), // 图标的取图地址 image: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", // 图标所用图片大小 imageSize: new AMap.Size(32, 46) }); var labelContent = "<span>1</span>"; var labelOffset = new AMap.Pixel(8, 7); var marker = new AMap.Marker({ icon: icon, position: [116.303843, 39.983412], offset: new AMap.Pixel(-10, -46), title: 1, text: 1, label: { content: labelContent, offset: labelOffset } }); marker.setMap(o); var labelContent = "<span>2</span>"; var labelOffset = new AMap.Pixel(8, 7); var marker2 = new AMap.Marker({ icon: icon, anchor: "center", //设置锚点 position: [116.321354, 39.896436], offset: new AMap.Pixel(-10, -28), title: 2, clickable: true, bubble: true, label: { content: labelContent, offset: labelOffset } }); marker2.setMap(o); var truckDriving = new AMap.TruckDriving({ map: o, policy: 0, // 规划策略 size: 1, // 车型大小 width: 2.5, // 宽度 height: 2, // 高度 load: 1, // 载重 weight: 12, // 自重 axlesNum: 2, // 轴数 province: "京", // 车辆牌照省份 isOutline: true, outlineColor: "#ffeeee", hideMarkers: true }); var path = []; path.push({ lnglat: [116.303843, 39.983412] }); //起点 path.push({ lnglat: [116.321354, 39.896436] }); //途径 path.push({ lnglat: [116.407012, 39.992093] }); //终点 truckDriving.search(path, function(status, result) { if (status === "complete") { console.log("获取货车规划数据成功"); } else { console.log("获取货车规划数据失败:" + result); } // searchResult即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult }); AMap.event.addListener(marker, "click", function(e) { debugger; //得到的数据 }); AMap.event.addListener(marker2, "click", function(e) { debugger; //得到的数据 }); } } }; </script> <style> .amap-marker-label { border: 0px; background: rgba(255, 255, 255, 0); color: #fff; font-size: 17px; font-weight: 550; text-align: center; } </style>
原文地址:https://www.cnblogs.com/-Kam/p/11719430.html
- React技巧4(如何处理List里面的Item)
- ZOJ 3620 Escape Time II
- React技巧3(如何优雅的渲染一个List)
- FZU 电动车通行证制度
- 贪心算法总结贪心算法基本思路算法实现实例分析参考
- React技巧2(避免无意义的父节点)
- Havel定理
- React技巧1(状态组件与无状态组件的使用)
- zoj 1315 Excuses, Excuses!
- ZOJ 2724 Windows Message Queue(优先队列)
- React多页面应用7(引入eslint代码检查)
- Trie树
- React第三方组件1(路由管理之Router的使用⑤按需加载-下)
- zoj 2876 Phone List
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android:无线调试就是这么简单
- Java自动化测试(回写与断言 17)
- 一篇就够——Kotlin快速入门
- 微信大牛教你深入了解数据库索引
- SqlServer 资源消耗查询
- Android:检查通知权限并跳转到通知设置界面
- OpenShift应用发布和运维设计
- Android:依赖Module的问题汇总
- Android:加载网图时精确获取图片格式
- Android:8.0中未知来源安装权限变更
- Android:RippleDrawable 水波纹/涟漪效果
- Android:Chip、ChipGroups、ChipDrawable
- Android9.0 使用 AndroidVideoCache 时不能缓存/播放视频的解决
- Android:流式布局实现总结
- 跨域问题汇总