高德地图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; }); }); },