高德地图JSAPI使用

// 创建地图
    initMap() {
      let container = this.$refs.map
      this.map = new AMap.Map(container, {
          zoom:18,//级别
          center: [120.257173,30.205769],//中心点坐标
          viewMode:'3D',//使用3D视图
          pitch:25, // 地图俯仰角度,有效范围 0 度- 83 度
      });
      this.markers.map((item) => {
        this.setMaker(item.title, item.axis)
      })
      // 地图旋转
      this.map.setRotation(15)
    },
    // 创建标记
    setMaker(title, axis) {
      // 创建一个 Marker 实例:
      var marker = new AMap.Marker({
          position: new AMap.LngLat(...axis),   // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: require('../img/flag.png'),
          content: `<div class="flag">${title}</div>`,
      });
      // 将创建的点标记添加到已有的地图实例:
      this.map.add(marker);
    },
    // 地图事件
    mapClick() {
      this.map.on('click', function(ev) {
        let {lng, lat} = ev.lnglat
        console.log(`[${lng},${lat}]`);
        // 触发事件的对象
        var target = ev.target;
        // 触发事件的地理坐标,AMap.LngLat 类型
        var lnglat = ev.lnglat;
        // 触发事件的像素坐标,AMap.Pixel 类型
        var pixel = ev.pixel;
        // 触发事件类型
        var type = ev.type;
      });
    },

时钟天气

// 时间刷新
    getClock() {
      let day = moment().day()
      let weeks = ['一', '二', '三', '四', '五', '六', '日',]
      this.timer =  setInterval(() => {
        this.date =  moment().format(`YYYY-MM-DD 星期${weeks[day-1]} HH:mm:ss`)
      }, 1000);
    },
    // 天气查询
    getWeather() {
      let _this = this
      //加载天气查询插件
      AMap.plugin('AMap.Weather', function() {
        //创建天气查询实例
        var weather = new AMap.Weather();
  
        //执行实时天气信息查询
        weather.getLive('杭州市', function(err, data) {
          _this.weather = data;
        });
      });
    },

 

posted @ 2021-12-28 11:39  鱿鱼须须  阅读(450)  评论(0编辑  收藏  举报