html
<div class="select-table table-striped">
<div id="map" >
</div>
<!-- 点-->
<div id="btnDrawPoint"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6574"><path d="M811.084 578.703l-279.442 417.501c-5.482 8.227-14.684 13.148-24.557 13.148l-0.002 0c-9.818 0-19.041-4.927-24.557-13.127l-279.307-416.421c-34.029-54.436-51.751-116.094-51.751-179.049 0-189.898 159.406-344.416 355.359-344.416 195.927 0 355.359 154.508 355.359 344.416 0 62.864-17.669 124.398-51.088 177.949l0 0zM506.829 115.917c-163.293 0-296.128 127.782-296.128 284.842 0 51.751 14.606 102.412 42.17 146.556l254.208 378.977 254.4-380.022c26.976-43.239 41.484-93.845 41.484-145.498 0-157.055-132.853-284.842-296.117-284.842l0 0zM506.829 563.263c-92.846 0-168.368-73.486-168.368-163.827 0-90.292 75.523-163.791 168.368-163.791 92.846 0 168.359 73.474 168.359 163.791 0 90.315-75.506 163.827-168.359 163.827l0 0zM506.829 295.219c-60.212 0-109.156 46.774-109.156 104.239 0 57.471 48.953 104.239 109.156 104.239 60.195 0 109.143-46.766 109.143-104.239 0-57.461-48.953-104.239-109.143-104.239l0 0z" fill="#333" p-id="6575"></path></svg><span>定位</span></div>
<!-- 线-->
<div id="btnDrawLine"><svg class="icon" style="margin-top: 10px;width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1247"><path d="M187.733333 1024h-170.666666c-10.24 0-17.066667-6.826667-17.066667-17.066667v-170.666666c0-10.24 6.826667-17.066667 17.066667-17.066667h170.666666c10.24 0 17.066667 6.826667 17.066667 17.066667v170.666666c0 10.24-6.826667 17.066667-17.066667 17.066667zM34.133333 989.866667h136.533334v-136.533334H34.133333v136.533334zM1006.933333 204.8h-170.666666c-10.24 0-17.066667-6.826667-17.066667-17.066667v-170.666666c0-10.24 6.826667-17.066667 17.066667-17.066667h170.666666c10.24 0 17.066667 6.826667 17.066667 17.066667v170.666666c0 10.24-6.826667 17.066667-17.066667 17.066667zM853.333333 170.666667h136.533334V34.133333h-136.533334v136.533334z" fill="#333" p-id="1248"></path><path d="M187.733333 853.333333c-3.413333 0-10.24 0-13.653333-3.413333-6.826667-6.826667-6.826667-17.066667 0-23.893333l648.533333-648.533334c6.826667-6.826667 17.066667-6.826667 23.893334 0s6.826667 17.066667 0 23.893334l-648.533334 648.533333c0 3.413333-6.826667 3.413333-10.24 3.413333z" fill="#333" p-id="1249"></path></svg></div>
<!-- 面-->
<div id="btnDrawPlygon"><svg class="icon" style="margin-top: 10px;width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5269"><path d="M892.1088 737.8468864V286.1531136c35.02134613-15.03941973 59.55037867-49.83575893 59.55037867-90.3643136 0-54.29220693-44.01179307-98.304-98.304-98.304-40.73171627 0-75.677696 24.77370027-90.59259734 60.07466667H260.14624427c-14.91490133-35.3009664-49.86088107-60.07466667-90.59259734-60.07466667-54.29220693 0-98.304 44.01179307-98.304 98.304 0 40.94907733 25.04021333 76.04578987 60.64264534 90.82525013v450.77189974c-35.60133973 14.77946027-60.64264533 49.8761728-60.64264534 90.82525013 0 54.29220693 44.01179307 98.304 98.304 98.304 40.73171627 0 75.677696-24.77370027 90.59259734-60.07466667H762.76258133c14.91490133 35.3009664 49.86088107 60.07466667 90.59259734 60.07466667 54.29220693 0 98.304-44.01179307 98.304-98.304 0-40.52964693-24.52903253-75.32598613-59.55037867-90.3643136zM853.35517867 157.55946667c21.11351467 0 38.22933333 17.11581867 38.22933333 38.22933333s-17.11581867 38.22933333-38.22933333 38.22933333-38.22933333-17.11581867-38.22933334-38.22933333 17.11581867-38.22933333 38.22933334-38.22933333z m-683.802624 0c21.11351467 0 38.22933333 17.11581867 38.22933333 38.22933333s-17.11581867 38.22933333-38.22933333 38.22933333-38.22933333-17.11581867-38.22933334-38.22933333 17.11581867-38.22933333 38.22933334-38.22933333z m0 708.88106666c-21.11351467 0-38.22933333-17.11581867-38.22933334-38.22933333s17.11581867-38.22933333 38.22933334-38.22933333 38.22933333 17.11581867 38.22933333 38.22933333-17.11581867 38.22933333-38.22933333 38.22933333z m593.2089344-76.45866666H260.14624427c-9.8697216-23.35812267-28.51362133-42.09923413-51.7963776-52.11204267V286.130176c23.28275627-10.01280853 41.926656-28.75282773 51.7963776-52.11204267H762.76258133c10.02263893 23.72184747 29.097984 42.67485867 52.88864427 52.5664256v450.8319744c-23.79175253 9.89047467-42.8670976 28.84348587-52.88973653 52.56533334z m90.5936896 76.45866666c-21.11351467 0-38.22933333-17.11581867-38.22933334-38.22933333s17.11581867-38.22933333 38.22933334-38.22933333 38.22933333 17.11581867 38.22933333 38.22933333-17.11581867 38.22933333-38.22933333 38.22933333z" fill="#333" p-id="5270"></path></svg></div>
<!-- 测量线-->
<div id="btnMeasureDistince"><svg class="icon" style="margin-top: 10px;width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5269"><path d="M892.1088 737.8468864V286.1531136c35.02134613-15.03941973 59.55037867-49.83575893 59.55037867-90.3643136 0-54.29220693-44.01179307-98.304-98.304-98.304-40.73171627 0-75.677696 24.77370027-90.59259734 60.07466667H260.14624427c-14.91490133-35.3009664-49.86088107-60.07466667-90.59259734-60.07466667-54.29220693 0-98.304 44.01179307-98.304 98.304 0 40.94907733 25.04021333 76.04578987 60.64264534 90.82525013v450.77189974c-35.60133973 14.77946027-60.64264533 49.8761728-60.64264534 90.82525013 0 54.29220693 44.01179307 98.304 98.304 98.304 40.73171627 0 75.677696-24.77370027 90.59259734-60.07466667H762.76258133c14.91490133 35.3009664 49.86088107 60.07466667 90.59259734 60.07466667 54.29220693 0 98.304-44.01179307 98.304-98.304 0-40.52964693-24.52903253-75.32598613-59.55037867-90.3643136zM853.35517867 157.55946667c21.11351467 0 38.22933333 17.11581867 38.22933333 38.22933333s-17.11581867 38.22933333-38.22933333 38.22933333-38.22933333-17.11581867-38.22933334-38.22933333 17.11581867-38.22933333 38.22933334-38.22933333z m-683.802624 0c21.11351467 0 38.22933333 17.11581867 38.22933333 38.22933333s-17.11581867 38.22933333-38.22933333 38.22933333-38.22933333-17.11581867-38.22933334-38.22933333 17.11581867-38.22933333 38.22933334-38.22933333z m0 708.88106666c-21.11351467 0-38.22933333-17.11581867-38.22933334-38.22933333s17.11581867-38.22933333 38.22933334-38.22933333 38.22933333 17.11581867 38.22933333 38.22933333-17.11581867 38.22933333-38.22933333 38.22933333z m593.2089344-76.45866666H260.14624427c-9.8697216-23.35812267-28.51362133-42.09923413-51.7963776-52.11204267V286.130176c23.28275627-10.01280853 41.926656-28.75282773 51.7963776-52.11204267H762.76258133c10.02263893 23.72184747 29.097984 42.67485867 52.88864427 52.5664256v450.8319744c-23.79175253 9.89047467-42.8670976 28.84348587-52.88973653 52.56533334z m90.5936896 76.45866666c-21.11351467 0-38.22933333-17.11581867-38.22933334-38.22933333s17.11581867-38.22933333 38.22933334-38.22933333 38.22933333 17.11581867 38.22933333 38.22933333-17.11581867 38.22933333-38.22933333 38.22933333z" fill="#333" p-id="5270"></path></svg></div>
<input type="text" style="display:none" id="hideInput">
</div>
<div id="txtSearch">
<input id="sole-input" type="text" placeholder="请输入关键字进行搜索">
<a id="search-button">搜索</a>
</div>
<div class="wrapper-address hide">
<div class="address-count">共搜索到<span id="totalRecord"></span>条结果<span id="resultClose" style="float:right;font-size:17px;cursor:default">×</span>
</div>
<div id="ssreslut"></div>
</div>
js
require.config({
paths: {
"LMap": "LMap",
},
waitSeconds: 0
});
define(function (require) {
var LMap = require("LMap");
var pointShape = '';
var newLayer;
var default_address = decodeURI($_GET['default_address']);
if (default_address) {
$('#sole-input').val(default_address);
searchButton();
}
iniPage = {
iniAddPage: function () {
}
};
map = LMap.mapOpetation.showMap("map", LMap.property.mapLayerType.google, 126.4329, 41.899, 10);//加载地图
var layerGroup = L.layerGroup();
map.addLayer(layerGroup);
layerGroup.clearLayers();
//画点
$("#btnDrawPoint").on("click", function () {//点
var icon = LMap.marker.createMarkerIcon("../../img/marker-icon-red.png", 20, 30);
LMap.toolBar.drawMark(map, icon);
});
//画线
// LineOptions画线的属性
var LineOptions = {//配置绘面的样式
stroke: true,//设置是否显示边框
color: '#3388ff',//设置边框颜色
weight: 4,//设置边框宽度
opacity: 0.5,//填充透明度
fill: false,//是否填充
clickable: true
};
$("#btnDrawLine").on('click',function () {
console.log('画线');
LMap.toolBar.drawLine(map, LineOptions);
});
var shapeOptions = {//配置绘面的样式
stroke: true,//设置是否显示边框
color: '#3388ff',//设置边框颜色
fillColor:'#3388ff',//设置颜色
weight: 4,//设置边框宽度
opacity: 0.5,//边框透明度
fillOpacity: 0.5,//填充透明度
fill: true,//是否填充
clickable: true
}
$("#btnDrawPlygon").on('click',function () {
console.log('画面');
LMap.toolBar.drawPolygon(map, shapeOptions);
});
$("#btnMeasureDistince").on('click',function () {
console.log('测量线');
LMap.toolBar.measureDistince(map);
});
function drawComplete(sWkt, layer, layerType)//绘制完成事件
{
if (newLayer) {
map.removeLayer(newLayer)
}
//获取区域面积
console.log((LMap.geometryAnal0yse.area(mlayer.toGeoJSON()) * 0.0015).toFixed(2));
newLayer = layer;
pointShape = LMap.convert.toWkt(layer);console.log(pointShape);
var hideInput = $("#hideInput").val(pointShape);
layerGroup.clearLayers();
}
//以前修改的时候,进入定位
/*var hideInputVal = $("#hideInput").val();
if (hideInputVal != '') {
var shape = LMap.convert.toGeoJson(hideInputVal);
var flip = LMap.geometryAnalyse.flip(shape);
var markerLayer = LMap.marker.createMarker(flip.coordinates, '../../img/marker-icon-red.png', 20, 30);
layerGroup.addLayer(markerLayer)
var point = L.latLng(parseFloat(flip.coordinates[0]), parseFloat(flip.coordinates[1]));
LMap.mapOpetation.zoomByPoint([point], map)
}*/
function getEditLayer(layer, layerType) {//获得编辑Layer事件函数
curEditLayer = layer;
}
LMap.toolBar.registerDrawComplete(map, drawComplete, getEditLayer, true);//第三个参数是否允许编辑
/*搜索*/
$(".close-popup").on("click", function () {
$(".popupLayer").slideToggle();
});
$("#resultClose").on('click', function () {
$('.wrapper-address').addClass('hide');
});
$('#search-button').on('click', searchButton);
showPositionByLon = function (lon, name, adress, phone, IsDW) {
clearMap();
var sXY = [];
var levl = 15
if (lon.indexOf(",") > 0) {
sXY = lon.split(",");
} else {
sXY = lon.split(" ");
levl = 15
}
var markerLayer = LMap.marker.createMarker([sXY[1], sXY[0]], '../../img/marker-icon-red.png', 20, 30);
layerGroup.addLayer(markerLayer);
var point = L.latLng(parseFloat(sXY[1]), parseFloat(sXY[0]));
LMap.mapOpetation.zoomByPoint([point], map);
var hppoint = 'POINT (' + sXY[0] + ' ' + sXY[1] + ')';
var hideInput = $("#hideInput").val(hppoint);
};
clearMap = function () {
if (layerGroup) {
layerGroup.clearLayers();
}
};
});
/*get获取URL中的参数*/
var $_GET = (function () {
var url = window.document.location.href.toString(); //获取的完整url
var u = url.split("?");
if (typeof (u[1]) == "string") {
u = u[1].split("&");
var get = {};
for (var i in u) {
var j = u[i].split("=");
get[j[0]] = j[1];
}
return get;
} else {
return {};
}
})();
/*显示搜索地址*/
searchButton = function(){
var level = 10;
var mapBound = "125.51073906469465, 42.03525161922328, 127.24795219946094, 42.98479182624028";
if ($("#sole-input").val() != "") {
$("#ssreslut").html("")
$(".wrapper-address").removeClass("hide");
var url = 'http://api.tianditu.gov.cn/search?postStr={"keyWord":"' + escape($("#sole-input").val()) + '","level":"' + level + '","mapBound":"' + mapBound + '","queryType":"7","count":"200","start":"0"}&type=query&tk=1a830497e9b5cd253b8f825bd0a00a81';
$.ajax({
url: url,
type: "GET",
dataType: "text", //指定服务器返回的数据类型
success: function (data) {
var jsonObj = JSON.parse(data);
if (jsonObj.resultType == 3)//获取面
{
var lon = jsonObj.area.lonlat;
showPositionByLon(lon);
} else if (jsonObj.resultType == 1) {
var html = '<table class="address-list">';
if (jsonObj.pois) {
$("#totalRecord").html(jsonObj.pois.length);
for (var i = 0; i < jsonObj.pois.length; i++) {
html += '<tr>' +
'<th width="18%"><span class="address-num">' + (i + 1) + '</span></th>' +
'<td width="82%">' +
'<ul>' +
'<li>' +
'<div class="address-name" onclick="showPositionByLon(\'' + jsonObj.pois[i].lonlat + '\',\'' + jsonObj.pois[i].name + '\',\'' + jsonObj.pois[i].address + '\',\'' + jsonObj.pois[i].phone + '\',true)">' +
jsonObj.pois[i].name +
'</div>' +
'</li><li>地址:' + jsonObj.pois[i].address + '</li>' +
'</ul>' +
'</td>' +
'</tr>';
}
//自动显示第一个点
showPositionByLon(jsonObj.pois[0].lonlat, jsonObj.pois[0].name, jsonObj.pois[0].address, jsonObj.pois[0].phone, true)
} else {
$('.address-count').hide();
html += '<tr><td><ul><li style="text-align: center;border:0;margin-top:30px;">暂无搜索结果</li></ul></td></tr>';
}
html += '</table>';
$("#ssreslut").html(html);
}
}
});
}
};