vue+echarts根据ip地址制作简单的地图定位

前天突发奇想做一个地图定位的前端界面，于是就研究了一下百度定位功能。新手，历时两天终于完成了本次的设计。虽然看上去简单，但是用到的东西不少。我在网上找资源的时候还真没找到对应的资源，感觉有必要发出来当做笔记，大家还可以自由扩展它的功能。
闲话不多说，介绍工具：
开发工具：webstrom；
平台框架：vue+webpack+echarts+百度地图。
预览效果：

首先我们要搭载百度地图的开发环境，这是我参考的博客地址：点击链接跳转

加载echarts插件：
使用npm添加package.json文件中的配置并下载相关npm包依赖

npm install echarts --save

然后在项目文件的入口js文件main.js中添加

import echarts from "echarts"
Vue.use(echarts)
Vue.prototype.$echarts = echarts

环境搭载完成，直接上主菜：

还有根据浏览器定位的源代码，不过要经过使用者同意。给出源代码，不做研究

//百度地图浏览器定位let geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){let mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);alert('您的位置：'+r.point.lng+','+r.point.lat);}else {alert('failed'+this.getStatus());}},{enableHighAccuracy: true})

根据echarts和百度地图相关api，大家还可以在此基础上扩展很多功能，有相关问题或意见可以评论讨论哦。下面是官方文档飞机路线
echarts——>点我点我
百度地图——>点我点我

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！