Created
November 20, 2017 12:52
-
-
Save ipcjs/1612f68d63c140ab90502752463e77b0 to your computer and use it in GitHub Desktop.
海购丰运的自提点地图
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <title>自提点 地图 - 海购丰运</title> | |
| <style type="text/css"> | |
| body, | |
| html { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| font-family: "微软雅黑"; | |
| } | |
| #l-map { | |
| height: 95%; | |
| width: 100%; | |
| } | |
| #r-result { | |
| width: 100%; | |
| font-size: 14px; | |
| line-height: 20px; | |
| } | |
| </style> | |
| <script type="text/javascript" src="https://rawgit.com/wandergis/coordtransform/master/index.js"></script> | |
| <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=82bRMMzF6oocbylxo0HbDTegt1ipBMsG"></script> | |
| </head> | |
| <body> | |
| <div id="l-map"></div> | |
| <div id="r-result"> | |
| <input type="button" value="批量地址解析" onclick="bdGEO()" /> | |
| <div id="result"></div> | |
| </div> | |
| </body> | |
| </html> | |
| <script type="text/javascript"> | |
| let _ = function (type, props, children) { | |
| let elem = null; | |
| if (type === "text") { | |
| return document.createTextNode(props); | |
| } else { | |
| elem = document.createElement(type); | |
| } | |
| for (let n in props) { | |
| if (n === "style") { | |
| for (let x in props.style) { | |
| elem.style[x] = props.style[x]; | |
| } | |
| } else if (n === "className") { | |
| elem.className = props[n]; | |
| } else if (n === "event") { | |
| for (let x in props.event) { | |
| elem.addEventListener(x, props.event[x]); | |
| } | |
| } else { | |
| elem.setAttribute(n, props[n]); | |
| } | |
| } | |
| if (children) { | |
| for (let i = 0; i < children.length; i++) { | |
| if (children[i] != null) | |
| elem.appendChild(children[i]); | |
| } | |
| } | |
| return elem; | |
| }; | |
| </script> | |
| <script type="text/javascript"> | |
| // 百度地图API功能 | |
| var map = new BMap.Map("l-map"); | |
| map.centerAndZoom(new BMap.Point(114.073797, 22.430365), 12); | |
| map.enableScrollWheelZoom(true); | |
| var myGeo = new BMap.Geocoder(); | |
| // 地址列表通过在 http://www.sfbuy.com/forecast 中的选取自提地址页面运行如下代码来获取: | |
| // Array.prototype.map.call(document.querySelectorAll('#oneself_address'), item=>item.innerText).join('\n') | |
| var adds = [ | |
| '香港天后英皇道14号侨兴大厦天后苹果商场地下G05及G15号铺', | |
| '香港铜锣湾希云街15号地下', | |
| '香港湾仔谢斐道404-406号文石大厦地下A及B号铺', | |
| '香港湾仔联发街9, 11-13号庄士敦大楼地下D铺', | |
| '香港湾仔谢菲道214号利来大厦地下1号铺', | |
| '新界上水彩园路彩园邨彩珠楼地下117号铺', | |
| '新界上水马会道148A号地下10A铺', | |
| '新界天水围天湖路1号嘉湖新北江商场地下A164-165号铺', | |
| '新界天水围天恩路12-18号置富嘉湖1期186号铺', | |
| '新界天水围天瑞路71-77号天泽商场3楼303铺', | |
| '新界天水围天秀路8号天一商城3楼3007号铺', | |
| '新界屯门屯利街1号华都花园商场地下29铺', | |
| '新界屯门良德街9号盈丰商场1楼B29B铺', | |
| '新界屯门港铁兆康站SIH 1-2号铺 (E出口)', | |
| '新界屯门湖翠路138号启丰园商场地下36号铺', | |
| '新界屯门井财街11号仁爱大厦地下9号铺', | |
| '九龙牛头角观塘花园玉莲台2座地下1号铺', | |
| '九龙牛头角安基苑安基商场1楼131A号铺', | |
| '九龙深水埗青山道155-181号天悦广场地下B3铺', | |
| '九龙旺角汝州街58号', | |
| '九龙石硖尾伟智里2号金玉大厦地下222号铺', | |
| '九龙太子大南街26号地下', | |
| '九龙土瓜湾炮仗街178号兴基豪园地下B铺', | |
| '九龙土瓜湾乐民新邨G座平台地下126号铺', | |
| '九龙旺角海泓道富荣花园2期地下38号铺', | |
| '九龙旺角亚皆老街83号先达广场2楼S105铺', | |
| '九龙旺角登打士街56号柏裕商业中心16楼1626室', | |
| '旺角福全街17-19号地下AB1铺', | |
| '新蒲岗五芳街28号 / 四美街21-25号利森工厂大厦地下4号A铺', | |
| '新界屯门乡事会路2A安定邨安定商场地下A135-A136号铺', | |
| '新界屯门河田街4号凯昌工业大厦地下A及B铺', | |
| '新界西贡宜春街66号地下10号铺', | |
| '新界元朗合益路72号新景楼地下F铺', | |
| '九龙油麻地广东道831号金华大厦B座地下B1铺', | |
| '九龙油塘大本型2楼229号铺', | |
| '九龙长沙湾幸祥街8号幸福邨幸福商场地下6号铺', | |
| '新界元朗安宁路138-160A号紫荆楼第二期地下A铺', | |
| '新界元朗洪水桥盈福街11号洪福楼地下A铺', | |
| '新界元朗凤攸南街3号好顺景大厦地下27铺', | |
| '新界元朗元朗安兴街59-67号安泰楼地下3号铺', | |
| '香港西环西祥街2号宝翠阁地下9号铺', | |
| '香港西湾河兴民街28-36号地下E铺A部份', | |
| '香港西营盘朝光街4A号兆祥坊A2地下', | |
| '香港香港仔湖北街12号裕景中心9楼1室', | |
| '香港薄扶林华富道18号华富(一)邨华安楼119号铺', | |
| '香港小西湾小西湾道9号富欣花园69号铺', | |
| '香港柴湾盛泰道100号杏花新城212号铺', | |
| '香港鸭脷洲鸭脷洲大街42-44号地下1号铺', | |
| '香港鲗鱼涌芬尼街22-46号海晖大厦地下Q铺', | |
| '香港鲗鱼涌英皇道1065号东达中心19楼3A室', | |
| '香港中环德辅道中21至23号欧陆贸易中心9楼902B室', | |
| '新界元朗水车馆街28号万金中心地下1A号铺', | |
| '新界元朗宏业东街18号宏业工贸中心地下L及L1铺', | |
| '马鞍山海滨鞍骏街15号雅涛居购物商场1楼15号铺', | |
| '香港北角英皇道480号丰富商场地下8号铺', | |
| '新界大埔广福邨广仁楼地下S13号铺', | |
| '九龙慈云山毓华街23号慈乐邨慈云山中心6楼652B号铺', | |
| '九龙大角咀惠安街3号中英楼地下6号铺', | |
| '新界大埔太和路15号太和中心地下30号铺', | |
| '新界大埔富善商场1楼 F122B铺', | |
| '九龙观塘牛头角道300及302号裕民中心地下23号铺', | |
| '九龙观塘伟业街170号丰业工业大厦B地铺', | |
| '九龙观塘鸿图道80号鸿图工业大厦地下1号铺', | |
| '九龙观塘伟业街145号越成工厂大厦地下', | |
| '九龙观塘成业街6号泓富广场7楼708室', | |
| '九龙何文田邨何文田广场2楼206A铺', | |
| '九龙红磡宝其利街12号地下1A及2号铺(入口于黄埔街)', | |
| '九龙红磡鹤园街2G号恒丰工业大厦二期地下D3号铺', | |
| '新界大埔同茂坊1及3号北翼地铺', | |
| '九龙黄大仙龙翔道110号豪苑地下29A铺', | |
| '九龙黄大仙竹园路15号竹园南邨竹园广场2楼S215A铺', | |
| '九龙红磡黄埔花园12期德康街3号家居庭地库82铺', | |
| '九龙尖沙咀漆咸围6号及8号纪德楼地下', | |
| '九龙佐敦庙街271号地下(连阁楼)', | |
| '新界大围积福街4号地下E铺', | |
| '新界大围显径邨显径商场地下119号铺', | |
| '新界粉岭新运路38号祥华邨祥颂楼G111-112铺', | |
| '新界粉岭一鸣路15号碧湖花园碧湖商场地下1号铺', | |
| '新界粉岭联和墟和泰街17号地下A铺', | |
| '新界粉岭业丰街20号利亨中心地下3室', | |
| '新界沙田火炭坳背湾街53-55号美高工业大厦地下B室', | |
| '新界沙田黄竹洋街1-3号裕昌中心地下E室', | |
| '新界将军澳毓雅里9号慧安园商场地下A4号铺', | |
| '新界将军澳唐俊街11号宝盈花园商场地下S8B号铺', | |
| '新界将军澳唐明街2号尚德邨尚德广场2楼215号铺', | |
| '新界将军澳坑口常宁路10号安宁花园1座地下1号铺', | |
| '新界葵涌荣芳路9号恒景花园恒景商场地下G16铺', | |
| '新界葵涌大陇街129-151号葵都大厦地下7号铺', | |
| '新界葵涌葵富路7-11号葵涌广场地下53A号铺', | |
| '新界葵涌大连排道葵昌路1-7号祯昌工业大厦地下C铺', | |
| '新界葵涌打砖坪街68号和丰工业中心地下6号6B室', | |
| '新界葵涌葵丰街18-26号永康工业大厦J座地下', | |
| '新界东涌逸东街8号逸东邨逸东商场2楼207号铺', | |
| '新界葵涌大连排道144-150号金丰工业大厦1座G楼B2室', | |
| '九龙荔景荔景邨明景楼地下4号铺', | |
| '九龙荔景景荔径8号盈晖荟1楼101号铺', | |
| '新界马鞍山新港城第一期A及B座地下21号铺', | |
| '新界马鞍山沙安街23号利安邨利安商场LG/1楼113号铺', | |
| '新界马鞍山鞍骏街1号马鞍山中心地下A15铺', | |
| '新界青衣青敬路77号海悦花园地下18号铺', | |
| '九龙尖沙咀么地道75号南洋中心地下60-66号铺', | |
| '九龙九龙城衙前塱道3-13号大华大厦地下13号铺', | |
| '九龙九龙湾牛头角道3号得宝商场1楼209号铺', | |
| '九龙九龙湾宏光道80号丽晶花园1楼129号铺', | |
| '九龙九龙湾宏泰道12号荣发工业大厦地下5号铺', | |
| '九龙蓝田汇景道8号汇景广场3楼4A20-22号铺', | |
| '九龙蓝田碧云道广田邨广田商场1楼105号铺', | |
| '九龙荔枝角荔枝角道863号泓景台泓景汇地下2A号铺', | |
| '九龙荔枝角永康街24-26号顺昌工业大厦地下A铺', | |
| '九龙荔枝角永康街37号福源广场地下A2铺', | |
| '九龙美孚百老汇街69-119号美孚新邨美孚广场2楼223号铺', | |
| '九龙深水埗西邨路富昌邨富昌商场1楼122号铺', | |
| '新界青衣青康路12号长康二期商场3楼303号铺', | |
| '新界荃湾青山公路264-298号南丰中心12楼1243号室', | |
| '新界荃湾荃丰中心2楼2号铺', | |
| '香港北角英皇道255号国都商场2楼202及203号铺', | |
| '香港柴湾祥利街29号国贸中心5楼1室', | |
| '新界荃湾青山公路625号丽城花园第三期丽城荟地下45号铺', | |
| '新界荃湾沙咀道26-38号汇力工业中心地下7及8B铺', | |
| '新界荃湾灰窑角街34号毓光工业大厦地下A号铺', | |
| '新界沙田港铁石门站SHM 9号铺 (入闸区大堂)', | |
| '新界沙田百得街置富第一城乐荟地下G41号铺', | |
| '新界大围富田里云迭花园商场地下3A号铺', | |
| '新界沙田乙明邨街市地下摊档18号', | |
| '新界沙田沥源街6号沥源邨华丰楼地下ST5号铺', | |
| '新界沙田圆洲角源顺围2-4号冠华大厦地下A7及A8号铺', | |
| '新界上水龙琛路33号龙丰花园龙丰广场65铺', | |
| '香港柴湾道341-343号宏德居B座商场1楼B铺及C铺', | |
| '香港柴湾嘉业街10号益高工业大厦地下B室', | |
| '新界大埔安慈路4号昌运中心地下A5铺', | |
| '香港黄竹坑香业道6号及业发街6号益年工业大厦地下A2号铺', | |
| '香港西环厚和街28号顺昌大厦地下C铺', | |
| '香港炮台山宏安道18号威德阁地下13号铺', | |
| '香港上环文咸东街91号及永乐街117号文乐商业大厦地下A号铺', | |
| '香港筲箕湾南康街17号天悦筲箕湾广场1楼1142及1143号铺', | |
| ]; | |
| function geocodeSearch(add, index) { | |
| myGeo.getPoint(add, function (point) { | |
| if (point) { | |
| document.getElementById("result").innerHTML += index + "、" + add + ":" + point.lng + "," + point.lat + "</br>"; | |
| var address = new BMap.Point(point.lng, point.lat); | |
| addMarker(address, add); | |
| } | |
| }, "香港"); | |
| } | |
| // 编写自定义函数,创建标注 | |
| function addMarker(point, title) { | |
| var marker = new BMap.Marker(point); | |
| map.addOverlay(marker); | |
| // marker.setLabel(new BMap.Label(title, { offset: new BMap.Size(20, -10) })); | |
| marker.setTitle(title); | |
| marker.addEventListener('click', function () { | |
| marker.openInfoWindow(new BMap.InfoWindow(_('div', {}, [ | |
| _('a', {}, [_('text', title)]), | |
| _('br'), | |
| _('a', {}, [_('text', '公交导航: ')]), | |
| _('a', { href: 'javascript:;', event: { click: onNaviByBaiduClick } }, [_('text', ' 百度 ')]), | |
| _('a', { href: 'javascript:;', event: { click: onNaviByAMapClick } }, [_('text', ' 高德 ')]), | |
| ]))); | |
| }); | |
| function onNaviByBaiduClick() { | |
| myLocationPromise() | |
| .then(myLocation => { | |
| var params = new URLSearchParams(); | |
| params.append('origin', `latlng:${myLocation.lat},${myLocation.lng}|name:我的位置`); | |
| //params.append('destination', marker.getTitle()); | |
| params.append('destination', `latlng:${point.lat},${point.lng}|name:${title}`); | |
| params.append('mode', 'transit'); | |
| //params.append('mode', 'driving'); | |
| params.append('origin_region', '深圳'); | |
| params.append('destination_region', '香港'); | |
| params.append('output', 'html'); | |
| params.append('src', 'ipcjs|sfbuy-baidu-map'); | |
| var url = 'http://api.map.baidu.com/direction?' + params.toString(); | |
| console.log(url); | |
| window.open(url); | |
| }) | |
| .catch(err => { | |
| alert('获取"我的位置"失败, ' + err); | |
| }); | |
| } | |
| function onNaviByAMapClick() { | |
| myLocationPromise() | |
| .then(myLocation => { | |
| var params = new URLSearchParams(); | |
| var fromLL = coordtransform.bd09togcj02(myLocation.lng, myLocation.lat); | |
| var toLL = coordtransform.bd09togcj02(point.lng, point.lat); | |
| params.append('from', `${fromLL[0]},${fromLL[1]},我的位置`); | |
| params.append('to', `${toLL[0]},${toLL[1]},${title}`); | |
| params.append('mode', 'bus'); | |
| params.append('src', 'ipcjs|sfbuy-baidu-map'); | |
| var url = 'http://uri.amap.com/navigation?' + params.toString(); | |
| console.log(url); | |
| window.open(url); | |
| }) | |
| .catch(err => { | |
| alert('获取"我的位置"失败, ' + err); | |
| }); | |
| } | |
| } | |
| function bdGEO() { | |
| adds.forEach((add, index) => { | |
| geocodeSearch(add, index); | |
| }); | |
| } | |
| var geolocation = new BMap.Geolocation(); | |
| var myLocation; | |
| function myLocationPromise() { | |
| return new Promise((resolve, reject) => { | |
| if (myLocation) { | |
| resolve(myLocation); | |
| return; | |
| } | |
| geolocation.getCurrentPosition(function (r) { | |
| if (this.getStatus() == BMAP_STATUS_SUCCESS) { | |
| myLocation = r.point | |
| addMarker(myLocation, '我的位置'); | |
| console.log('您的位置：' + r.point.lng + ',' + r.point.lat); | |
| resolve(myLocation); | |
| } else { | |
| console.log('obation my location failed' + this.getStatus()); | |
| reject(this.getStatus()); | |
| } | |
| }, { enableHighAccuracy: true }) | |
| }) | |
| } | |
| bdGEO(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
自提点 地图 - 海购丰运