代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微軟雅黑";
}
ul li {
list-style: none;
}
.btn-wrap {
z-index: 999;
position: fixed;
bottom: 40px;
margin-left: 200px;
padding: 1rem 1rem;
border-radius: .25rem;
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.btn {
width: 75px;
height: 30px;
float: left;
background-color: #fff;
color: rgba(27, 142, 236, 1);
font-size: 14px;
border: 1px solid rgba(27, 142, 236, 1);
border-radius: 5px;
margin: 0 5px;
text-align: center;
line-height: 30px;
}
.btn:hover {
background-color: rgba(27, 142, 236, 0.8);
color: #fff;
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>
<title>顯示坐標(biāo)</title>
</head>
<body>
<div id="allmap"></div>
<ul class="btn-wrap" style="z-index: 999;">
<li class="btn" id="plot_button" onclick="draw()">繪圖</li>
<li class="btn" id="clear_button" onclick="clearpoint()">清除</li>
<li class="btn" id="show_pos_button" onclick="display()">顯示坐標(biāo)</li>
<li class="btn" id="not_show" onclick="notshow()">不顯示</li>
</ul>
</body>
</html>
<script type="text/javascript">
var drawflag = 0;
var latline = new Array();
var lonline = new Array();
var line = new Array();
var colorline = "blue";
var show_flag = null;
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 創(chuàng)建Map實(shí)例
map.centerAndZoom("北京", 15); // 初始化地圖,用城市名設(shè)置地圖中心點(diǎn)
var opts = {
width: 20, // 信息窗口寬度
height: 5, // 信息窗口高度
}
//var a = new Array(BMAP_SATELLITE_MAP,BMAP_NORMAL_MAP);
var cursor = map.getDefaultCursor();
map.enableScrollWheelZoom();//開(kāi)啟鼠標(biāo)滾輪縮放
var mapControl = new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP, BMAP_SATELLITE_MAP] });
map.addControl(mapControl);
var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var cityCtrl = new BMap.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
//map.getUiSettings().setCompassEnabled(true);
map.addEventListener("click", function (e) {
addpoint(e.point.lng, e.point.lat);
});
function setMouse() {
if (drawflag == 1)
map.setDefaultCursor('crosshair');
else
map.setDefaultCursor(cursor);
}
function draw() {
if (drawflag == 0)
drawflag = 1;
else
drawflag = 0;
setMouse();
}
//顯示坐標(biāo)信息窗口槽函數(shù)
function showinfo(e) {
var infoWindow = new BMap.InfoWindow(e.point.lat.toFixed(3) + ", " + e.point.lng.toFixed(3), opts); // 創(chuàng)建信息窗口對(duì)象
map.openInfoWindow(infoWindow, e.point);
}
//添加事件
function display() {
if (show_flag == null) {
map.addEventListener('click', showinfo, false);
show_flag = 1;
}
}
//移除事件
function notshow() {
map.removeEventListener('click', showinfo);
map.closeInfoWindow();
show_flag = null;
}
function addpoint(lon, lat) {
var k = 0;
if (drawflag == 1) {
line = new Array();
latline.push(lat);
lonline.push(lon);
for (var i = 0; i < latline.length - 1; i++) {
plot_line(lonline[i], latline[i], lonline[i + 1], latline[i + 1])
k = i + 1;
}
var marker = new BMap.Marker(new BMap.Point(lon, lat));
var point = new BMap.Point(lon, lat);
map.addOverlay(marker);
marker.addEventListener('click', function () {
var opts = {
title: `<font color='blue'>位置信息</font>`,
};
var info = '名稱：坐標(biāo)點(diǎn)' + k + "</br>坐標(biāo)：" + point.lat.toFixed(5) + ", " + point.lng.toFixed(5);
var infoWindow = new BMap.InfoWindow(info, opts); // 創(chuàng)建信息窗口對(duì)象
map.openInfoWindow(infoWindow, point);
});
}
}
function plot_line(lon1, lat1, lon2, lat2) {
//起始點(diǎn)的經(jīng)緯度
//終止點(diǎn)的經(jīng)緯度
var polyline1 = new BMap.Polyline([
new BMap.Point(lon1, lat1),
new BMap.Point(lon2, lat2)
], {
strokeColor: "red",//設(shè)置顏色
strokeWeight: 5, //寬度
strokeOpacity: 1
});//透明度
map.addOverlay(polyline1);
polyline1.addEventListener('click', function () {
var opts = {
title: `<font color='red'>距離</font>`,
};
var len_point = new BMap.Point((polyline1.mv.kf.lng + polyline1.mv.nf.lng) / 2.0, (polyline1.mv.kf.lat + polyline1.mv.nf.lat) / 2.0);
var infoWindow = new BMap.InfoWindow("長(zhǎng)度", opts);
map.openInfoWindow(infoWindow, len_point);
});
polyline1.disableMassClear();
line.push(polyline1);
}
function clearpoint() {
var lines = map.getOverlays();
//var allOverlay = map.getOverlays();
for (var i = 0; i < lines.length; i++) {
lines[i].enableMassClear();
}
map.clearOverlays();
latline = new Array();
lonline = new Array();
line = new Array();
}
</script>
注：需要將你的ak替換，ak從百度地圖官網(wǎng)注冊(cè)申請(qǐng)，選擇瀏覽器類(lèi)型api。
功能
繪制線段
顯示對(duì)象的位置信息
顯示任意點(diǎn)坐標(biāo)
問(wèn)題注意
addEventListener
//添加事件
function display() {
//alert(e.point.lng + ", " + e.point.lat);
map.addEventListener('click', showinfo);
}
//移除事件
function notshow() {
map.closeInfoWindow();
map.removeEventListener('click', showinfo);
}
最初的實(shí)現(xiàn)方法，在顯示坐標(biāo)按鈕多次被點(diǎn)擊后，會(huì)導(dǎo)致再點(diǎn)擊不顯示按鈕，無(wú)法remove事件。依然會(huì)在地圖上點(diǎn)擊后出現(xiàn)坐標(biāo)信息。
這是因?yàn)閍ddEventListener可以重復(fù)添加事件，為了避免重復(fù)添加事件，使用全局變量show_flag，通過(guò)值來(lái)判斷是否已經(jīng)添加過(guò)，若已經(jīng)添加過(guò)事件，賦值為1，再次點(diǎn)擊顯示坐標(biāo)按鈕，不會(huì)重復(fù)添加事件。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-724878.html
//添加事件
function display() {
if (show_flag == null) {
map.addEventListener('click', showinfo, false);
show_flag = 1;
}
}
//移除事件
function notshow() {
map.removeEventListener('click', showinfo);
map.closeInfoWindow();
show_flag = null;
}
plot_line
如果將函數(shù)內(nèi)容直接在循環(huán)內(nèi)實(shí)現(xiàn)，不使用函數(shù)。則polyline1變量在循環(huán)結(jié)束后調(diào)用addEventListener的值，只調(diào)用循環(huán)結(jié)束最后的結(jié)果。
不是每個(gè)循環(huán)都不同的值。
因此，寫(xiě)為函數(shù)。每個(gè)線段addEventListener為不同的值，在中點(diǎn)顯示信息。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-724878.html
for (var i = 0; i < latline.length - 1; i++) {
plot_line(lonline[i], latline[i], lonline[i + 1], latline[i + 1])
k = i + 1;
}
function plot_line(lon1, lat1, lon2, lat2) {
//起始點(diǎn)的經(jīng)緯度
//終止點(diǎn)的經(jīng)緯度
var polyline1 = new BMap.Polyline([
new BMap.Point(lon1, lat1),
new BMap.Point(lon2, lat2)
], {
strokeColor: "red",//設(shè)置顏色
strokeWeight: 5, //寬度
strokeOpacity: 1
});//透明度
map.addOverlay(polyline1);
polyline1.addEventListener('click', function () {
var opts = {
title: `<font color='red'>距離</font>`,
};
var len_point = new BMap.Point((polyline1.mv.kf.lng + polyline1.mv.nf.lng) / 2.0, (polyline1.mv.kf.lat + polyline1.mv.nf.lat) / 2.0);
var infoWindow = new BMap.InfoWindow("長(zhǎng)度", opts);
map.openInfoWindow(infoWindow, len_point);
});
polyline1.disableMassClear();
line.push(polyline1);
}
到了這里，關(guān)于從零開(kāi)始學(xué)習(xí)調(diào)用百度地圖網(wǎng)頁(yè)API：三、鼠標(biāo)點(diǎn)擊繪圖功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
