【高德地图入门】--- 绘制面

高德地图内置了许多遮盖物的api，今天主要就是讲解面的绘制方法

创建地图

为了更好的展示面的绘制，我们需要先创建一个地图对象

<body><div id="container"></div>
</body>

     const map = window.map = new AMap.Map("container", {center: [116.381674, 39.910732],viewMode: "3D",zoom: 8,});

面的类型

高德地图提供了多种面的绘制类型，其中包括多边形Polygon，圆Circle，椭圆Ellipse，矩形Rectangle等

polygon类

多边形

    new AMap.Polygon({map,path: [[113.932241, 39.695409],[114.573982, 39.732067],[114.662936, 39.214627],[113.855994, 39.076651],[113.512885, 39.352332],],});

polygon 会自动头尾相连
更多属性

Circle类

圆

    new AMap.Circle({map,//圆心坐标center: [114.942465, 39.78421],//半径 单位米radius: 10000,});

更多属性

CircleMarker类

圆点标记，属性和方法于Circle大体一致，区别为CircleMarker不随着地图级别变化发生大小改变，redius的单位为px

    new AMap.CircleMarker({map,//圆心坐标center: [114.288248,40.079622],//半径 单位 pxradius: 20,});

更多属性

Ellipse类

椭圆

   new AMap.Ellipse({map,//圆心坐标center: [114.394917,38.693466],//半径 单位 米radius: [10000, 20000] ,});

主要属性

map：要显示该marker的地图对象
center：椭圆的圆心位置
radius：椭圆的半径，用2个元素的数组表示，单位：米。如： radius: [1000, 2000] 表示横向半径是1000，纵向的半径是2000。默认值：[1000, 1000]

更多属性

Rectangle类

矩形

    new AMap.Rectangle({map,bounds: new AMap.Bounds([112.184897, 38.99885], [113.085776, 39.394758]),});

主要属性

map：要显示该rectangle的地图对象
bounds：矩形的范围

bounds属性接收的是一个bounds对象，该对象接收两个参数，第一个参数是物体西南顶点坐标，第二个参数是物体东北顶点坐标，也就是该例中矩形的左下角和右上角的坐标。

更多属性

全部代码展示（其中xxxx 高德的秘钥，cccc是高德的key，需要自己申请）

<!DOCTYPE html>
<html><head><metaname="viewport"content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>map</title><style>body,html,#container {margin: 0;width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script>window._AMapSecurityConfig = {securityJsCode: "xxxx",};</script><scriptlanguage="javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=cccc"></script><script language="javascript">const map = (window.map = new AMap.Map("container", {center: [114.942465, 39.78421],viewMode: "3D",zoom: 8,showLabel: false,}));//--------------------------------------Polygon--------------------------------------new AMap.Polygon({map,path: [[113.932241, 39.695409],[114.573982, 39.732067],[114.662936, 39.214627],[113.855994, 39.076651],[113.512885, 39.352332],],});//--------------------------------------Circle--------------------------------------new AMap.Circle({map,//圆心坐标center: [114.942465, 39.78421],//半径radius: 10000,});//--------------------------------------CircleMarker--------------------------------------new AMap.CircleMarker({map,//圆心坐标center: [114.288248, 40.079622],//半径 单位 pxradius: 20,});//--------------------------------------Ellipse--------------------------------------new AMap.Ellipse({map,//圆心坐标center: [114.394917, 38.693466],//半径 单位 米radius: [10000, 20000],});//--------------------------------------Rectangle--------------------------------------new AMap.Rectangle({map,bounds: new AMap.Bounds([112.184897, 38.99885], [113.085776, 39.394758]),});</script>
</html>

【高德地图入门】--- 绘制面相关推荐

vue使用高德地图并且绘制多边形
使用鼠标工具在高德地图上绘制多边形时需要使用到一个插件,如果直接new出该工具会提示该工具不是一个函数之类的错误,在使用之前需要先告诉vue,你所是使用的是一个插件 AMap.plugin([&quo ...
java实现高德地图app,Android 高德地图入门demo，最新高德地图实现方法，附源码及apk...
[实例简介] Android 高德地图入门demo,最新高德地图实现方法,附源码及apk [实例截图] [核心代码] GaoDeDemo ├── GaoDeDemo │ ├── app │ │ ...
JavaScript高德地图中绘制echarts图表随地图移动
JavaScript高德地图中绘制echarts图表随地图移动** 先上效果图实现方法如下: 使用高德地图"信息窗体",信息窗体AMap.InfoWindow的属性content ...
高德地图限制绘制区域
高德地图在绘制过程中没有提供监听过程的Api:制造错误来进行中断绘制 // 创建地图createMap() {let self = this;self.center = [self.gpsAll[0] ...
高德地图web绘制省、市、区边界线和面积图
高德地图web绘制省.市.区边界线和面积图高德地图官方API 图例总结要点申请高德地图的key 用于后边web调用高德地图key申请引用 <script type="tex ...
【高德地图入门】--- 绘制点
高德地图内置了许多遮盖物的api,今天主要就是讲解常用的点,线,面的绘制方法点的绘制相对简单,只需要一个坐标值即可,例: [ 116.396783,39.894813 ] 创建地图为了更好的展示点 ...
【高德地图入门】--- 绘制线
高德地图内置了许多遮盖物的api,今天主要就是讲解线的绘制方法创建地图为了更好的展示线的绘制,我们需要先创建一个地图对象 <body><div id="containe ...
html页面调用高德地图,html前端使用高德地图入门教程,并在地图上标记位置-Go语言中文社区...
准备工作注册Key 首先, 登陆之后,在进入「应用管理」页面「创建新应用」为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」记住这个Key,等会要用,以后可能也会 ...
高德地图上绘制城市名字和带涟漪的点标记
接上一篇"vue中基于echarts和基于高德地图的两种地图下钻与上浮方式" import noEmerIcon from "./img/emerManagement/n ...

【高德地图入门】--- 绘制面

创建地图

面的类型

【高德地图入门】--- 绘制面相关推荐

最新文章

热门文章