import * as THREE from 'three'
// 第二步:初始化地图+数据获取更新
import AMapLoader from '@amap/amap-jsapi-loader'
// 设置安全密钥
window._AMapSecurityConfig = {
securityJsCode: '高德申请的key', //设置高德安全密钥,通过该秘钥获取高德数据
}
data(){
return {
map: null,
markers: null,
maps: null,
list: [
{
position: [119.980915962, 30.520096745],
id: 1,
icon: require('../assets/icon_btk41kc4q9m/Bus.png'),
},
{
position: [119.980765934, 30.520356359],
id: 2,
icon: require('../assets/icon_btk41kc4q9m/huoche.png'),
},
{
position: [119.98076323, 30.520416141],
id: 3,
icon: require('../assets/icon_btk41kc4q9m/icon--feijidongche.png'),
},
{
position: [119.980607093, 30.520382286],
id: 4,
icon: require('../assets/icon_btk41kc4q9m/qiche.png'),
},
{
position: [120.980608093, 30.520382286],
id: 5,
icon: require('../assets/icon_btk41kc4q9m/Bus.png'),
},
],
}
}
mounted() {
this.initMap() //初始化地图
this.maps.clearMap(this.markers)//我的需求是写在定时器里,定时清除图标,然后重新展示新图标
},
initMap() {
//初始化地图
AMapLoader.load({
key: '4e6ba029956ccb2e22f28fb782008a94',
version: '2.0',
plugins: ['AMap.Scale', 'AMap.MouseTool'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})
.then((AMap) => {
// 初始化地图
//this.maps = this.map
this.map = new AMap.Map('container', {
viewMode: '3D',
zoom: 22,
plugins: [''],
center: this.firstArr, //[119.980915962, 30.520096745]
resizeEnable: true,
})
this.maps = this.map
this.initMarker(AMap)
})
.catch((e) => {
console.log(e)
})
},
// 定义图标
initMarker(AMap) {
this.list.forEach((item) => {
var IconImg = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(80, 40),
// 图标的取图地址
// image: require('../assets/icon_btk41kc4q9m/Bus.png'),
image: item.icon,
// 图标所用图片大小
imageSize: new AMap.Size(40, 20),
// imageSize: new AMap.Size(80, 40),
// 图标取图偏移量
// imageOffset: new AMap.Pixel(-9, -3)
})
//this.markers = this.marker
this.marker = new AMap.Marker({
map: this.map,
// position: this.pereptionInfoList.map(item => [item.longitude,item.latitude])[0],
// position: [119.980915962, 30.520096745],
position: item.position,
// position: new AMap.LngLat(119.980915962, 30.520096745),
icon: IconImg,
offset: new AMap.Pixel(-35, -15), //调整图片偏移
// offset: new AMap.Pixel(-56, -30), //调整图片偏移
// autoRotation: true, //自动旋转
// angle: -90 //图片旋转角度
})
this.markers = this.marker
//多点文本标记 longitude:经度 30.621637
this.marker.setLabel({
offset: new AMap.Pixel(10, 10), //设置文本标注偏移量
// content: "我是 marker 的 label 标签
", //设置文本标注内容
content: item.id, //设置文本标注内容
direction: 'top', //设置文本标注方位
})
})
},