[JavaScript知识库]vue使用高德地图-进行显示地图和查询天气

高德地图显示，实现了天气查询效果(Vue)

在index.html中 引入高德地图的css和js

 <!-- 高德地图js插件-->
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '安全密钥jscode',
    }
  </script>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=key值&plugin=AMap.DistrictSearch,AMap.Geocoder,AMap.DistrictLayer,AMap.AutoComplete,AMap.PlaceSearch">

    </script>

vue

<template>
  <div id="ceshi">
    <div id="cc"></div>
    <div class="info" style="position: absolute;left: 1000px;top: 110px; ">
      <h4>未来四天预报天气</h4>
      <hr>
      <p id='forecast'></p>
    </div>

    <div class="input-card" style="position: absolute;left: 250px;top: 110px; height: 200px;">
      <h4>下属行政区查询</h4>
      <div class="input-item">
        <div class="input-item-prepend"><span class="input-item-text">省市区</span></div>
        <select id="province" style="width:100px" @change='loadProv()'></select>
      </div>
      <div class="input-item">
        <div class="input-item-prepend"><span class="input-item-text">地级市</span></div>
        <select id='city' style="width:100px" @change='loadCity() '></select>
      </div>
    </div>
    <div id="container"></div>

  </div>
</template>
  
  <script>
import AMap from "AMap";
export default {
  name: "shouye",

  data() {
    return {
      district: "",
      pp: "",
    };
  },
  methods: {
    loadProv() {
      var province = $("#province").val();
      //查询中国下的市级名称
      this.district.search(province, function (status, result) {
        var city = result.districtList[0].districtList;
        console.log(city);
        var html = "<option value='0'>----请选择市----</option>";
        for (var i = 0; i < city.length; i++) {
          html +=
            "<option value='" +
            city[i].name +
            "'>" +
            city[i].name +
            "</option>";
        }
        $("#city").html(html);
      });
    },
    loadCity() {
      var city = $("#city").val();
      var self = this;
      //查询中国下的市级名称
      this.district.search(city, function (status, result) {
        self.pp = result.districtList[0].center;
      });

      this.loadData(city);
    },
    loadData(address) {
      var self = this;
      //这里需要重新渲染
      var myMap = new AMap.Map("cc", {
        resizeEnable: true,
        center: self.pp,
        zoom: 15,
      });

      AMap.plugin("AMap.Weather", function () {
        var weather = new AMap.Weather();
        //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
        weather.getLive(address, function (err, data) {
          if (!err) {
            var str = [];
            str.push("<h4 >实时天气" + "</h4><hr>");
            str.push("<p>城市/区：" + data.city + "</p>");
            str.push("<p>天气：" + data.weather + "</p>");
            str.push("<p>温度：" + data.temperature + "℃</p>");
            str.push("<p>风向：" + data.windDirection + "</p>");
            str.push("<p>风力：" + data.windPower + " 级</p>");
            str.push("<p>空气湿度：" + data.humidity + "</p>");
            str.push("<p>发布时间：" + data.reportTime + "</p>");
            var marker = new AMap.Marker({
              map: myMap,
              position: self.pp,
            });
            var infoWin = new AMap.InfoWindow({
              content:
                '<div class="info" style="position:inherit;margin-bottom:0;">' +
                str.join("") +
                '</div><div class="sharp"></div>',
              isCustom: true,
              offset: new AMap.Pixel(0, -37),
            });
            infoWin.open(myMap, marker.getPosition());
            marker.on("mouseover", function () {
              infoWin.open(myMap, marker.getPosition());
            });
          }
        });

        weather.getForecast(address, function (err, data) {
          if (err) {
            return;
          }
          var str = [];
          for (var i = 0, dayWeather; i < data.forecasts.length; i++) {
            dayWeather = data.forecasts[i];
            str.push(
              dayWeather.date +
                ' <span class="weather">' +
                dayWeather.dayWeather +
                "</span> " +
                dayWeather.nightTemp +
                "~" +
                dayWeather.dayTemp +
                "℃"
            );
          }
          document.getElementById("forecast").innerHTML = str.join("<br>");
        });
      });
    },
    initMap() {
      new AMap.Map("container", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 5, //初始化地图级别
        center: [105.602725, 37.076636], // //初始化地图中心点位置
      });
    },
  },
  mounted() {
    //初始化地图-----一定要初始化否则报错
    var map = new AMap.Map("cc");
    console.log(map);

    var self = this;
    //加载地图查询插件
    console.log(new AMap.DistrictSearch());
    AMap.plugin("AMap.DistrictSearch", function () {
      // 创建行政区查询对象
      self.district = new AMap.DistrictSearch();
      //查询中国下的省级名称
      self.district.search("中国", function (status, result) {
        var prov = result.districtList[0].districtList;
        console.log(prov);
        var html = "<option value='0'>----请选择省份----</option>";
        for (var i = 0; i < prov.length; i++) {
          html +=
            "<option value='" +
            prov[i].name +
            "'>" +
            prov[i].name +
            "</option>";
        }
        $("#province").html(html);
      });
      self.initMap();
    });
  },
};
</script>
  <style>
html,
body {
  height: 100%;
  margin: 0px;
  /*去掉默认边距*/
}

#cc {
  width: 100%;
  height: 100%;
}
#ceshi {
  width: 100%;
  height: 100%;
}

.weather {
  width: 5rem;
  display: inline-block;
  padding-left: 0.5rem;
}

.sharp {
  height: 1rem;
  width: 1rem;
  background-color: white;
  transform: rotateZ(45deg);
  box-shadow: 2px 2px 3px rgba(114, 124, 245, 0.5);
  position: inherit;
  margin-left: 10.5rem;
  margin-top: -6px;
}

#container {
  width: 80%;
  height: 400px;
  margin: 100px auto;
  margin-top: 300px;
  border: 2px solid red;
}
</style>

高德地图 使用：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

插件列表

来源入高德地图开发平台

问题解决：

1. 未加安全秘钥

解决方法：

 <!-- 高德地图js插件-->
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '安全密钥jscode',
    }
  </script>

必须在key值前面写

2. TypeError: __WEBPACK_IMPORTED_MODULE_0_AMap___default.a.DistrictSearch is not a constructor
   

? 解决方法： 没有加载插件，在key值后面加入

 <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=key值&plugin=AMap.DistrictSearch,AMap.Geocoder,AMap.DistrictLayer,AMap.AutoComplete,AMap.PlaceSearch">
</script>