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——>點我點我
百度地圖——>點我點我