最全vue的vue-amap使用高德地图插件画多边形范围的示例代码

一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件，代码如下：

import Vue from 'vue'
import VueAMap from 'vue-amap'
import ElementUI from 'element-ui'

import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'

Vue.use(VueAMap)
Vue.use(ElementUI)

VueAMap.initAMapApiLoader({
 // 高德的key
 key: '你的高德key',
 // 插件集合
 plugin: [
 'AMap.Autocomplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor',
 'AMap.Geocoder',
 'AMap.Geolocation'
 ],
 // 高德 sdk 版本，默认为 1.4.4
 v: '1.4.10'
})

Vue.config.productionTip = false

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

强烈推荐的第三种画多边形的效果图：

　　***隐藏的彩蛋哦***

图里的 “请输入经纬度” ，可以输入一堆的经纬度坐标，在按“Enter” ，可以直接形成多边形；（注意：输入的格式要和上面显示的坐标全部选中Ctrl+c下来的格式一样）

　　如：

106.628788 , 29.718379
106.631187 , 29.718143
106.632383 , 29.716281
106.628819 , 29.717013

二、第一种画化：使用Geolocation画多边形（效果是在地图点了，才会形成多边形）

// 新增 编辑 查看 



ul,
li {
 list-style: none;
 margin: 0;
 padding: 0;
}
.inline-form {
 display: flex;
 display: -webkit-flex;
 flex-direction: row;
 flex-wrap: wrap;
 .el-form-item {
 margin-bottom: 10px;
 margin-left: 15px;
 display: flex;
 }
 .el-button {
 margin-left: 15px;
 height: 32px;
 }
}
.action-bar {
 box-sizing: border-box;
 padding: 10px;
 padding-bottom: 0;

 border: {
 top: 1px solid #ddd;
 bottom: 1px solid #ddd;
 }
 .my-input {
 width: 150px;
 }
 .name-input {
 width: 260px;
 }
}
.el-select-dropdown__item {
 background-color: white;
 text-indent: 10px;
}
.claer {
 margin-top: 15px;
 float: right;
}

$map_height: calc(100vh - 55px - 50px - 75px - 15px);
.map-box {
 position: relative;

 height: $map_height;
 .map-tool {
 position: absolute;
 width: 220px;
 z-index: 170;
 top: 0;
 left: 0;
 max-height: 100%;

 box-sizing: border-box;
 padding: 10px;
 overflow-y: auto;

 background-color: #fff;
 box-shadow: 2px 4px 7px 1px #dedede;
 }
 .map {
 transition: all 0.6s;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 }
}
.swiper-box {
 position: relative;
 z-index: 161;

 display: flex;
 align-items: center;
 flex-direction: row;
 justify-content: center;

 width: 100%;

 transition: transform ease-in 0.6s;
 transform: translateX(0);
 white-space: nowrap;
 .swiper-item {
 width: 100%;
 height: $map_height;
 }
}
.hide-text-area {
 transform: translateX(-100%);
}
.gray-map {
 filter: grayscale(90%);
}
.longlat {
 margin-top: 15px;
 padding-bottom: 15px;

 ul {
 li {
  padding: 6px;
  background-color: #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
  position: relative;
 }
 }
}
.el-icon-close {
 display: inline-block;
 position: absolute;
 right: 10px;
 color: #000 !important;
 cursor: pointer;
}
.my-button {
 margin-bottom: 10px;
}

三、第二种画化：使用AMap.MouseTool画多边形（效果是：多边形随鼠标左键点击，多边形直接跟着变化）

// 新增 编辑 查看 



和上面一样

三、第三种画化：使用AMap.Polygon和AMap.PolyEditor画多边形（推荐，效果是：https://lbs.amap.com/api/javascript-api/example/overlayers/polygon-draw-and-edit）

　　注意哦：1、以为这种画多边形，先需要3个点来确定初始的多边形，所以添加了一个功能：搜索 （功能：点击搜索名称的经纬度；）；

　　　　　　2、然后我再 ‘范围绘制' 的方法里根据“搜索”得来的经纬度，手动的弄了3个经纬度数组。

　　　　　　3、然后就可以快乐的画图了。（这画图是真的方便，特别是画范围很复杂的）。

// 新增 编辑 查看 



和上面一样

总结

到此这篇关于最全vue的vue-amap使用高德地图插件画多边形范围的文章就介绍到这了,更多相关vue-amap高德地图插件画多边形范围内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！