关于自己使用vue引入百度地图定位当前城市的坑～

本人是初学vue的菜鸟 希望大佬们看到这篇文章的话不要嫌弃 毕竟我也没写过什么博客文章 第一次写 有点紧张 希望大佬们多多指教 前几天想着自己研究做一个vue的小项目 因为这个项目涉及到需要获取地理位置信息的功能 所以自己就开始摸索这个怎么弄

• 先说说我遇到的坑吧（其实是我太蠢了?） 因为看了看百度地图的API 自己申请密钥就不说了 又去网上找了别人的demo 说以下步骤吧（我是想到什么说什么?）

1. 第一步 在index.html文件中引入百度地图的script标签

• 百度 API 的初始标签是

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己申请的密钥"></script>

• 我们把api换成了getscript
• 因为使用初始的标签 在浏览器会报一个警告
• 我在网上也就找到了这个解决方案

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=你自己申请的密钥"></script>

2. 第二步 在webpack.base.config.js文件里边加入（这个文件在build文件夹下）

externals:{
    "BMap":"BMap"
}
// 注意这里修改了配置文件 需要重启项目

3. 第三步 是在你需要实现城市定位功能的组件中完成 下面是我的组件代码（我是偷懒直接在App.vue中写的）

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>{{LocationCity}}</div>
    <router-view/>
  </div>
</template>

<script>
import BMap from 'BMap'
export default {
  name: 'App',
  data () {
    return {
      // 给渲染层定义一个初始值
      LocationCity: '正在定位'
    }
  },
  mounted () {
    this.city()// 触发获取城市方法
  },
  methods: {
    city () { // 定义获取城市方法
      const geolocation = new BMap.Geolocation()
      var _this = this
      geolocation.getCurrentPosition(function getinfo (position) {
        let city = position.address.city // 获取城市信息
        // let province = position.address.province // 获取省份信息
        _this.LocationCity = city
      },
      e => {
        _this.LocationCity = '定位失败'
      },
      {provider: 'baidu'})
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

好了这就是我的整个流程

• 下面是我遇到的一个最蠢的坑

1. 这个真的是最困难的一个坑（困了我两天），也是最简单的一个坑，（我觉得自己是蠢到家了）因为我自制找不到自己的index.html 和 webpack.base.config.js 最后我突然看了一个大神的帖子 原来是我的环境都没有搭建好 下面是环境搭建步骤的地址 https://blog.csdn.net/James_liPeng/article/details/85329677 反正我是对着 一步一步又安装了一遍，然后项目目录就完整了

2. 就这一个简单的不能再简单的 问题 真的是困扰了我两天 ，要不然我也不会狠下心来 写这一篇文章，不过最终被我解决了 还是挺开心的? ，总之还是需要多看一看开发文档，还是有很大好处的，只怪自己笨，慢慢来就挺好（安慰一下自己?）