利用現成範本在Google地圖上畫圓圈（新版）

關於本文的 36 則留言

1. 感謝版主的教學文，我也套用您的範例於自己的作品之中。不過可否再回答以下問題，謝謝。
   一、如何呈現沒有「標記」的圖示，例如台北盆地中的那灘水？
   二、如何呈現可以「勾選」四個核電廠的參數？
   三、如何讓每個圈圈可以有不同「大小」、「顏色」或「不規則多邊形」？
   四、「標記」或「圈圈」之內可插入數據或其他內容？

2. 您好 我想請問一下 如果一開始就要顯示 為地圖形態(不顯示地型圖)要如何修改?
   謝謝

   1. 將第45行裡的「g.MapTypeId.TERRAIN」改成「g.MapTypeId.ROADMAP」。

3. 你好，想請問一下需要不同半徑大小的圓，以及自動縮放到與視窗大小相同要如何修改，
   謝謝。

   1. 若半徑不同，則為半徑變數設定數列。其具體作法為：
      首先，刪除第18列，並在該處插入以下5行（請自行設定等號後的數值）：

      	var d = new Array();//半徑，單位為公尺
      	d[1] = 30000;
      	d[2] = 40000;
      	d[3] = 50000;
      	d[4] = 60000;​

      然後把第39列改為：​

      r[i] = new g.Circle({map: map,radius: d[i],fillColor: fc,strokeWeight: 1,strokeColor: bc});​

      若要改為與視窗同寬（或/且）同高，則在第43列至第44列之間插入：​

      document.getElementById("map-canvas").style.width = window.innerWidth + "px";
      document.getElementById("map-canvas").style.height = window.innerHeight + "px";​

      如此一來，第63列的width與height設定就等於無用，可以刪除。

      您可以下載全部改完後的檔案。
      （注意：以上所言之列號所對應的是本文原來所附的檔案，不是修改後的這個版本）。

4. 您好，請問一下如果想將此一圓圈所涵蓋的區加顏色，有辦法辦到嗎?
   ex:核一廠在石門區 他的圓圈會涵蓋到金山&三芝區 那我要如何將金山&三芝加顏色

   1. 啊…這個要加入別的指令。我沒做過，得研究一下。一有結果，就會po上來。

   2. 您想要達成的效果是否像這樣？

5. 恩…類似
   應該是 只要那個圓圈裡有碰觸到的鄉市鎮就會上色

   1. 瞭解。我今天比較忙，預計在午夜前後來寫個介紹。

6. 感恩

   1. 不客氣。我把內容另外獨立出來成一篇，算是本文的姊妹作。(夜裡寫著寫著，竟然睡著了…）

7. 請問這個範本可以搭配”我的地圖”的功能使用嗎？
   例如：把50個同學的地址都轉成座標，匯入”我的地圖”後，再看哪些人落在核電場危險範圍內。

   1. 1. 打開所欲使用的那一份「我的地圖」，複製其網址之中等號（=）後的代碼
      例如：
      https://www.google.com/maps/d/u/0/viewer?mid=1CxWP4MA5yYWr9Yr892eP5hGO1J4
      則取：
      1CxWP4MA5yYWr9Yr892eP5hGO1J4

      2. 在本文範例程式碼之第45、46兩行之間插入

      	var myMapsId = '1CxWP4MA5yYWr9Yr892eP5hGO1J4';
      	new google.maps.KmlLayer({
      		map: map,
      		url: 'https://www.google.com/maps/d/kml?mid=' + myMapsId
      	});
      

      將第一行的「1CxW … O1J4」替換成您的地圖網址代碼。

      That’s it!

8. WOW！成功了，謝謝您的分享！

   1. 不客氣。也很感謝您分享您的喜悅。

9. 不好意思，請問有辦法更改圓內的顏色嗎?或是取消掉只保留圓圈?。因為我圓的中央的顏色深到我看不清楚

   1. 改動第20行的「#FF0000」。

      若改為「#eeeeee」（或#eee），則為近白之灰色。改為「transparent」則為透明無色。

   2. 了解！感謝你的告知

   3. 不客氣 :)

10. 不好意思!我依您提供的方式已正確繪製出我要的範圍，但是我希望地圖可以秀出停車場的位置，請問該如何修改，麻煩你!

    1. 只要新增幾行，而且每一行都是皆改寫自既有的程式。您既已成功利用原版，必可迅速上手。

       第一步：在第42行與第43行之間插入以下的function，並配合您的需求而改寫之。

       	function moreMarkers(){//加入其它標誌
       		var mm =new Array();//標誌物件
       		var mmn = 2;//標誌數，自訂
       		var mmp = new Array();//標誌座標
       		var mmt = new Array();//標誌說明
       		var mmic = 'p.png';//標誌圖案。注意：請另準備圖檔，並自訂檔案名稱與網址
       		mmp[1] = new g.LatLng(25.047534, 121.505972);//標誌座標。自訂。以下同類各項視需要增刪
       		mmp[2] = new g.LatLng(25.031780, 121.537145);
       		mmt[1] = "洛陽停車場";//標誌說明文字內容。自訂。以下同類各項視需要增刪
       		mmt[2] = "大安森林公園地下停車場";
           	for (i = 1; i <= mmn; i++) {
       			mm[i] = new g.Marker({map: map,position: mmp[i],icon: mmic, zIndex: 900 - i,title: mmt[i]});
       		}
       	}
       

       第二步（=最後一步）：在第46行與第47行之間插入

       	moreMarkers();
       

       改寫後的結果 :)

11. 您好，我想請教
    我是使用 Google 的 My Map。
    我想要建立的是假設我地圖內有30個點
    當我點選某個點時顯示該點半徑1000公尺內有無其他點位。

    請問該如何做呢??

    1. 這比較麻煩。我儘量在24小時內寫一篇說明。

    2. 昨天沒空完成，剛才才完工。
       請參閱：〈在Google地圖設移動式雷達，呈現半徑內的特定目標〉。

12. 很捧的介紹，試成功了!讚。謝謝。

    1. 不客氣。
       謝謝您的讚美。

13. 請教一下，如何在點擊地圖時出現圓?
    例如:點一下出現一個圓，再點一下出現第二個圓。謝謝!

    1. 兩步驟。首先，用以下7行取代原程式的第36-42行：

       function seqAddCircle() {
       	i = r.length;
       	i = i + (1 - Math.sign(i));
       	m[i] = new g.Marker({map: map,position: p[i],icon: ic,zIndex: 80 - i, title: t[i]});
       	r[i] = new g.Circle({map: map,radius: l,fillColor: fc,strokeWeight: 1, strokeColor: bc});
       	r[i].bindTo('center', m[i], 'position');
       }
       

       然後，用以下3行取代原程式的第46行：

       map.addListener('click', function() {
       	seqAddCircle();
       });
       

       改寫後的結果 :)

       2016-10-16 18:07 修正錯誤連結

14. 謝謝您的解答。但，我沒表達清楚，我真正想請教的是，點擊時，以『點擊點為中心點』畫圓。例如點第一點，以第一點為中心出現圓；點第二點，以第二點為中心又山現一個圓。謝謝!

    1. 不客氣。
       在Google Maps API的架構中，點擊地圖與點擊標示是兩件事。
       實際作法：回到本文範例，改寫其中三個部份
       1. 將原程式之第22、23行改為

       var m; 
       var r; 
       

       2. 以下列程式取代原程式之第32-46行：

       function addMarkers(){
       	for (i = 1; i <= n; i++) {
       		m = new g.Marker({
       			map: map,
       			position: p[i],
       			icon: ic,
       			zIndex: 80 - i,
       			title: t[i]
       		});
       		m.addListener('click', function(event) {
       			clickPoint = event.latLng;
       			redrawCircle(clickPoint);
       		});
       	}	
       }
       function redrawCircle(center) {
       	//if (r){
       	//	r.setMap(null);
       	//}
       	r = new g.Circle({
       		map: map,
       		radius: l,
       		center: center,
       		fillColor: fc,
       		strokeWeight: 1,
       		strokeColor: bc
       	});
       }
       

       （若要在每次點擊時只在圖上秀單一圓圈，則刪除以上第17-19行的所有雙斜線）

       3. 將原程式的第46行改為：

       addMarkers();
       

       改寫後的結果

15. 謝謝你詳細的解說，讓我受益良多。但程式太深澳了，我仍無法從中改寫真正我想要的東西。我真正想要的東西是，點擊地圖『任意二點(或更多)』出現以該二點為圓心的圓。你的最後版本已預設圓心所在，我本來以為可以從中改寫，但程式碼實在太艱深了，寫不出來。所以，只好硬著頭皮再來麻煩您指點一下迷津。感恩。

    1. 終於有點時間來回應。

       就我所知，Google Maps API讀取點擊時，程序是一個一個來，無法同時讀取觸控螢幕上的同時點擊。

       您想做到的效果不需要太複雜的程式。請先參照這一篇上半部份的介紹，但在第三階段改用以下的程式：

       <script type="text/javascript">
       var g = google.maps;
       var map, clickPoint, clickMarker, clickCircle;
       //地圖中心座標
       var mapCenter = new g.LatLng(23.972583, 120.979361);
       //地圖縮放比例（數值越大，細節越清楚）
       var mapScale = 7;
       //搜尋半徑，單位為公尺
       var rad = 100000;
       
       //圓周顏色
       var circleOutlineColor = '#c0c0c0';
       //圓內顏色
       var circleFillColor = '#e0e0e0';
       
       //顯示點擊處；true＝是；false＝否
       var clickPointDisplay = true;
       
       //是否顯示地圖說明視窗。true＝是；false＝否
       var infoWindowDisplay = true;
       //是否自動關閉地圖說明視窗。true＝是；false＝否
       var infoWindowAutoClose = true;
       //自動關閉地圖說明視窗預設時間；計時單位為千分之一秒
       var infoWindowTimer = 3000;
       //地圖總說明文字
       var infoWindowText = '請地圖上任意點觸';
       var w = new g.InfoWindow({
       	content: infoWindowText, 
       	position: mapCenter
       });
       
       //繪製圓圈
       function updateCircle(){
       	clickCircle = new g.Circle({
       		新圓圈所依附的地圖物件
       		map: map,
       		//園心
       		center: clickPoint,
       		//半徑
       		radius: rad,
       		//內部顏色
       		fillColor: circleFillColor,
       		//圓周線條粗細
       		strokeWeight: 1,
       		//圓周線條顏色
       		strokeColor: circleOutlineColor,
       		//圓在圖層堆疊中的垂直位置
       		zIndex: -100
       	});
       	//讀取發生於圓內的點擊
       	g.event.addListener(clickCircle, 'click', function (e) {
       		//讀取點擊處的經緯度
       		clickPoint = e.latLng;
       		//更新疊層中的圖像
       		updateGraph();
       	});
       }
       //繪製最新點擊處的標記
       function updateClickMarker(){
       	clickMarker = new g.Marker({
       		map: map,
       		position: clickPoint,
       		//圖形，可自訂
       		icon: {
       			//以簡單的小圓圈呈現圓心
       			path: g.SymbolPath.CIRCLE,
       			//顏色
       			strokeColor:'#9932CC',
       			//尺寸
       			scale: 2
       		},
       		//使圓圈無法被拖曳無法
       		draggable: false,
       		//此標記在圖層堆疊中的垂直位置
       		zIndex: -1
       	});
       }
       //繪製疊層
       function updateGraph(){
       	//繪製圓圈
       	updateCircle();
       	//繪製最新點擊處的標記
       	if (clickPointDisplay = true){
       		updateClickMarker();
       	}
       }
       //啟動
       $(document).ready(function(){
       	var mapDiv = document.getElementById('map-canvas');
       	//建立基本地圖
       	map = new g.Map(mapDiv, {
       		center: mapCenter, 
       		zoom: mapScale, 
       		mapTypeId: g.MapTypeId.ROADMAP
       	});
       	//讀取地圖上被點擊的座標
       	map.addListener('click', function(event) {
       		clickPoint = event.latLng;
       		//（重新）繪製疊層
       		updateGraph();
       	});
       	//顯示地圖說明視窗
       	if(infoWindowDisplay==true){
       		w.open(map);
       		if(infoWindowAutoClose==true){
       			var o =setTimeout("w.close()", infoWindowTimer);
       		}
       	}
       });
       </script>
       

       結果

16. 您好請問一下打開後的地圖被框限得很小，能夠調邊界尺寸嗎?
    目前只能顯示整個螢幕的一半大小而已

17. 請問怎麼 每個圓 個別顏色

18. 對不起!我檔案改完成,但是用DriveToWeb 得到的連結打開是整個白色沒有東西

迴響已關閉。