<template>
<view class="page">
<div id="amap" class="map"></div>
</view>
</template>
<script>
export default {
data() {
return {
};
},
onShow() {
},
mounted() {
},
onLoad() {
},
methods: {},
};
</script>
<script module="amap" lang="renderjs">
let myChart
export default {
data() {
return {
map:null,
myData:[],
};
},
mounted() {
this.init()
},
methods: {
init() {
// if (typeof window.AMap === 'function') {
// this.initAmap()
// } else {
// 动态引入较大类库避免影响页面展示
console.log(2)
const script = document.createElement('script')
script.src = '离线地图JS地址'
script.onload = this.initAmap.bind(this)
document.head.appendChild(script)
console.log('eles');
// }
},
//初始化地图
initAmap() {
console.log('初始化')
this.map = new AMap.Map('amap', {
resizeEnable: true,
center: [116.397428, 39.90923],
zooms: [4, 20], //设置地图级别范围
zoom: 18
})
this.map.on('complete', () => {
console.log('加载完成');
})
this.getItem(this.myData)
},
// 给地图绘制点 Makers
addMaker(item) {
let marker = new AMap.Marker({
//经纬度位置
position: new AMap.LngLat(item.longitude, item.latitude),
//便宜量
offset: new AMap.Pixel(-10, -24),
//图标
icon: new AMap.Icon({
//大小
size: new AMap.Size(20, 25),
imageSize: new AMap.Size(20, 25),
image: 'imgpath'
}),
//图标展示层级，防止被隐藏时编写
zIndex: 100,
//图标旁边展示内容
label: {
content: `<view>content</view>`,
offset: new AMap.Pixel(10, -18)
}
})
//给图标添加点击事件
marker.on('click', (e) => {
console.log(item, e);
})
//将图标添加到地图中
this.map.add(marker)
},
//绘制点与点之间的线段 Polyline类
initLine(start, end) {
let polyline = new AMap.Polyline({
//线段粗细
strokeWeight: 5,
//颜色
strokeColor: '#007AFF',
//形状
lineCap: 'round',
lineJoin: 'round',
//是否显示方向
showDir: true,
//起点与终点经纬度[[longitudeStart,latitudeStart],[longitudeEnd,latitudeEnd]]
path: [start, end]
})
//向地铁图添加线段
this.map.add(polyline)
},
}
} </script>
<style lang="scss" scoped>
amap {
width: 600px;
height: 600px;
}
</style>
