2. 程式人生 > >高德地圖API以案例學習3——線和麵（折線、多邊形、圓、橢圓、矩形）

高德地圖API以案例學習3——線和麵（折線、多邊形、圓、橢圓、矩形）

阿新 • • 發佈：2019-01-21

上一篇介紹完了點（Marker）這篇介紹線和麵，這裡只介紹折線Polyline，而貝瑟爾曲線暫時不介紹

1.線Polyline,其實折線很簡單，提供一個 包含若干點的陣列，設定為其屬性即可，先來個最簡單的案例：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>線</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申請的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>
		
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable :true,
				center:[116.397428, 39.90923],
				zoom:12
			});
			//設定線的路徑點，線 將會從第一個點開始往後按順序連起來
			var lines = [];
			lines.push([116.368904, 39.913423]);
			lines.push([116.382122, 39.901176]);
			lines.push([116.387271, 39.912501]);
			lines.push([116.398258, 39.904600]);
			//繪製線
			var polyLine = new AMap.Polyline({
				//折線的節點座標陣列
				path:lines,
				map:map
			});
		</script>
	</body>
</html>

2.折線的屬性及方法

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>線</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申請的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>
		
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable :true,
				center:[116.397428, 39.90923],
				zoom:12
			});
			//設定線的路徑點，線 將會從第一個點開始往後按順序連起來
			var lines = [];
			lines.push([116.368904, 39.913423]);
			lines.push([116.382122, 39.901176]);
			lines.push([116.387271, 39.912501]);
			lines.push([116.398258, 39.904600]);
			//繪製線
			var polyLine = new AMap.Polyline({
				//折線的節點座標陣列
				path:lines,
				map:map,
				strokeColor: "#00A",  //線顏色
        		strokeWeight: 4,      //線寬
//      		geodesic:true, //是否繪製成大地線 （大地線（Geodesic Lines）是指地球橢球面上兩點間的最短程曲線）想看效果可以把第一個點經度改為 115
				isOutline:true, //線是否帶描邊，預設為false
//				borderWeight:3,  //描邊寬度，預設為1
//				outlineColor:"#F00", //描邊顏色
//				lineJoin:"bevel", //折線拐點的繪製樣式  預設為尖角，round圓角，bevel斜角
//				lineCap:'round', //折線兩端的樣式，預設無樣式，round圓頭，square方頭
//				draggable:true,  //折線是否可拖動，預設為false
//				showDir :true,   //是否沿路徑顯示箭頭方向
				extData:{"id":"aa"}//設定自定義屬性，支援js任意資料型別。
			});
			console.log(polyLine.getPath())//獲取折線路徑的節點陣列
			console.log(polyLine.getLength())//獲取折線總長度
			console.log(polyLine.getExtData().id)//獲取自定義的屬性
			console.log(polyLine.getBounds())//獲取當前折線的矩形範圍物件（構造一個矩形需要一個Bounds物件，其實就是一個西南座標 + 東北座標構成）
			//設定 點選地圖使得該線隱藏，再點選又顯示，如此反覆
			var i = false;
			map.on('click',function(){
				if(i){
					polyLine.show();//顯示
				}else{
					polyLine.hide();//隱藏
				}
				i=!i;
			})
		</script>
	</body>
</html>

3.多邊形polygon,多邊形的繪製方式跟折線一樣，提供一個點陣列即可

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>多邊形</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申請的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>

		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				zoom:12,
				center:[116.397428, 39.90923]
			})
			
			var polygonArr = new Array();//多邊形覆蓋物節點座標陣列
		    polygonArr.push([116.403322, 39.920255]);
		    polygonArr.push([116.410703, 39.897555]);
		    polygonArr.push([116.402292, 39.892353]);
		    polygonArr.push([116.389846, 39.891365]);
		    
		    var polyGon = new AMap.Polygon({
		    	path:polygonArr, //這裡我設的是一維陣列，多邊形引數可設二維陣列，如果設定二維陣列，將出現的是一箇中間鏤空的多邊形（也就是官方所說的帶洞多邊形）
		    					//二維陣列 [外圈多邊形點陣列,內圈多邊形點陣列]
		    	map:map
		    });
		</script>
	
	</body>
</html>

4.多邊形的屬性和方法介紹：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>多邊形</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申請的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>

		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				zoom:12,
				center:[116.397428, 39.90923]
			})
			
		    var polygonArr = new Array();//多邊形覆蓋物節點座標陣列
		    polygonArr.push([116.403322, 39.920255]);
		    polygonArr.push([116.410703, 39.897555]);
		    polygonArr.push([116.402292, 39.892353]);
		    polygonArr.push([116.389846, 39.891365]);
		    
		    var polyGon = new AMap.Polygon({
		    	path:polygonArr, //這裡我設的是一維陣列，多邊形引數可設二維陣列，如果設定二維陣列，將出現的是一箇中間鏤空的多邊形（也就是官方所說的帶洞多邊形）
		    					//二維陣列 [外圈多邊形點陣列,內圈多邊形點陣列]
		    	map:map,
		    	bubble:true,//事件可穿透到地圖上
		    	 strokeColor: "#3366FF", //線顏色
		        strokeOpacity: 1,       //線透明度
		        strokeWeight: 5,        //線寬
		        strokeStyle: "solid",   //線樣式
		        strokeDasharray: [10, 5] //補充線樣式
		    });
		    console.log(polyGon.getArea())//獲取多邊形面積
		    //其他一些基本的跟折線一樣的屬性 方法這裡就不再介紹了，這裡介紹一下contains方法
		    //判斷指定點座標是否在多邊形範圍內
		    //這裡的案例因為我設定了bubble:true,因此我在點選多邊形的時候事件可以穿透到地圖上。
		    map.on('click',function(e){
		    	if(polyGon.contains(e.lnglat)){
		    		alert("您點選在多邊形內");	
		    	}else{
		    		alert("您點選在多邊形外");
		    	}
		    })
		</script>
	
	</body>
</html>

5.圓形circle,圓形是以圓心和半徑確定一個圓的，圓形的屬性和方法跟多邊形大體類似，都是層疊順序啊、獲取圓心、半徑，判斷一個 點是否在覆蓋物內等等

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>圓形</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申請的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>
		
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				zoom:12,
				center:[116.397428, 39.90923]
			})
			//圓形
			var circle = new AMap.Circle({
				radius: 2000, //半徑
				center: [116.403322, 39.920255],// 圓心位置
				map:map
			});
		</script>
	</body>
</html>

6.橢圓，橢圓也是以圓心和半徑確定一個橢圓，區別是橢圓的半徑有兩個，一個橫向半徑、一個縱向半徑

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>橢圓形</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申請的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>
		
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				zoom:12,
				center:[116.397428, 39.90923]
			})
			//橢圓
			var ellipse = new AMap.Ellipse({
				map:map,
				center: [116.403322, 39.920255],//圓心
				radius:[1000,2000]//半徑，1000是橫向半徑，2000是縱向半徑
			});
			
		</script>
	</body>
</html>

7.矩形，矩形的主要靠西南角的點和東北角的點來確定一個矩形(Bounds物件)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>圓形</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申請的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>
		
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				zoom:12,
				center:[116.397428, 39.90923]
			})
			//矩形  Rectangle
			var rectangle = new AMap.Rectangle({
				map:map,
				bounds:new AMap.Bounds([116.376533, 39.907878],[116.414124, 39.940799])//第一個為西南角點，第二個為東北角點
			});
			
		</script>
	</body>
</html>

相關推薦

高德地圖API以案例學習3——線和麵（折線、多邊形、圓、橢圓、矩形）

上一篇介紹完了點（Marker）這篇介紹線和麵，這裡只介紹折線Polyline，而貝瑟爾曲線暫時不介紹1.線Polyline,其實折線很簡單，提供一個 包含若干點的陣列，設定為其屬性即可，先來個最簡單的案例：<!doctype html> <html>

高德地圖API學習使用-JavaScript

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申請的key值&

轉載：高德地圖API學習 從零開始學高德JS API（一）地圖展現

摘要：關於地圖的顯示，我想大家最關心的就是麻點圖，自定義底圖的解決方案了吧。在過去，marker大於500之後，瀏覽器開始逐漸卡死，大家都開始尋找解決方案，比如聚合marker啊，比如麻點圖啊。聚合marker裡面還有一些複雜的演算法，而麻點圖，最讓大家頭疼的，就是如何生成麻點圖，如何切圖，如何把圖片貼到地圖

2017高德地圖API WEB開發（key申請，地圖搭建）簡約教程

height 圖層 類型 開發文檔 doctype content 如何 加載 innerhtml 前端時間因為公司需要研究 了一下百度的教程 然後寫個簡約的筆記記錄一下自己學習的收獲，只為了滿足自己暫時的寫作熱情 高德地圖WEB開發（key申請、api）簡

java利用高德地圖API將經緯度轉換為具體的位置顯示

根據高德地圖API解析經緯度為具體的位項目有個需求，頁面顯示的時候，數據庫該字段顯示的經緯度，如何將經緯度轉換為具體的位置並顯示呢？核心點如下：java利用高德地圖API將經緯度轉換為具體的位置顯示

調用高德地圖API（熱力圖）詳解

ocs use map asc type contain maps key script 具體腳本語言如下： <!doctype html> <html> <head> <meta charset="utf-8">

java呼叫高德地圖API開發，高德線上地圖開發——未完待續

這是目錄 一、引入高德地圖API 二、高德地圖開發 1、定義一個div來存放地圖 2、生成地圖 3、新增一個跳躍的點 4、新增控制元件 5、有其他需要的請留言 一、引入高德地圖API   高德地圖官方示例：https://lbs.amap.c

高德地圖api之location定位

關於定位，分為GPS定位和網路定位。本文將詳細描述的瀏覽器定位，屬於網路定位。這是一種通過使用高德JS-API來實現位置定位、城市定位的方法，包含了IP定位，檢索等多種網路定位方式。如果您的手機支援GPS功能，能夠自動獲取GPS資訊，定位將更加準確。 瀏覽器定位 瀏覽器定位外掛，

高德地圖API獲取的經緯度轉為百度地圖經緯度顯示

通過高德地圖API獲取的經緯度顯示在百度地圖上會有位置的偏差，原因是百度地圖對經緯度進行了加密，通過以下方法對經緯度進行轉換可在百度地圖上精準顯示 private double[] gaoDeToBaidu(double gd_lon, double gd_lat) { double[]

vue結合vue-amap呼叫高德地圖api

1、到高德地圖開放平臺申請key 2、npm安裝vue-amap 3、在main.js中引入並初始化 4、以獲取周邊資訊為例，PlaceSearch的官方文件 5、展示結果 6、上面方式是根據設定的經緯度獲取周邊資訊，如果想實時獲取當前位置可以這樣，在data中新增一個plugin

高德地圖API（流程法）整理分析

【高德地圖API（流程法）分析】： 前言：公司現在的網約車專案，使用的是高德地圖，因為地圖導航這一塊的功能佔比量比較大，為了方便大家對高得地圖API的瞭解和學習使用，使用流程圖把高德API分析整理了下。 ——————————————————【一】流程：開始當前位置定位————————————————————

高德地圖API呼叫和標準（轉）

看過高德地圖API的同學都知道，高德地圖不同端呼叫是不一樣的，作為一個前端菜鳥，前一陣分別在pc端和移動端分別呼叫了高德地圖。情況是這個樣子的，PC端呢我們可以用高德API的web端的javascript程式碼。呼叫沒有問題，具體是這樣的： <!DOCTYPE htm

高德地圖介面申請 地圖介面整合 高德地圖API文件

最近筆者在做一個直播APP，裡面有個附近的視訊功能，獲取周邊的視訊，要實時定位，用到高德地圖，那麼筆者把高德地圖介面申請以及介面整合的過程分享出來。 一、註冊 1、填寫資訊 2、成為開發者 3、註冊完成 4、建立應用 5、為應用新增key 填寫

關於高德地圖api的使用（一）

最近筆者的專案打算新增周邊服務的模組，因此嘗試使用了高德地圖。 先上預覽圖，開啟的時候會自動定位（這裡是使用了瀏覽器ip定位，pc端可能不準）。隨意點選會生成一個藍色的標記，並且自動搜尋附近的美食服務。 初始定位（瀏覽器ip定位） AMap.plugin('AMap

高德地圖api 點聚合+海量點+點選事件（根據地區或座標進行定位）

<!doctype html> <html lang="zh-CN">     <head>         <!-- 原始地址：//webapi.amap.c

高德地圖api 常用JS元件

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=你自己的key"></script> <!-- UI元件庫 1.0 --> <script s

安卓高德地圖API根據城市名獲取對應的經緯度和地理編碼

private void getLatlon(String cityName){ GeocodeSearch geocodeSearch=new GeocodeSearch(con

SpringCloud之如何在專案中呼叫高德地圖API

登入高德開放平臺http://lbs.amap.com/，成為開發者，這個過程需要繫結郵箱。 成功後進入控制檯。點選應用管理。並建立新應用。應用名稱都可以自己看著填。 成功後就可以新增key了，當然，也要有名稱等資訊。 ------------------到這裡完成了第

微信小程式---高德地圖API

本文章介紹微信小程式呼叫高德地圖API的過程，使用高德定位功能做演示。 微信小程式目前支援百度地圖、高德地圖、騰訊地圖。用法可以說是基本完全一樣，本文章以高德為例，簡單說一下他們的區別，高德地圖精度應該是最準確的，畢竟本來就是做地圖出生的。百度地圖的精度目前較高德而言，還是要稍稍欠缺一

【高德地圖API】從零開始學高德JS API（七）——定位方式大揭祕

摘要：關於定位，分為GPS定位和網路定位2種。GPS定位，精度較高，可達到10米，但室內不可用，且超級費電。網路定位，分為wifi定位和基站定位，都是通過獲取wifi或者基站資訊，然後查詢對應的wifi或者基站位置資料庫，得到的定位地點。定位資料庫可以不斷完善不斷補充，所以，