解决vue调用百度地图API时地址解析api（Geocoder）

基础应用

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

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("map");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上,并调整地图视野
    myGeo.getPoint("重庆市", function(point){
        if (point) {
            map.centerAndZoom(point, 16);
            map.addOverlay(new BMap.Marker(point));
        }else{
            alert("您选择地址没有解析到结果!");
        }
    }, "北京市");
</script>

一个月前我开发时这样写是没问题的，写入省份名称也可定位到该省的省会城市的位置，但是前几天就出现奇奇怪怪的问题，突然无法定位到了，后来在省份后面精确到城市也可以解决部分定位问题，但是例如重庆市这样的直辖市依然无法定位到，除非再将地址精确，后来让后端添加了每个省份的经纬度，但是针对城市数量多，数据库变动大，于是想到调用百度地图省市的json文件，在本地存一份百度地图部分信息文档，自己再手动解析匹配后端请求接口拿到对应数据进行渲染。

解析json文件（用node脚本）

//parseJson.js
const path = require("path");
const fs = require("fs");

const files = fs.readdirSync(path.resolve(__dirname, "./province"));

const result = [];

files.forEach(file => {
  const content = fs.readFileSync(
    path.resolve(__dirname, "./province/" + file),
    "utf-8"
  );
  const obj = JSON.parse(content);
  const cities = obj.features.map(item => ({
    name: item.properties.name,
    point: item.properties.cp
  }));
  result.push({
    province: file.split(".")[0],
    cities
  });
});
fs.writeFileSync("data.json", JSON.stringify(result), "utf-8");

//解析的data.json部分
[{
    "province": "云南",
    "cities": [{
        "name": "昆明市",
        "point": [102.712251, 25.040609]
    }, {
        "name": "曲靖市",
        "point": [103.797851, 25.501557]
    }, {
        "name": "玉溪市",
        "point": [102.543907, 24.350461]
    }
},{
    "province": "吉林",
    "cities": [{
        "name": "长春市",
        "point": [125.3245, 43.886841]
    }, {
        "name": "吉林市",
        "point": [126.55302, 43.843577]
    }, {
        "name": "四平市",
        "point": [124.370785, 43.170344]
    }
}]

vue中引用json文件

//index.vue
import cityLocalData from "../data.json";

const p = '湖南';
const currentCities = cityLocalData.find(v => v.province.startsWith(p)).cities;
currentCities.forEach(city => {
      if (city.name === item.city) {
           let poi = new BMap.Point(city.point[0], city.point[1]);
            let timer = null;
            let mk = new BMap.Marker(poi, {
                offset: new BMap.Size(0, 15)
            });
            this.myMap.addOverlay(mk);
      }
}

ok，问题完美解决，hai~