谷歌地圖，標記、多邊形繪製、地址搜尋、自定義右鍵選單
阿新 • • 發佈：2019-02-20
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>谷歌地圖測試</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="renderer" content="webkit" /> <meta content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport"> <meta content="chrome=1" http-equiv="X-UA-Compatible"> <link rel="icon" href="maps_32dp.ico" mce_href="maps_32dp.ico" type="image/x-icon" /> <style> #map { width: 961px; height: 591px; margin: 0 auto; } html, body { height: 100%; margin: 0; padding: 0; } .itemDiv { margin-bottom: 20px; } .mytool { text-align: center; width: 40px; border: 1px solid #ccc; padding-top: 5px; padding-bottom: 5px; font-size: 10px; background: #ffffff; } .mytool > a { text-decoration: none; display: block; display: inline-block; padding: 4px 6px; } .mytool > a:hover { background-color: #b6ff00; } </style> </head> <body> <div id="map"></div> <div style="position:absolute;left:700px;bottom:128px;width:348px;height:50px;"> <div>滑鼠點選位置座標：</div> <div id="msg"></div> </div> <div style="padding:50px;"> <div class="itemDiv"> Mark定位切換：<select id="positionList" onchange="pageConfig.changePosition(this)"> <option value="">--請選擇--</option> </select> </div> <div class="itemDiv"> 店鋪服務範圍：<select id="Store" onchange="pageConfig.storeChange(this, event)"></select> </div> <div class="itemDiv"> <input type="text" id="serarchAddressTxt" placeholder="搜尋地址" /> <input type="button" value="搜尋" onclick="pageConfig.searchAddress()" /><span id="tishiMsg"></span> </div> </div> <script type="text/javascript"> var serviceList = [{ "NetworkSysNo": 413463191394193400, "NetworkName": "寬窄巷子", "FullAddress": "四川省成都市青羊區寬窄巷子長順上街127號", "Contacts": "魯智深", "ContactNumber": "53453333333333334", "SysNo": 414861680137211900, "NetworkBizAuthSysNo": 413838142236266500, "MapType": 0, "MapScope": "30.659634242460026,104.04793404161421;30.668198440652468,104.05171059190718;30.66074172460761,104.05861996232954" }, { "NetworkSysNo": 413463191394193400, "NetworkName": "天府麗都喜來登飯店", "FullAddress": "四川省成都市青羊區騾馬市人民中路一段15號", "Contacts": "範喜鳳", "ContactNumber": "53453333333333334", "SysNo": 414861680191737860, "NetworkBizAuthSysNo": 413838142236266500, "MapScope": "30.662255263019365,104.07338284074751;30.66435941118352,104.07389782487837;30.662107601778743,104.0750565391728;30.662144517110058,104.07788895189253;30.660630976963905,104.07570026933638;30.658711330976477,104.07668732225386;30.65959732616989,104.07441280900923;30.658083746133983,104.07295368730513;30.660335649293653,104.07316826402632;30.661516954560145,104.07080792009322" }, { "NetworkSysNo": 413463191394193400, "NetworkName": "青羊宮", "FullAddress": "成都市青羊區青羊宮商圈青羊區180號", "Contacts": "蘇三四", "ContactNumber": "53453333333333334", "SysNo": 414861680216903700, "NetworkBizAuthSysNo": 413838142236266500, "MapType": 0, "MapScope": "30.65860058100626,104.06243942796675;30.652139946479448,104.06201027452437;30.652103027327172,104.06909130632368;30.658379080685105,104.0695633751103" }, { "NetworkSysNo": 413463191394193400, "NetworkName": "騾馬市", "FullAddress": "四川省成都市武侯區武侯祠武侯祠大街231號", "Contacts": "狄仁傑", "ContactNumber": "53453333333333334", "SysNo": 414861680288206850, "NetworkBizAuthSysNo": 413838142236266500, "MapType": 0, "MapScope": "30.667386350984888,104.06273983537642;30.667312524313026,104.07042168199507;30.663030480831143,104.0703358513066;30.66336271513254,104.06252525865523" }, { "NetworkSysNo": 413463191394193400, "NetworkName": "蜀九香火鍋酒樓", "FullAddress": "四川省成都市青羊區青羊宮商圈百花西路5號", "Contacts": "閻錫山", "ContactNumber": "53453333333333334", "SysNo": 414861680372092900, "NetworkBizAuthSysNo": 413838142236266500, "MapScope": "30.65752999141844,104.05141018449751;30.650626249675994,104.05269764482466;30.65428123318884,104.05810497819868;30.656680894693064,104.05514381944624;30.65476117025514,104.05359886705367" }, { "NetworkSysNo": 413463191394193400, "NetworkName": "成都圖書館", "FullAddress": "四川省成都市青羊區人民公園文翁路98號", "Contacts": "范文程", "ContactNumber": "53453333333333334", "SysNo": 414861680405647360, "NetworkBizAuthSysNo": 413838142236266500, "MapScope": "30.65878516421945,104.04394291460005;30.65804682925163,104.0408530098149;30.654835006515416,104.0408530098149;30.653875130733244,104.0448870521733;30.6556841194549,104.04720448076216;30.658083746133983,104.04505871355025" }, { "NetworkSysNo": 413463191394193400, "NetworkName": "航天科技大廈", "FullAddress": "四川省成都市錦江區指揮街111號", "Contacts": "李世民", "ContactNumber": "53453333333333334", "SysNo": 414861680439201800, "NetworkBizAuthSysNo": 413838142236266500, "MapScope": "30.650356275834888,104.0625315210408;30.64193818902546,104.0582829019612;30.640055095637415,104.06905465336501;30.6472549606879,104.07613568516433;30.650245516292472,104.06283192845046" }, { "NetworkSysNo": 413463191394193400, "NetworkName": "成都拖板鞋青年旅舍", "FullAddress": "四川省成都市錦江區合江亭東昇街98號", "Contacts": "薛呂徵", "ContactNumber": "53453333333333334", "SysNo": 414861680481144800, "NetworkBizAuthSysNo": 413838142236266500, "MapScope": "30.656890864252322,104.08128552647293;30.650799312735753,104.07394700260818;30.646959592152832,104.08055596562087;30.64902715295193,104.08257298680007;30.6472549606879,104.08407502384841;30.644596611393837,104.08094220371902;30.64337817687897,104.0828304788655;30.644116623871977,104.08789448948562;30.643415099362535,104.09175687046707;30.64969171667721,104.09609132023513" }, { "NetworkSysNo": 413463191394193400, "NetworkName": "成都泰合索菲特大飯店", "FullAddress": "四川省成都市錦江區濱江中路15號", "Contacts": "歐陽修", "ContactNumber": "53453333333333334", "SysNo": 414861680514699260, "NetworkBizAuthSysNo": 413838142236266500, "MapScope": "30.66541839148557,104.08712201328933;30.660471779015555,104.08386044712722;30.653789758716457,104.09849457951248;30.657296954039,104.10059743138015;30.660545610913708,104.09441762180984;30.662391390037417,104.09574799748123;30.66316660675722,104.097507526595;30.664015646505653,104.09789376469314;30.664938507336572,104.09802251072585;30.6656767896556,104.09789376469314;30.670918431917208,104.09566216679275;30.673133124873793,104.09484677525222;30.674240452312073,104.09287266941726" }]; var map; var drawingManager; var infoWindow; var polygonArr = []; var select_OldPolygon; //待刪除的多邊形服務範圍 var waitRemovePolygon = null; var arrPosition = [ [{ name: '四川科技館', address: "四川省成都市青羊區騾馬市人民中路一段16號" }, 30.659634242460026, 104.06582974016158],//四川科技館 [{ name: '人民公園', address: "四川省成都市青羊區人民公園祠堂街9號" }, 30.65711866001459, 104.05755979623416],//人民公園 [{ name: '航天科技大廈', address: '四川省成都市錦江區新光華街1號' }, 30.65245921769793, 104.06661987304688],//航天科技大廈 [{ name: '陝西街', address: '四川省成都市青羊區陝西街195號' }, 30.654457224647835, 104.06189424600223],//陝西街 [{ name: '金家壩街', address: '四川省成都市青羊區金家壩街' }, 30.659813581249217, 104.06193716134646],//金家壩街 [{ name: '陽光大廈', address: '四川省成都市錦江區鹽市口商圈順城大街11號' }, 30.655829211946056, 104.07251889061115], [{ name: '青龍湖溼地公園', address: '十陵風景區內' }, 30.634983010145675, 104.18836222190498], //青龍湖溼地公園 [{ name: '彭州園', address: '四川省成都市彭州市外西街' }, 30.98546577967493, 103.93127657158232] ]; var result_mark; var pageConfig = { //右鍵選單 createRightMenu: function (divDom, map) { var controlUI = document.createElement('div'); var waiDiv = document.createElement('div'); waiDiv.className = "mytool"; var a1 = document.createElement('a'); a1.href = "javascript:;"; a1.innerText = "編輯"; a1.addEventListener('click', function (source, event) { waitRemovePolygon.setEditable(true); document.getElementById('rightMenu').remove(); }); waiDiv.appendChild(a1); var a2 = document.createElement('a'); a2.href = "javascript:;"; a2.innerText = "完成"; a2.addEventListener('click', function (source, event) { waitRemovePolygon.setEditable(false); document.getElementById('rightMenu').remove(); //記錄多邊形坐標點 console.log(waitRemovePolygon); var array = waitRemovePolygon.getPath().getArray(); var pathStrArr = []; for (var i = 0; i < array.length; i++) { var item = array[i]; var txt = item.lat() + "," + item.lng(); pathStrArr.push(txt); console.log(txt); } }); waiDiv.appendChild(a2); var a3 = document.createElement('a'); a3.href = "javascript:;"; a3.innerText = "刪除"; a3.addEventListener('click', function (source, event) { waitRemovePolygon.setMap(null); document.getElementById('rightMenu').remove(); }); waiDiv.appendChild(a3); divDom.appendChild(waiDiv); }, //多邊形右鍵事件 polygonRightClick: function (obj, event) { waitRemovePolygon = obj; //console.log(event); var txt = event.Ha.clientX + ',' + event.Ha.clientY; //測試demo沒有全屏，水平方向與左側螢幕邊有距離，所以要減去 var positionX = event.Ha.clientX-230; var positionY = event.Ha.clientY; console.log("右鍵坐標"+txt); //判斷是否存在此選單 if (document.getElementById('rightMenu') != undefined) { document.getElementById('rightMenu').remove(); } var controlDiv = document.createElement('div'); controlDiv.id = 'rightMenu'; controlDiv.index = 1; controlDiv.style.position = "absolute"; controlDiv.style.zIndex = "20000"; controlDiv.style.left = positionX + 'px'; controlDiv.style.top = positionY + 'px'; controlDiv.style.display = "none"; var rightMenu = new pageConfig.createRightMenu(controlDiv, map); map.controls[google.maps.ControlPosition.CENTER].push(controlDiv); setTimeout(function () { controlDiv.style.left = positionX + 'px'; controlDiv.style.top = positionY + 'px'; controlDiv.style.display = "block"; }, 10); //10秒不操作移除右鍵選單 setTimeout(function () { controlDiv.remove(); }, 10000); }, //載入多邊形，服務範圍 loadPolygon: function (areaList) { for (var i = 0; i < areaList.length; i++) { var item = areaList[i]; var postions = item.MapScope.split(';'); var triangleCoords = []; for (var g = 0; g < postions.length; g++) { var item_g = postions[g]; var lat = parseFloat(item_g.split(',')[0]); var lng = parseFloat(item_g.split(',')[1]); triangleCoords.push({ lat: lat, lng: lng }); } //var triangleCoords = [ // { lat: 30.664033294338832, lng: 104.07738823715908 }, // { lat: 30.660710922980797, lng: 104.08755917374356 }, // { lat: 30.65617016408385, lng: 104.08348221604092 }, // { lat: 30.65908661097046, lng: 104.07468457047207 } //]; //計算多邊形中心座標 var centerLatLng = pageConfig.getCenter(triangleCoords); // Construct the polygon. var _old_Polygon = new google.maps.Polygon({ paths: triangleCoords, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.2, //title:'測試服務範圍1' }); //方便選中店鋪高亮顯示 _old_Polygon.SysNo = item.SysNo; //中心座標 _old_Polygon.CenterLatLng = centerLatLng; polygonArr.push(_old_Polygon); _old_Polygon.setMap(map); //清理集合 triangleCoords.length = 0; _old_Polygon.info = { id: item.NetworkSysNo, name: item.NetworkName, address: item.FullAddress, contact: item.Contacts, phone: item.ContactNumber }; //服務範圍點選，資訊提示 _old_Polygon.addListener("click", function (event) { var objInfo = this.info; var msg = objInfo.name + "<br />" + "地址：" + objInfo.address + "<br />" + "聯絡人：" + objInfo.contact + "<br />" + "電話：" + objInfo.phone; pageConfig.markerTips(msg, event.latLng); }); //註冊多邊形右鍵事件 _old_Polygon.addListener('rightclick', function (event) { pageConfig.polygonRightClick(this, event); }); } //定位服務範圍第一個服務區 if (polygonArr.length > 0) { var firstOne = polygonArr[0]; map.panTo(firstOne.CenterLatLng); } }, //改變位置定位 changePosition: function (thisObj) { var position = new google.maps.LatLng(thisObj.value.split(',')[0], thisObj.value.split(',')[1]); if (result_mark != null) { result_mark.setMap(null); } result_mark = new google.maps.Marker({ position: position }); result_mark.setMap(map); map.panTo(position, 15); }, //搜尋地址 searchAddress: function () { var index = 0; var waitShow = setInterval(function () { if (index == 4) { index = 1; } var points = "。。。。。"; var shouPoints = points.substring(0, index); document.getElementById('tishiMsg').innerHTML = "查詢中" + shouPoints; index++; }, 200); var address = document.getElementById("serarchAddressTxt").value; var request = { address: address }; var geocoder = new google.maps.Geocoder(); geocoder.geocode(request, function (GeocoderResult, GeocoderStatus) { //移除載入等待效果... window.clearInterval(waitShow); document.getElementById('tishiMsg').innerHTML = ""; console.log("GeocoderStatus:" + GeocoderStatus); console.log(GeocoderResult); //GeocoderResult.geometry.location var location = GeocoderResult[0].geometry.location; console.log(GeocoderResult[0].geometry.location); if (result_mark != null) { result_mark.setMap(null); } result_mark = new google.maps.Marker({ position: location }); result_mark.setMap(map); //定位到搜尋結果 map.panTo(location); }); }, //計算多邊形中心點 getCenter: function (triangleCoords) { var x = 0.0; var y = 0.0; for (var i = 0; i < triangleCoords.length; i++) { x = x + parseFloat(triangleCoords[i].lat); y = y + parseFloat(triangleCoords[i].lng); } x = x / triangleCoords.length; y = y / triangleCoords.length; return new google.maps.LatLng(x, y); }, //彈出訊息框 markerTips: function (msg, position) { infoWindow.setContent(msg); infoWindow.setPosition(position); infoWindow.open(map); }, //店鋪改變時 storeChange: function (obj, event) { //失去焦點後還原填充色 if (select_OldPolygon != undefined && select_OldPolygon != null) { select_OldPolygon.setOptions({ fillColor: '#FF0000' }); } //高亮定位到選擇的服務區 var storeId = obj.value; //console.log("storeId=" + storeId); var polygonResult = polygonArr.find(w => w.SysNo == storeId); polygonResult.setOptions({ fillColor: '#33CC33' }); //定位此圖 map.panTo(polygonResult.CenterLatLng); //顯示出此中心 //pageConfig.markerTips(polygonResult.CenterLatLng.toString(), polygonResult.CenterLatLng); //顯示服務區資訊 //var objInfo = polygonResult.info; //var infoMsg = objInfo.name + "<br />" + // "地址：" + objInfo.address + "<br />" + // "聯絡人：" + objInfo.contact + "<br />" + // "電話：" + objInfo.phone; //pageConfig.markerTips(infoMsg,polygonResult.CenterLatLng); select_OldPolygon = polygonResult; //console.log(polygonResult); } } //載入位置下拉框 var arr_select = []; for (var i = 0; i < arrPosition.length; i++) { var item = arrPosition[i]; var p = item[1] + "," + item[2]; var option = '<option value="' + p + '">' + item[0].name + '</option>'; arr_select.push(option); } document.getElementById('positionList').innerHTML += arr_select.join(''); //地圖初始化 function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(arrPosition[0][1], arrPosition[0][2]), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false,//地圖型別選擇，地形，衛星之類 scaleControl: false, streetViewControl: false,//不顯示街景【按鈕】，地圖中右側的小人 zoomControl: false, //不顯示縮放【按鈕】+-號 fullscreenControl:false //不顯示全屏【按鈕】 }); //訊息框初始化 infoWindow = new google.maps.InfoWindow; //繪畫工具 drawingManager = new google.maps.drawing.DrawingManager({ //drawingMode: google.maps.drawing.OverlayType.POLYGON, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ //多邊形 google.maps.drawing.OverlayType.POLYGON ] }, polygonOptions: { strokeColor: "#000000", strokeOpacity: 1, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.2, editable: true, geodesic: true, } }); //繪圖工具載入設定 drawingManager.setMap(map); eventList(); //載入多邊形 pageConfig.loadPolygon(serviceList); //註冊 多邊形 繪製完成事件 google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) { //退出繪圖模式 drawingManager.setDrawingMode(null); //退出編輯模式 polygon.setEditable(false); //console.log(polygon); console.log("-----------------"); var array = polygon.getPath().getArray(); var pathStrArr = []; for (var i = 0; i < array.length; i++) { var item = array[i]; var txt = item.lat() + "," + item.lng(); pathStrArr.push(txt); console.log(txt); } //註冊多邊形右鍵事件 polygon.addListener('rightclick', function (event) { pageConfig.polygonRightClick(this, event); }); }); } function eventList() { //google.maps.event.addListener(map, 'center_changed', function () { // console.log(map.mapUrl); //}); google.maps.event.addListener(map, 'click', function (event) { var html = event.latLng.lat() + "," + event.latLng.lng(); //console.log(html); document.getElementById("msg").innerHTML = html; }); } !function () { //enter事件 document.onkeydown = function (e) { if (!e) { e = window.event; } if ((e.keyCode || e.which) == 13) { //搜尋地址 pageConfig.searchAddress(); } } //載入店鋪 下拉框 var store = document.getElementById("Store"); var optionArr = []; for (var i = 0; i < serviceList.length; i++) { var item = serviceList[i]; var html = '<option value="' + item.SysNo + '">' + item.NetworkName + '</option>'; optionArr.push(html); } store.innerHTML = optionArr.join(''); }(); </script> <script src="http://maps.google.cn/maps/api/js?sensor=false&libraries=drawing&callback=initMap" async defer></script> </body> </html>