在vue中高德地图引入和轨迹的绘制的实现


Posted in Javascript onOctober 11, 2019

高德地图引入和轨迹的绘制

1.第一步

vue中使用cdn引入高德地图,并在main.js中进行全局配置。(百度上有高德地图引入与配置方法,这里就不详细介绍);
1) npm install vue-amap --save
2)

import VueAMap from ‘vue-amap'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: ‘********************',//自己在高德地图平台上的key值
plugin: [‘AMap.Autocomplete', ‘AMap.PlaceSearch', ‘AMap.Scale', ‘AMap.OverView', ‘AMap.ToolBar', ‘AMap.MapType', ‘AMap.PolyEditor', ‘AMap.CircleEditor',‘AMap.ControlBar',‘AMap.MouseTool',‘AMap.GeometryUtil',‘AMap.DistrictSearch'],//需要的高德地图插件,需要什么插件添加什么插件(这里只是其中一部分)
// 默认高德 sdk 版本为 1.4.4
v: ‘1.4.4',
uiVersion:‘1.0.11'
});

2.第二步

//引入地图,这时地图已经可以在页面上显示了。

 this.map = new AMap.Map('themap', {
     resizeEnable: true,
     center:[121.716284,29.888144],//这是地图的中心点
     zoom: 18,//地图的层级
     layers: [
      new AMap.TileLayer,
      this.imageLayer //这是我在地图上绘制自己的图层用的方法,可去掉。
     ]
    });
//引入Marker,绘制点标记

this.marker = new AMap.Marker({
     map: this.map,
     position: this.firstArr,
     icon: pic,//这里是我要的图片
    });
//绘制轨迹

this.polyline = new AMap.Polyline({
     map: this.map,
     path: this.lineArr, // 这里是轨迹的坐标拼成的数组
     showDir: true,
     strokeColor: "#28F", //线颜色
     // strokeOpacity: 1,   //线透明度
     strokeWeight: 6 //线宽
     // strokeStyle: "solid" //线样式
    });
    var passedPolyline = new AMap.Polyline({
     map: this.map,
     strokeColor: "#AF5", //线颜色
     //path: this.lineArr,
     // strokeOpacity: 1,   //线透明度
     strokeWeight: 6 //线宽
     // strokeStyle: "solid" //线样式
    });
this.marker.on("moving", function(e) {
     passedPolyline.setPath(e.passedPath);
    });
    this.map.setFitView();//自动调整到合适的位置

以上就是轨迹绘制的整个过程

扩展

要想在自己的地图上绘制图层,可以用上面用到的imageLayer

this.imageLayer = new AMap.ImageLayer({
     url:tupian , //这里是自己的图片
     bounds: new AMap.Bounds(
      [121.71105271149695,29.885719370176783],//左下角的坐标
      [121.72236765648086,29.891597442759533],//右上角的坐标
     ),
     zooms: [15, 18] //这里是在15到18的范围内显示
    });

这里要提示一下,放的图片一定要根据地图的方向。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
再谈javascript面向对象编程
Mar 18 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
vue中监听返回键问题
Aug 28 Javascript
Vue实现简单的留言板
Oct 23 Javascript
vue实现点击按钮下载文件功能
Oct 11 #Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 #Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 #Javascript
JsonProperty 的使用方法详解
Oct 11 #Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 #Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 #Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 #Javascript
You might like
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
2013/06/25 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
Python中的ConfigParser模块使用详解
2015/05/04 Python
如何用python整理附件
2018/05/13 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
学生实习推荐信范文
2013/11/26 职场文书
就业自荐信
2013/12/04 职场文书
公司建议书怎么写
2014/05/15 职场文书
小学捐书活动总结
2014/07/05 职场文书
2014年药店工作总结
2014/11/20 职场文书
医生个人年终总结
2015/02/28 职场文书
小学教师自我评价
2015/03/04 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
研讨会致辞
2015/07/31 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
python3操作redis实现List列表实例
2021/08/04 Python