高德地图解决逆地理坐标问题

逆地理坐标：即从经纬度，转化为城市名称。
步骤：

1. 申请key 高德api文档
2. 开始传参请求，
3. fetch处理跨域，
4. 接口返回数据各种转化，异步数据处理。
5. 可视化展示
6. 写回调函数再处理返回的数据

equipmentDistribute() {
      let _this = this;
      var mapchart = this.$echarts.init(
        document.getElementById("equipmentMap")
      );
      let dataCityValue = [];
      let toolTiponlineData = [];
      let toolTipDataValue = [];
      this.$api.device.deviceList().then(data => {
        if (data == "") {
          this.$message({
            type: "error",
            message: "登录超时，请重新登录"
          });
          this.$router.push("/");
        } else if (data.code == 200) {
          let resData = data.rows;
          let arrLonLatotal = [];
          resData.forEach(ele => {
            let arrLl = [ele.longitude, ele.latitude];
            arrLonLatotal.push(arrLl);
            let objChnOnline = {};
            objChnOnline.name = "在线";
            objChnOnline.value = ele.chnNum;
            let objChnOutline = {};
            objChnOutline.name = "离线";
            objChnOutline.value = 0;
            toolTipDataValue.push(objChnOnline);
            toolTipDataValue.push(objChnOutline);
          });
          fetch(
            "https://restapi.amap.com/v3/geocode/regeo?key=你申请的key=" +
              arrLonLatotal +
              "&batch=true"
          )
            .then(function(response) {
              return response.json();
            })
            .then(function(myJson) {
              console.log("地图返回值");
              console.log(myJson);
              if (myJson.status == 1) {
                let gdresArr = myJson.regeocodes;
                gdresArr.forEach(ele => {
                  let objCityVal = {};
                  objCityVal.name = ele.addressComponent.province.slice(0, 2);
                  objCityVal.value = 20;
                  dataCityValue.push(objCityVal); //echarts中第一个需要的data数据
                  let tooltip = {};
                  tooltip.name = ele.addressComponent.province.slice(0, 2);
                  tooltip.value = toolTipDataValue;
                  toolTiponlineData.push(tooltip);
                });
                _this.arrChartCityVal = dataCityValue;
                _this.arrChartInfoCityVal = toolTiponlineData;
				//以下处理代码应该写在回调函数里，会更清晰
                var name_title = "设备在各省分布情况";
                var subname = "在线/离线";
                var nameColor = " rgb(55, 75, 113)";
                var name_fontFamily = "等线";
                var subname_fontSize = 15;
                var name_fontSize = 18;
                var mapName = "china";
                console.log("所有有设备城市对象数组");
                console.log(_this.arrChartCityVal);
                // var data = [{name:"北京", value:20}];
                var data = _this.arrChartCityVal;

                var geoCoordMap = {};
                console.log("在线离线值");
                console.log(_this.arrChartInfoCityVal);
                // var toolTipData = [{
                //   name:"北京",
                //   value:[{
                //     name:"在线",
                //     value:1
                //   },{
                //     name:"离线",
                //     value:0
                //   }]
                // }]
                var toolTipData = _this.arrChartInfoCityVal;
                /*获取地图数据*/
                mapchart.showLoading();
                var mapFeatures = echarts.getMap(mapName).geoJson.features;
                mapchart.hideLoading();
                mapFeatures.forEach(function(v) {
                  // 地区名称
                  var name = v.properties.name;
                  // 地区经纬度
                  geoCoordMap[name] = v.properties.cp;
                });

                // console.log("============geoCoordMap===================")
                // console.log(geoCoordMap)
                // console.log("================data======================")
                var max = 10,
                  min = 5; // todo
                var maxSize4Pin = 10,
                  minSize4Pin = 2;
                // 计算经纬度
                var convertData = function(data) {
                  var res = [];
                  for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                      res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                      });
                    }
                  }
                  return res;
                };
                var option = {
                  title: {
                    text: name_title,
                    subtext: subname,
                    x: "center",
                    textStyle: {
                      color: nameColor,
                      fontFamily: name_fontFamily,
                      fontSize: name_fontSize
                    },
                    subtextStyle: {
                      fontSize: subname_fontSize,
                      fontFamily: name_fontFamily
                    }
                  },
                  tooltip: {
                    trigger: "item",
                    show: true,
                    formatter: function(params) {
                      if (typeof params.value[2] == "undefined") {
                        var toolTiphtml = "";
                        for (var i = 0; i < toolTipData.length; i++) {
                          if (params.name == toolTipData[i].name) {
                            toolTiphtml += toolTipData[i].name + ":<br>";
                            for (
                              var j = 0;
                              j < toolTipData[i].value.length;
                              j++
                            ) {
                              toolTiphtml +=
                                toolTipData[i].value[j].name +
                                ":" +
                                toolTipData[i].value[j].value +
                                "<br>";
                            }
                          }
                        }
                        // console.log(toolTiphtml);
                        // console.log(convertData(data))
                        return toolTiphtml;
                      } else {
                        var toolTiphtml = "";
                        for (var i = 0; i < toolTipData.length; i++) {
                          if (params.name == toolTipData[i].name) {
                            toolTiphtml += toolTipData[i].name + ":<br>";
                            for (
                              var j = 0;
                              j < toolTipData[i].value.length;
                              j++
                            ) {
                              toolTiphtml +=
                                toolTipData[i].value[j].name +
                                " : " +
                                toolTipData[i].value[j].value +
                                "<br>";
                            }
                          }
                        }
                        // console.log(toolTiphtml);
                        // console.log(convertData(data))
                        return toolTiphtml;
                      }
                    }
                  },
                  visualMap: {
                    show: true,
                    min: 0,
                    max: 10,
                    left: "left",
                    top: "bottom",
                    text: ["高", "低"], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {
                      // color: ['#3B5077', '#031525'] // 蓝黑
                      // color: ['#ffc0cb', '#800080'] // 红紫
                      // color: ['#3C3B3F', '#605C3C'] // 黑绿
                      // color: ["#00467F", "#A5CC82"] // 蓝绿
                      color: ["#1488CC", "#2B32B2"] // 浅蓝
                    }
                  },
                  geo: {
                    show: true, //是否显示地区
                    map: mapName,
                    label: {
                      normal: {
                        show: true,
                        color: "#fff"
                      },
                      emphasis: {
                        show: true
                      }
                    },
                    roam: true,
                    itemStyle: {
                      normal: {
                        areaColor: "#0080CC", //整体区域颜色
                        borderColor: "#F4F7FC" //各省分界线边缘颜色
                      },
                      emphasis: {
                        areaColor: "#2B91B7"
                      }
                    }
                  },
                  series: [
                    {
                      name: "散点",
                      type: "effectScatter",
                      coordinateSystem: "geo",
                      data: convertData(data),
                      symbolSize: function(val) {
                        return val[2] / 10;
                      },
                      label: {
                        normal: {
                          formatter: "{b}",
                          position: "right",
                          show: true
                        },
                        emphasis: {
                          show: true
                        }
                      },
                      itemStyle: {
                        normal: {
                          color: "#05C3F9"
                        }
                      }
                    },
                    {
                      type: "map",
                      map: mapName,
                      geoIndex: 0,
                      aspectScale: 0.75, //长宽比
                      showLegendSymbol: true, // 存在legend时显示
                      label: {
                        normal: {
                          show: true
                        },
                        emphasis: {
                          show: true,
                          textStyle: {
                            color: "#fff"
                          }
                        }
                      },
                      roam: true,
                      itemStyle: {
                        normal: {
                          areaColor: "#000",
                          borderColor: "#ddd",
                          show: true
                        },
                        emphasis: {
                          areaColor: "#000"
                        }
                      },
                      animation: false,
                      data: data
                    },
                    {
                      name: "点",
                      type: "scatter",
                      coordinateSystem: "geo",
                      symbol: "pin", //气泡
                      symbolSize: function(val) {
                        var a = (maxSize4Pin - minSize4Pin) / (max - min);
                        var b = minSize4Pin - a * min;
                        b = maxSize4Pin - a * max;
                        return a * val[2] + b;
                      },
                      label: {
                        normal: {
                          show: false, //不显示坐标
                          textStyle: {
                            color: "#fff",
                            fontSize: 9
                          }
                        }
                      },
                      itemStyle: {
                        normal: {
                          color: "#F62157" //标志颜色红
                        }
                      },
                      zlevel: 6,
                      data: convertData(data)
                    },
                    {
                      name: "Top 5",
                      type: "effectScatter",
                      coordinateSystem: "geo",
                      data: convertData(
                        data
                          .sort(function(a, b) {
                            return b.value - a.value;
                          })
                          .slice(0, 5)
                      ),
                      symbolSize: function(val) {
                        return val[2] / 10;
                      },
                      showEffectOn: "render",
                      rippleEffect: {
                        brushType: "stroke"
                      },
                      hoverAnimation: true,
                      label: {
                        normal: {
                          formatter: "{b}",
                          position: "right",
                          show: false
                        }
                      },
                      itemStyle: {
                        normal: {
                          color: "black",
                          shadowBlur: 10,
                          shadowColor: "yellow",
                          show: false,
                          fontSize: "20px",
                          fontWeight: "500"
                        }
                      },
                      zlevel: 1
                    }
                  ]
                };
                mapchart.setOption(option);
                //这之上应写在callback()
              } else {
                _this.$message({
                  type: "info",
                  message: myJson.info
                });
              }
            });
        }
      });
    }

总结：当没有按照预期效果运行时，不要觉得自己没问题，要按照步骤一步一步排查可能没出现预期效果的原因。