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

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

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

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

环境是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 srcswitch (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"breakcase "amapUi":src = "//webapi.amap.com/ui/1.0/main-async.js"breakcase "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 = srcscript.onerror = rejectscript.onload = cbdocument.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.AMaplet { AMap } = thisthis.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 } = thisthis.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~