根据填写的经纬度显示成一片区域,那就是高德矢量图形的 api 咯,效果如图所示,为了测试随便写的经纬度,形状有点奇怪,嘻嘻~~~~
多边形 折线 圆形 什么的 都可以。按需看高德api 即可 传送门:https://lbs.amap.com/api/javascript-api/guide/overlays/vector-overlay#polygon
一、首先要有地图丫~ 用了 vue-amap ,它的官网有时候能打开 有时候打不开,看运气吧https://elemefe.github.io/vue-amap/#/zh-cn/base/amap
安装和配置就省略咯,官网都有,自取呦~~
矢量图形是 web 服务 JS API 的,所以申请高德key的时候 要注意,别申请错了
二、在 el-amap 里 用原生 js api 的时候,地图的 amap-manager 尤其重要
<el-amap
class="amap-box"
:zoom="zoom"
:amap-manager="amapManager"
:plugin="plugin"
:center="center"
ref="map"
vid="amapDemo"
>
</el-amap>
<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager(); //
export default {
data() {
return {
amapManager,
}
},
methods:{
// 矢量图形
geoLan() {
const map = amapManager.getMap();
=====>
let path = [];
this.geiList.forEach((item) => {
let arr = [Number(item.glongitude), Number(item.glatitude)];
path.push(arr);
});
this.path = path;
/// <======
// 上面箭头里面的这些是 处理后台返回的经纬度地点,要跟官网例子的形式一样才行
let that = this;
var polygon = new AMap.Polygon({
// 这些就是图形的一些基本样式了,颜色 线条粗细 透明度之类的
path: that.path,
strokeColor: "#FF33FF",
strokeWeight: 3,
strokeOpacity: 0.5,
fillOpacity: 0.3,
fillColor: "#1791fc",
zIndex: 99999999,
});
map.add(polygon);
// 缩放地图到合适的视野级别
map.setFitView([polygon]);
},
}
}
</script>
也百度出来不少 el-amap-polygon 这种写法的,但是这种我没有弄出来,所以用这种方法的小可爱们,我帮不上忙啦~~