實現的功能
進入頁面, 自動定位
加載附近數據,渲染圖標、綁定點擊事件
預覽下效果, 瞧上眼的再繼續往下閱讀, 😆
實現代碼, 另存爲HTML可直接打開
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=Bf24cbANE2sw4loPwc9WSbX9RrzHMsR5"></script>
<script src="https://mapv.baidu.com/build/mapv.min.js"></script>
<title>查看你的附近</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}
a {
text-decoration: none;
}
.windowInfo {
position: fixed;
bottom: 0;
left: 0;
right: 0;
font-size: 24px;
padding-top: 15px;
text-align: center;
color: #666;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color: #fff
}
#infoMsg {
padding: 0 10px;
font-size: 14px;
text-align: left
}
.info_title {
color: #000;
font-size: 22px;
}
.info_title span {
font-weight: normal
}
.info_pos img{ height: 15px; padding-right: 5px;}
.source {
border-radius: 5px;
color: #888;
text-align: left;
margin-top: 5px;
padding: 8px;
background: lemonchiffon;
margin-bottom: 10px;
font-size: 14px;
}
</style>
</head>
<body>
<div style="position: fixed;left: 0px;right: 0px;bottom: 0px;top: 0px">
<div id="bdmap" style="width: 100%;height: 100%;"></div>
</div>
<div id="windowInfo" class="windowInfo" style="display: none">
<div class="close" onclick="hidewindow()"></div>
<div id="infoMsg">
</div>
</div>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
function initMap() {
map = new BMap.Map("bdmap");
map.centerAndZoom(new BMap.Point(117.042749, 36.643119), 12);
map.enableScrollWheelZoom();
geolocation = new BMap.Geolocation();
// 開啓SDK輔助定位
geolocation.enableSDKLocation();
// 計算距離
function getDistance(p, p2) {
let aa = map.getDistance(p, p2)
return (aa / 1000).toFixed(2);
}
var geoc = new BMap.Geocoder();
var xpoints = [];
function keys(a, b) {
return a.toString().substr(0, 11) + "," + b.toString().substr(0, 16);
}
geolocation.getCurrentPosition(function (r) {
setpoints(r.point.lng, r.point.lat)
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
let pr = r.point
let mymarker = new BMap.Marker(pr);
map.addOverlay(mymarker);
let path2 = "https://tianqiapi.com/yiqing/img/wode.gif"
replaceIcon(path2, mymarker, 30, 30);
//nearBy(pr)
mypoint = pr
} else {
alert('failed' + this.getStatus());
}
}, {enableHighAccuracy: true});
function G(id) {
return document.getElementById(id);
}
function replaceIcon(iconPath, marker, sizeW, sizeH) {
map.removeOverlay(marker);
var icons = iconPath;
var icon = new BMap.Icon(icons, new BMap.Size(sizeW, sizeH));
marker.setIcon(icon);
map.addOverlay(marker);
}
var navigationControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: new BMap.Size(20, 70),
// LARGE類型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 啓用顯示定位
enableGeolocation: false
});
map.addControl(navigationControl);
function setpoints(lng, lat) {
console.log('ajax....')
console.log(lng + ',' + lat)
//var p= new BMap.Point( lng, lat);
setTimeout(function () {
map.panTo(new BMap.Point(lng, lat));
iconPath = 'http://cddn.huyahaha.com/yiqing/poicon.png';
$.ajax({
type: 'GET',
url: 'https://www.tianqiapi.com/api/epidemic_point?appid=23035354&appsecret=8YvlPNrz&lng=' + lng + '&lat=' + lat,
data: '',
dataType: 'JSON',
error: function () {
alert('網絡錯誤')
},
success: function (res) {
//console.log(res.data)
var plist = res.data
for (var m = 0; m < plist.length; m++) {
var point = new BMap.Point(plist[m].lng, plist[m].lat);
point.lng += Math.random() * 0.00005;
point.lat += Math.random() * 0.0005;
var marker = new BMap.Marker(point);
var icon = new BMap.Icon(iconPath, new BMap.Size(30, 34));
marker.setIcon(icon);
map.addOverlay(marker);
console.log(plist[m])
let thePoint = plist[m];
marker.addEventListener("click", function () {
showInfo(this, thePoint);
});
}
}
});
}, 300);
}
function showInfo(marker, p) {
let curpos = p
var p = new BMap.Point(p.lng, p.lat);
var s = '<div class="info_title">' + curpos.name + '</div><div class="info_pos"><img src="http://cddn.huyahaha.com/yiqing/map_end.png"/>' + curpos.address + '</div><p class="source"><img src="http://cddn.huyahaha.com/yiqing/gantanhao.png" style="width: 15px; vertical-align: middle" /> 該信息由' + curpos.source + '發佈</p>';
map.panTo(p, true);
showWindow(s);
}
function showWindow(html) {
document.getElementById("infoMsg").innerHTML = html;
document.getElementById("windowInfo").style.display = "block";
}
function hidewindow() {
document.getElementById("infoMsg").innerHTML = '';
document.getElementById("windowInfo").style.display = "none";
}
}
$(function () {
initMap();
});
</script>
</body>
</html>