四、vue 项目使用高德地图画面(多边形)

1、首先，我们要在在引入高德地图的文件里，在key后面加上&plugin=AMap.MouseTool

<script src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值&plugin=AMap.MouseTool"></script>

如果没引入，就会报下面这个错

2、然后我们找到官网相对应的实例：https://lbs.amap.com/demo/jsapi-v2/example/overlayers/overlay-draw
3、具体代码如下

<el-button type="primary" @click="drawPolygon">画面按钮</el-button>
<div id="map001"></div>//注意要给地图设置宽高
const AMap = window.AMap;
data() {return {map: null,};},
initMap() {this.map = new AMap.Map("map001", {center: [116.397428, 39.90923], //中心点坐标zoom: 18, //级别});
}
drawPolygon() {let mouseTool = new AMap.MouseTool(this.map);mouseTool.polygon({strokeColor: "#FF33FF",strokeOpacity: 1,strokeWeight: 6,fillColor: "#1791fc",fillOpacity: 0.4,strokeStyle: "solid",});
},

实现效果如下图：

结束画多边形得按鼠标右边，不知道为什么哈哈

四、vue 项目使用高德地图画面(多边形)相关推荐

vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
Vue项目中用高德地图实现定位
说明:本文主要是介绍如何在Vue项目中接入百度地图并定位当前城市,更深层次的内容稍后有空整理. 可能还有更牛的实现方案,目前我这里记录的是我自己跑通的一个版本,希望对你有所帮助,仅供参考. Vue项目 ...
vue项目中高德地图的注册及使用
1.创建应用点击进入高德地图个人开发的注册:https://lbs.amap.com/dev/id/personal 然后可以登录支付宝进行认证. 注册完毕之后,点击右上角的控制台点击右上角的创建 ...
Vue项目引用高德地图实现车辆轨迹回放
一.引入高德地图jsApi 在项目入口index.html页面以cdn方式引入 <script src="https://webapi.amap.com/maps?v=1.4.15&a ...
vue项目引入高德地图(定位、搜索、经纬度解析地址)
1.npm 安装 npm install vue-amap --save 2.main.js文件引入vue-amap import VueAMap from 'vue-amap' Vue.use(Vu ...
vue项目使用高德地图的定位及关键字搜索功能
1.首先在index.html引入高德地图的秘钥.如图: 注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch,否则功能无法使用,并会 ...
vue项目引入高德地图
简单叙述首先需要了解一个小细节: 就是定位获取到的坐标,直接在地图组件或者在位置标注中使用的时候,位置可能有一定的偏差. 还有一个点需要注意的就是: 微信开发者工具的定位不准确,无法获取想要的位置. ...
vue项目中高德地图根据城市名定位到城市中心位置，并在该位置做标记
先看效果: 首先记得引入高德地图,并且要带上&plugin=AMap.DistrictSearch,如下: <script type="text/javascript" ...

四、vue 项目使用高德地图画面(多边形)

四、vue 项目使用高德地图画面(多边形)相关推荐

最新文章

热门文章