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

UsherChen 发布于2019-08-22 17:33 / 2052人阅读

摘要：闲话不多说，介绍工具开发工具平台框架百度地图。给出源代码，不做研究百度地图浏览器定位您的位置根据和百度地图相关，大家还可以在此基础上扩展很多功能，有相关问题或意见可以评论讨论哦。下面是官方文档飞机路线点我点我百度地图点我点我

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

私有云服务器托管阿里的云服务器根据ip地址吗根据ip地址登陆云服务器我的位置定位地图图片数据地图的制作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95280.html

前端模块化开发demo之攻击地图

摘要：最终自定义事件封装在上面的链接中看到，不仅应用层页面的按钮可以切换地图维度，直接点击地图里的中国区域也能切换地图，同时又能通知到应用层页面的按钮改变状态。前言很早以前写过一篇用RequireJS包装AjaxChart，当时用Highcharts做图表，在其上封装了一层ajax，最后只是简单套用了一下requireJS。由于当时自己才接触模块化，理解层面还太浅，后来经过其他项目的磨练...

xiaowugui666 2019-08-19 17:10 评论0 收藏0
iMap | 一款基于 Electron 和 Vue 的跨平台旅行地图生成器

摘要：请求错误请求代码封装与基本一致，只是将换成即可。关于的使用是个能把组件的共享状态抽取出来，当做一个全局单例模式进行管理。首先确保你的已经安装，运行来安装。项目地址：https://huangxizhou.com/project/iMap 技术栈 Vue.js Vuex Axios Webpack Leancloud（express） Echarts Electron（electr...

dingda 2019-08-21 17:03 评论0 收藏0
vue 地图可视化 mapbox篇(2)

MapBox 项目中用到MapBox也是偶然的机会，项目中需要采用3D地图，当现有的工具（百度地图）无法满足我们的需求，我们肯定需要更高级开源的地图，无奈谷歌地图无法在国内使用，已是便找到Leafle，一开始惊艳于leafle的开源程度和其与众不同的地图风格，后来顺藤摸瓜，找到一个商业性地图，它便是我们的主角-MapBoxshowImg(https://segmentfault.com/img/b...

_DangJin 2019-08-22 16:15 评论0 收藏0