小白的高德地图初体验(一)——打点

说到高德地图，肯定要推荐官方文档，☛☛☛传送门，走你~~

☞☞小白的高德地图初体验(一) —— 打点
☞☞小白的高德地图初体验(二)——点聚合
☞☞小白的高德地图初体验(三) —— 轨迹
☞☞小白的高德地图初体验(四) —— 矢量图形
☞☞小白的高德地图初体验(五)—— 信息窗体

---

环境是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()**，调整视图到合适的显示范围。

当你不需要这个点的时候可以用 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);

---

大概常用的就是这些，更多可以看官网。

有缘再见ヾ(￣▽￣)Bye~Bye~