地圖的折騰
一個純后臺人員折騰前端，最近有個地圖的小需求。然后去折騰了一把百度地圖。其中一個要求就是在地圖按數(shù)字標注目標位置。
這么常用的例子，應(yīng)該在官網(wǎng)作為一個典型的Demo才對。但是找來找去也沒有找到。
https://lbsyun.baidu.com/jsdemo.htm#aCreateMap
在網(wǎng)上搜到到的例子，跟官網(wǎng)給出來的API，也有挺多出入的。
https://www.mzwu.com/article.asp?id=4802
不過經(jīng)過搗鼓終于實現(xiàn)了
說下地址的方案，圖片上寫數(shù)字；其實有兩種方案
使用帶有數(shù)字的圖片，這樣的如果要標識多個個點就需要多少張帶數(shù)字的圖片
使用沒有任何數(shù)字的圖片做底，然后通過css在圖片上寫上文本的數(shù)字
這兩種方案都可以實現(xiàn)功能，小編采用的是第二種方案。
實現(xiàn)的代碼如下
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GIS 系統(tǒng)</title>
<link rel="stylesheet" type="text/css" href="css/map.css" />
<!--script type="text/javascript" src="map_load.js"></script -->
<!--
<script type="text/javascript" src="bmap-offline/map3.0_init.js"></script>
<script type="text/javascript" src="bmap-offline/map3.0.js"></script>
-->
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=QaeuPCAO4ZD0xi1mcTIUNNjPENpTXx4d"></script>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="menu">
<div id="searchContain" class="searchContain">
<form>
<select>
<option value="1">請選擇查詢類型</option>
<option value="2">名稱</option>
<option value="3">所屬街道</option>
<option value="4">掛點領(lǐng)導(dǎo)</option>
<option value="5">監(jiān)測企業(yè)</option>
</select>
<input type="text" placeholder="請輸入您要搜索的內(nèi)容...">
<button type="button" id="searchBtn">搜索</button>
</form>
</div>
<div class="companyList" id="companyList">
<div>
<span>
<b>企業(yè)名稱：</b>
<a href="#">百步串公司</a>
</span>
<span>
<b>地址：</b>深圳市坪山區(qū)放牛山路111號牛山路111號
</span>
<span>
<b>所屬街道：</b>抱牛山街道
</span>
<span>
<b>用工人數(shù)：</b>199人
</span>
<span>
<b>掛點領(lǐng)導(dǎo)：</b>林大大
</span>
<span>
<b>是否為監(jiān)測企業(yè):</b> 是
</span>
</div>
</div>
</div>
<!--地圖-->
<div id="container"></div>
<script type="text/javascript">
//地圖瓦片所在的文件夾
var outputPath = 'tiles/';
// 地圖容器
var map = new BMapGL.Map('container');
// 創(chuàng)建點坐標
var point = new BMapGL.Point(114.34235326994079, 22.708523903270923);
// 初始化地圖，設(shè)置中心點坐標和地圖級別
map.centerAndZoom(point, 15);
//添加地圖類型控件
/*map.addControl(new BMapGL.MapTypeControl({
mapTypes: [
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));*/
// 設(shè)置地圖顯示的城市 此項是必須設(shè)置的
//map.setCurrentCity("深圳");
//開啟鼠標滾輪縮放
map.enableScrollWheelZoom(true);
//單擊獲取點擊的經(jīng)緯度
map.addEventListener("click", function (e) {
console.log(e.point.lng + ", " + e.point.lat);
//正確
console.log(e.latlng.lng + ", " + e.latlng.lat);
});
//地圖右鍵單擊事件，左鍵為click
/*
map.addEventListener("rightclick", function (e) {
//添加標注前清空以前的所有標注
map.clearOverlays();
// 創(chuàng)建標注
var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat), {
enableDragging: false //是否可以拖拉
});
map.addOverlay(marker);
var opts = {
width : 200, // 信息窗口寬度
height: 100, // 信息窗口高度
title : "深圳" , // 信息窗口標題
message:"坪山區(qū)"
}
// 創(chuàng)建信息窗口對象
var infoWindow = new BMap.InfoWindow("這里是深圳市", opts);
map.openInfoWindow(infoWindow, new BMap.Point(e.point.lng, e.point.lat));
}); */
</script>
<script type="text/javascript" src="js/map.js"></script>
</body>
</html>
css
html {
height:100%
}
body {
height:100%;
margin:0px;
padding:0px;
}
#menu {
float: left;
width: 300px;
position:fixed;
left:0;
height:100%;
}
#container {
margin-left: 300px;
height:100%;
}
#searchContain * {
box-sizing: border-box;
}
#searchContain {
margin: 0;
padding: 0;
font-weight: 500;
font-family: "Microsoft YaHei","宋體","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
form {
position: relative;
width: 300px;
margin: 0;
}
select {
border: 2px solid #7BA7AB;
border-radius: 5px;
outline: none;
width: 99%;
height: 42px;
padding-left: 15px;
margin-left: 2px;
margin-right: 2px;
}
input {
border: none;
outline: none;
width: 99%;
height: 42px;
padding-left: 15px;
margin-top: 1px;
border: 2px solid #7BA7AB;
border-radius: 5px;
margin-left: 2px;
margin-right: 2px;
}
button {
border: none;
outline: none;
height: 42px;
width: 42px;
cursor: pointer;
position: absolute;
margin-top: 43px;
top: 0;
right: 0;
background: #7BA7AB;
border-radius: 0 5px 5px 0;
margin-left: 2px;
margin-right:3px;
}
.companyList{
height:85%;
width: 100%;
overflow:auto;
}
.companyList div span{
display: block;
line-height: 18px;
font-size: 13px;
}
.companyList div{
margin-top: 3px;
border: 2px solid #7BA7AB;
padding: 2px;
border-radius: 5px;
margin-left: 2px;
margin-right: 2px;
}
.companyList div span a {
text-decoration-line: none;
text-decoration-color: royalblue;
}
js
/**
*longitude :經(jīng)度
*latitude ：緯度
*content ：標簽內(nèi)容
*/
function drawPoint(map, longitude, latitude, content) {
// 初始化地圖,設(shè)置中心點坐標和地圖級別
map.centerAndZoom(new BMap.Point(longitude, latitude), 12);
//map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件 離線只支持電子地圖，衛(wèi)星/三維不支持
//map.setCurrentCity(“北京”); // 設(shè)置地圖顯示的城市 離線地圖不支持！！
map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放
map.addControl(new BMap.NavigationControl()); //縮放按鈕
map.clearOverlays();
var new_point = new BMap.Point(longitude, latitude);
var marker = new BMap.Marker(new_point); // 創(chuàng)建標注
if ("" != content) {
marker.setLabel(setLabelStyle(content));
}
map.addOverlay(marker); // 將標注添加到地圖中
map.panTo(new_point);
}
function setLabelStyle(content) {
//左偏移 右偏移
var offsetSize = new BMap.Size(0, 0);
var labelStyle = {
color: "#fff",
backgroundColor: "#333333",
border: "0",
fontSize: "14px",
width: "200px",
opacity: "0.8",
verticalAlign: "center",
borderRadius: "2px",
whiteSpace: "normal",
wordWrap: "break-word",
padding: "7px",
};
//用于設(shè)置樣式
var spanA = "<span class='angle'><span>"
//不同數(shù)字長度需要設(shè)置不同的樣式。
var num = parseInt(content.length / 10)
switch (num) {
case 0:
offsetSize = new BMap.Size(-20, -40);
break;
case 1:
offsetSize = new BMap.Size(-20, -40);
break;
case 2:
offsetSize = new BMap.Size(-20, -60);
break;
case 3:
offsetSize = new BMap.Size(-20, -80);
break;
default:
break;
}
var label = new BMap.Label(content + spanA, {
offset: offsetSize
});
label.setStyle(labelStyle);
return label;
}
var createMarker = function(point, content) {
var marker = new BMapGL.Marker(point);
var len = (content + "").length;
var label;
if(len == 1) {
label = new BMapGL.Label(content, {
offset: new BMapGL.Size(-5,-22)});
}else{
label = new BMapGL.Label(content, {
offset: new BMapGL.Size(-9.5,-22)});
}
label.setStyle({
background: 'none',
color: '#fff',
border: 'none'
})
marker.setLabel(label);
return marker;
}
$(function () {
$("#searchBtn").click(function () {
//添加標注前清空以前的所有標注
map.clearOverlays();
// 創(chuàng)建標注
var marker = new BMapGL.Marker(new BMapGL.Point(114.33380140148859, 22.713224624060427), {
enableDragging: false //是否可以拖拉
});
//map.addOverlay(marker);
//var marker1 = new BMapGL.Marker(new BMapGL.Point(114.34235326994072, 22.608523903270923), {
// enableDragging: false //是否可以拖拉
//});
//map.addOverlay(marker1);
/*var opts = {
position: new BMapGL.Point(114.34235326994079, 22.708523903270923), // 指定文本標注所在的地理位置
offset: new BMapGL.Size(5,3) // 設(shè)置文本偏移量
};
// 創(chuàng)建文本標注對象
var label = new BMapGL.Label('1', opts);
// 自定義文本標注樣式
label.setStyle({
color: 'blue',
borderRadius: '5px',
borderColor: '#ccc',
padding: '10px',
fontSize: '16px',
height: '30px',
lineHeight: '30px',
fontFamily: '微軟雅黑'
});
map.addOverlay(label);
*/
// 創(chuàng)建小車圖標
var myIcon = new BMapGL.Icon("http://127.0.0.1:8080/bmap/images/marker_1.png", new BMapGL.Size(23, 25));
// 創(chuàng)建Marker標注，使用小車圖標
var pt = new BMapGL.Point(114.33380140148859, 22.713224624060427);
var marker1 = new BMapGL.Marker(pt, {
icon: myIcon
});
// 將標注添加到地圖
map.addOverlay(marker1);
var opts = {
width: 200, // 信息窗口寬度
height: 100, // 信息窗口高度
title: "深圳", // 信息窗口標題
message: "坪山區(qū)"
}
// 創(chuàng)建信息窗口對象
var infoWindow = new BMapGL.InfoWindow("這里是深圳市", opts);
map.openInfoWindow(infoWindow, new BMapGL.Point(114.33380140148859, 22.713224624060427));
//情況企業(yè)列表
$("#companyList").empty();
//企業(yè)列表模板
var tpl = '<div>' +
' <span>' +
' <b>企業(yè)名稱：</b>' +
' <a href="#">百步串公司</a>' +
' </span>' +
' <span>' +
' <b>地址：</b>深圳市坪山區(qū)放牛山路111號牛山路111號' +
' </span>' +
' <span>' +
' <b>所屬街道：</b>抱牛山街道' +
' </span>' +
' <span>' +
' <b>用工人數(shù)：</b>199人' +
' </span>' +
' <span>' +
' <b>掛點領(lǐng)導(dǎo)：</b>林大大' +
' </span>' +
' <span>' +
' <b>是否為監(jiān)測企業(yè):</b> 是' +
' </span>' +
' </div>';
$("#companyList").append(tpl);
$("#companyList").append(tpl);
$("#companyList").append(tpl);
$("#companyList").append(tpl);
$("#companyList").append(tpl);
$("#companyList").append(tpl);
$("#companyList").append(tpl);
$("#companyList").append(tpl);
$("#companyList").append(tpl);
$("#companyList").append(tpl);
var lng = 114.33380140148859;
var lat = 22.713224624060427;
for(var i=1; i<100; i++){
var point = new BMapGL.Point(lng + 0.001* i, lat + 0.001*1)
map.addOverlay(createMarker(point, i));
}
});
});
代碼中的重點就是數(shù)字是一位數(shù)時，與數(shù)字時兩個數(shù)的偏移量不太一樣這時關(guān)鍵點。
這個是慢慢測試處理的結(jié)果，感覺應(yīng)該是相對最優(yōu)的偏移量。
喜歡，在看
評論
圖片
表情