小白的高德地图初体验(一)——打点
说到高德地图,肯定要推荐官方文档,☛☛☛传送门,走你~~
☞☞小白的高德地图初体验(一) —— 打点
☞☞小白的高德地图初体验(二)——点聚合
☞☞小白的高德地图初体验(三) —— 轨迹
☞☞小白的高德地图初体验(四) —— 矢量图形
☞☞小白的高德地图初体验(五)—— 信息窗体
环境是vue,用的是插件 —— amap.client.js。
大概就长这样的 ☟☟☟
export function MapLoader() {
let amap = new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
creatScript("amap", reject)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
let amapUi = new Promise((resolve, reject) => {
if (window.AMapUI) {
resolve(window.AMapUI)
} else {
creatScript("amapUi", reject, () => {
resolve(window.AMapUI)
})
}
})
let loca = new Promise((resolve, reject) => {
if (window.Loca) {
resolve(window.Loca)
} else {
creatScript("amapLoca", reject)
resolve(window.Loca)
}
})
return Promise.all([amap, amapUi, loca])
.then(result => {
return result
})
.catch(e => {
console.log(e)
})
}
function creatScript(name, reject, cb) {
let src
switch (name) {
case "amap":
src =
"//webapi.amap.com/maps?v=1.4.13&callback=initAMap&key=9f4bf7a493367c3458ccad717705d3b3&plugin=AMap.DistrictLayer,AMap.MouseTool,AMap.TileLayer,AMap.Geocoder,AMap.PolyEditor"
break
case "amapUi":
src = "//webapi.amap.com/ui/1.0/main-async.js"
break
case "amapLoca":
src = "https://webapi.amap.com/loca?key=9f4bf7a493367c3458ccad717705d3b3&v=1.2.1"
break
}
let script = document.createElement("script")
script.type = "text/javascript"
script.src = src
script.onerror = reject
script.onload = cb
document.head.appendChild(script)
}
一、初始化
<template>
<div class="child-container">
<div title="地图详情" width="800px" class="form-dialog">
<div id="map" class="map" />
</div>
</div>
</template>
<script>
import { MapLoader } from "@/plugins/amap.client.js"
export default {
data() {
return {
AMap: {},
maps: {},
marker: {},
infoWindow: {}
}
},
watch: {},
created() {
this.initMap()
},
methods: {
initMap() {
MapLoader().then(() => {
this.AMap = window.AMap
let { AMap } = this
this.maps = new AMap.Map("map", {
resizeEnable: true,
center: [116.368904, 39.923423],
zoom: 15
})
})
}
}
}
</script>
这样就能获取一个地图了,喏张这样。在这里提示一下一定要给地图一个长宽,不然就会疑惑半天自己的地图去哪了。接下来我们就会在这个基础上做一系列的操作。
二、打点
接下来我们看看如何在地图上打一个点(当然这是写死的,固定的一个点)
在initMap()
方法中添加
//打点一个点
this.marker = new AMap.Marker({
position: [116.368904, 39.923423]
})
this.maps.add(this.marker)
//多个点
let lng = [
[119.369904, 39.983423],
[119.368904, 39.923423],
[119.358904, 39.923423]
]
for (let i = 0; i < lng.length; i++) {
this.marker = new AMap.Marker({
position: lng[i]
})
this.maps.add(this.marker)
}
this.maps.setFitView()
- 自适应
点很多的时候,不一定能全部展示出来 ,可以用**maps.setFitView()
**,调整视图到合适的显示范围。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8dba65770e0750444d70efbe7b781773.png#pic_center)
当你不需要这个点的时候可以用 this.maps.remove(this.marker);
来删除点,更多方法请看文档~
三、获取经纬度
当我们点击地图的时候怎么获取经纬度呢?
this.maps.on("click", e => {
console.log(this.maps)
console.log(e)
console.log(e.lnglat.getLng())
console.log(e.lnglat.getLat())
})
这样就能看到获取到经纬度了,和我一样的前端小白只能多打印看看这些东西是个啥啦,也是学习的一种方法哦~~~
四、升级版的打点
刚刚我们学会了怎么标记点和怎么获取经纬度,这样我们就可以做一个,鼠标点击之后标记点的效果。
在initMap()
方法中添加
this.maps.on("click", e => {
let lng = e.lnglat.getLng()
let lat = e.lnglat.getLat()
this.addMarker([lng, lat])
})
另写一个方法
addMarker([lng, lat]) {
let { AMap } = this
this.marker = new AMap.Marker({
position: [lng, lat],
icon: new AMap.Icon({
size: new AMap.Size(24, 36),
image: this.$getEventIcon("dw"),
imageSize: new AMap.Size(24, 36),
imageOffset: new AMap.Pixel(0, 0)
})
})
this.maps.add(this.marker)
}
喏效果就这样啦,红色的点就是我鼠标标记的点~~~
- 自定义标记点
可以通过 icon 设置点的样式,就像 addMark 方法里面一样设置一下就可以了,或者,向已创建好的 Marker 添加 Icon:
var icon = new AMap.Icon({
...
});
marker.setIcon(icon);
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/47b7fce3b95eff41a504a73d8da709e1.png#pic_center)
大概常用的就是这些,更多可以看官网。
有缘再见ヾ( ̄▽ ̄)Bye~Bye~