Skip to content

Instantly share code, notes, and snippets.

@ipcjs

ipcjs/transrush-baidu-map.html

Created November 21, 2017 11:57
Show Gist options
  • Save ipcjs/aa61ce515bd8cfaeb8f37c85fd699e72 to your computer and use it in GitHub Desktop.
Save ipcjs/aa61ce515bd8cfaeb8f37c85fd699e72 to your computer and use it in GitHub Desktop.
Download ZIP
转运四方自提点地图
Raw
transrush-baidu-map.html
<!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://member.transrush.com/Member/parcelProcess.aspx 中的选取自提地址页面运行如下代码来获取:
// Array.prototype.map.call(document.querySelectorAll('#portAddressList ul > li.col-2'), item=>item.innerText).join('\n')
var adds = [
'銅鑼灣-香港軒尼詩道397號東區商業大廈12樓02-04室（銅鑼灣地鐵站A出口）',
'香港新界屯門震寰路三號德榮工業大廈9楼D室',
'香港九龍觀塘道448-458號觀塘工業中心3期地庫A3室',
'九龍油麻地上海街438-444號同珍商業中心4樓（塔樓入口於登打士街）',
'大埔區火炭禾盛街10-16號海輝工業中心2樓4室',
'新界北區上水石湖墟龍琛路48號上水匯10樓1007室',
'香港特別行政區新界元朗區 鳳群街2號年發大廈地下11號鋪',
'新界元朗天水圍天湖路1號新北江商場二期嘉湖新城2樓38號舖(綠茵餐廳隔離扶手電梯上二層)',
'荃湾沙咀道26-38号汇力工业中心4楼28室',
'荃湾沙咀道362号全发商业大厦17楼10-11室',
'香港島中西區西灣幹諾道西139-140號興泰大廈地下',
'香港特別行政區香港島東區 鰂魚湧英皇道1065號東達中心405B室(近太古地鐵站A1出口)',
'长沙湾元洲街312-314号秉晖工业大厦2楼4室',
'大角咀福全街66-68号福全工厂大厦7楼A1室',
'新蒲岗八达街3-5号安达工厦1/F D1室',
'荔枝角香港工业中心C座1楼19B室（荔枝角地铁站C出口）',
'葵涌大联排道35-41号金基工业大厦21楼D6室',
'九龙湾宏开道15号九龙湾工业中心4楼03室',
'柴湾祥利街29号国贸中心16楼01室',
'北角琴行街4号15楼',
'香港仔湖北街12号裕景中心9楼2室',
'九龙红磡黄埔芜湖街53-59号金辉行1楼101室（仁孚车行旁边）',
'将军澳慧安园慧安商场地下A124-130铺',
'郎屏妈横路15-19号良材大楼2期G/F5号铺（郎屏地铁站B2出口）',
'香港特别行政区新界大埔区 大埔横头街1-7号美利大厦1号地铺（天后庙旁）',
];
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>
@ipcjs
Copy link
Author

ipcjs commented Nov 21, 2017

自提点 地图 - 转运四方

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment