百度地图API根据经纬度绘制轨迹图（Vue附源码）

导入百度地图

importBaiduMap () {var script = document.createElement('script');script.src = 'https://api.map.baidu.com/api?v=2.0&ak=MzjWwp5rZDjfjo9sM2EqgTCoOIVxOI03&setLang=en&callback=loadBaiduMap';document.body.appendChild(script);//完全载入后执行window.loadBaiduMap = () => {window.baiduMap = new BMap.Map('rightBox'); //找到页面id 绘制地图window.baiduMap.addControl(new BMap.NavigationControl());window.baiduMap.centerAndZoom(new BMap.Point(70.0225, 40.027222), 3); //设置默认中心点window.baiduMap.enableScrollWheelZoom(); //允许滚轮缩放this.drawBaiduMap(); //绘制点};
},

绘制轨迹

    //绘制点drawBaiduMap () {let trainIcon = 'https://www.aliboxx.com/uploadfile/static/icons/train.png';if (this.list.length > 0) {window.baiduMap.centerAndZoom(new BMap.Point(this.list[0].lng, this.list[0].lat), 6);  //取第一个点为地图中心点//画路线部分let pointsArray = [];const list = this.list;list.forEach(item => {console.log(item, 'item')pointsArray.push(new BMap.Point(item.lng, item.lat)); //添加每一个点});let polyline = new BMap.Polyline(pointsArray, {strokeColor: '#5352ed',    //轨迹的样式strokeWeight: 3,strokeOpacity: 1.0,});window.baiduMap.addOverlay(polyline);//标注起点窗口信息let opts = {width: 100, // 信息窗口宽度// height: 60,     // 信息窗口高度};let contentString = `<div>第一个位置鼠标移动上去的信息</div>`;let infoWindow = new BMap.InfoWindow(contentString, opts); // 创建信息窗口对象let nowPoint = new BMap.Point(list[0].lng, list[0].lat);  //设置图标的位置let nowIcon = new BMap.Icon(trainIcon, new BMap.Size(32, 32));nowIcon.setImageSize(new BMap.Size(25, 25)); //设置图标大小let nowPort = new BMap.Marker(nowPoint, { icon: nowIcon });nowPort.addEventListener('mouseover', function () { //鼠标移动上去事件window.baiduMap.openInfoWindow(infoWindow, nowPoint);});nowPort.addEventListener('mouseout', function () { //移开清除window.baiduMap.closeInfoWindow(infoWindow, nowPoint);});window.baiduMap.addOverlay(nowPort);}},

左侧点击事件添加窗口

    clickInfo (row) {console.log(row, 'row')if (window.baiduMap) {//如果当前渲染的是百度地图let opts = {width: 250, // 信息窗口宽度// height: 100,     // 信息窗口高度};let contentString = `<div><p>点${row.lng},${row.lat}</p></div>`;let infoWindow = new BMap.InfoWindow(contentString, opts); // 创建信息窗口对象window.baiduMap.openInfoWindow(infoWindow, new BMap.Point(row.lng, row.lat)); // 打开信息窗口}}

页面完整代码

<template><div class="page"><el-row type="flex" justify="center"><el-col :span="6"><el-input v-model="gpsNum" placeholder="请输入内容" size="small"></el-input></el-col><el-col :span="1"><el-button icon="el-icon-search" type="primary" size="small" style="margin:0 15px" @click="getList()">搜索</el-button></el-col></el-row><el-row type="flex" class="mapBox" justify="center" :gutter="20"><el-col :span="8"><div class="leftBox"><el-table :data="list" style="width: 100%" @row-click="clickInfo"><el-table-column type="index" label="序号" width="50" align="center"></el-table-column><el-table-column label="经纬度" align="center"><template slot-scope="scope">{{scope.row.lng}},{{scope.row.lat}}</template></el-table-column></el-table></div></el-col><el-col :span="16"><div id="rightBox" class="rightBox"></div></el-col></el-row></div>
</template><script>
export default {name: "demo",data () {return {gpsNum: '',list: [],}},created () {this.getList()},methods: {getList () {//创建虚拟数据for (let i = 0; i < 50; i++) {this.list.push({lng: i + Math.round(Math.random()) + 5,lat: 10 + i})}this.importBaiduMap()   //引入百度地图（如果是异步获取数据的话 要先拿到数据在初始化 地图api）},importBaiduMap () {var script = document.createElement('script');script.src = 'https://api.map.baidu.com/api?v=2.0&ak=MzjWwp5rZDjfjo9sM2EqgTCoOIVxOI03&setLang=en&callback=loadBaiduMap';document.body.appendChild(script);//完全载入后执行window.loadBaiduMap = () => {window.baiduMap = new BMap.Map('rightBox'); //找到页面id 绘制地图window.baiduMap.addControl(new BMap.NavigationControl());window.baiduMap.centerAndZoom(new BMap.Point(70.0225, 40.027222), 3); //设置默认中心点window.baiduMap.enableScrollWheelZoom(); //允许滚轮缩放this.drawBaiduMap(); //绘制点};},//绘制点drawBaiduMap () {let trainIcon = 'https://www.aliboxx.com/uploadfile/static/icons/train.png';if (this.list.length > 0) {window.baiduMap.centerAndZoom(new BMap.Point(this.list[0].lng, this.list[0].lat), 6);  //取第一个点为地图中心点//画路线部分let pointsArray = [];const list = this.list;list.forEach(item => {console.log(item, 'item')pointsArray.push(new BMap.Point(item.lng, item.lat)); //添加每一个点});let polyline = new BMap.Polyline(pointsArray, {strokeColor: '#5352ed',    //轨迹的样式strokeWeight: 3,strokeOpacity: 1.0,});window.baiduMap.addOverlay(polyline);//标注起点窗口信息let opts = {width: 100, // 信息窗口宽度// height: 60,     // 信息窗口高度};let contentString = `<div>第一个位置鼠标移动上去的信息</div>`;let infoWindow = new BMap.InfoWindow(contentString, opts); // 创建信息窗口对象let nowPoint = new BMap.Point(list[0].lng, list[0].lat);  //设置图标的位置let nowIcon = new BMap.Icon(trainIcon, new BMap.Size(32, 32));nowIcon.setImageSize(new BMap.Size(25, 25)); //设置图标大小let nowPort = new BMap.Marker(nowPoint, { icon: nowIcon });nowPort.addEventListener('mouseover', function () { //鼠标移动上去事件window.baiduMap.openInfoWindow(infoWindow, nowPoint);});nowPort.addEventListener('mouseout', function () { //移开清除window.baiduMap.closeInfoWindow(infoWindow, nowPoint);});window.baiduMap.addOverlay(nowPort);}},clickInfo (row) {console.log(row, 'row')if (window.baiduMap) {//如果当前渲染的是百度地图let opts = {width: 250, // 信息窗口宽度// height: 100,     // 信息窗口高度};let contentString = `<div><p>点${row.lng},${row.lat}</p></div>`;let infoWindow = new BMap.InfoWindow(contentString, opts); // 创建信息窗口对象window.baiduMap.openInfoWindow(infoWindow, new BMap.Point(row.lng, row.lat)); // 打开信息窗口}}}
}
</script><style lang="scss" scoped >
.page {background: #fafafa;//   height: 100vh;padding-top: 30px;.mapBox {width: 1600px;margin: 30px auto 0 auto !important;.leftBox {width: 100%;height: 600px;margin-right: 30px;background: #ffffff;overflow-y: scroll;}.rightBox {width: 100%;height: 600px;}}
}
</style>

百度地图API根据经纬度绘制轨迹图（Vue附源码）相关推荐

qichacha/知乎/国家统计局最新4级地区划/百度地图API获取经纬度/Google play app评论等分数据爬取
1.企查查数据抓取 1.1 关键公司LOGO # -*-coding:utf-8-*-import pandas as pd import requests import json import ra ...
调用百度地图API获取经纬度(详细步骤)
前端调用百度地图API获取经纬度(详细操作) 1. 浏览器搜索百度地图开放平台 2. 创建应用点击控制台 --> 应用管理 --> 我的应用 --> 注册账号(如果没有注册过) - ...
python调用百度地图API 实现单点沿线轨迹运动
百度地图API 可以做很多好玩的事情,自己闲来无事,先是照着一些资料做了热力图,然后借助pyqt5做了一个简单的界面,实现gps单点沿线(行车)的轨迹. 先上程序界面和效果图: 过程:1. 申请百度地 ...
【百度地图】——百度地图API获取经纬度、地址及周边兴趣点
在做一个电商项目过程中,需要获取设备地理信息,包括经纬度定位,附近地址等,于是写了一个工具类方便使用. 1.在使用百度地图API使,首先要获取官方授权,在http://lbsyun.baidu.com ...
如何将百度地图API获取经纬度写成公有方法？
原问题来自于CSDN问答社区:http://ask.csdn.net/questions/636 问题描述: 我使用的是百度地图API来获取经纬度坐标.但是我的程序里面有多个地方用到了经纬度. 所以我 ...
百度地图API之获取真实轨迹
引入百度地图API中的AK(官网申请,免费的) 1.创建地图实例 2.添加定位控件(当前仅能定位到市) 3.设置存放坐标点的数组,获取点击时的点坐标 4. 自定义路径获取函数 getPath() 5. ...
疯狂python讲义视频百度云-疯狂Python讲义 PDF高清版附源码
内容简介本书全面,深入地介绍了Python编程的相关内容,大致可分为四个部分.*系统部分介绍了Python的基本语法结构,函数编程,类和对象,模块和包,异常处理等: 第二部分主要介绍Python常用 ...
php图片动画源码,JavaScript_jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载），ImageDrawer.js是一款可以实现动 - phpStudy...
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载) ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可 ...
Android一行代码实现网络加载GIF闪图（附源码）
最近项目有个需求是要从网络加载GIF闪图, 但是Android原生的ImageView并不支持Gif... 于是从网上看了些Dome, 发现总是有些这样那样的问题, 譬如: ☹ 没有缓存,还要自己写一 ...

百度地图API根据经纬度绘制轨迹图（Vue附源码）

目录

导入百度地图

绘制轨迹

左侧点击事件添加窗口

页面完整代码

百度地图API根据经纬度绘制轨迹图（Vue附源码）相关推荐

最新文章

热门文章