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

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

<template>
  <div style="width:800p; height:600px">
    <div id="mapContainer" style="width:100%; height:100%"></div>
  </div>
</template>

<script>
  import 'echarts/map/js/china.js';  //引入中国地图
  import BMap from 'BMap'  //引入百度地图
  
  //调用百度地图ip定位接口
  let myCity = new BMap.LocalCity();

  export default {
    name: '',
    data(){
      return{
        geoCoordMap:{},
        geo:''
      }
    },

    mounted() {
      //获取IP地址接口信息
      myCity.get(this.myFun);
    },
    methods: {
      //echarts图的data数据处理
      convertData (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let geoCoord = this.geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      },

      //百度地图接口信息处理函数
      myFun(result){
        this.geo = result.name;
        let arryMap=[result.center.lng,result.center.lat];
        this.$set(this.geoCoordMap,result.name,arryMap);
        this.getMap();
      },

      //echarts图
      getMap(){
        let myChart = this.$echarts.init(document.getElementById('mapContainer'));
        myChart.setOption ({
          backgroundColor: '#fff',
          title: {
            text: '位置 : ' + this.geo,
            x:'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return '位置' + ' : ' + params.name;
            }
          },
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#fff',
                borderColor: '#111'
              },
              emphasis: {
                areaColor: '#ccc'
              }
            }
          },
          series: [
            {
              name: '所在城市',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: this.convertData([{name: this.geo, value: 9},]),
              symbolSize: 12,
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  borderColor: '#fff',
                  borderWidth: 1
                }
              }
            }
          ]
        })
      }
    }
  }
</script>

---

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

//百度地图浏览器定位

  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——>点我点我
百度地图——>点我点我