This commit is contained in:
2026-04-14 17:38:46 +08:00
commit b71e6d6bae
2848 changed files with 237896 additions and 0 deletions

View File

@ -0,0 +1,91 @@
layui.define(["jquery", "form"], function (exports) {
var map,markerLayer,longitudeName,latitudeName;
var obj = {
initMap: function (elementId,longitude=116.307484,latitude=39.984120,longitudeInputName='longitude',latitudeInputName='latitude') {
longitudeName = longitudeInputName;
latitudeName = latitudeInputName;
//定义地图中心点坐标
var center = new TMap.LatLng(latitude, longitude)
//定义map变量调用 TMap.Map() 构造函数创建地图
map = new TMap.Map(document.getElementById(elementId), {
center: center,//设置地图中心点坐标
zoom: 17.2, //设置地图缩放级别
pitch: 43.5, //设置俯仰角
rotation: 45 //设置地图旋转角度
});
//创建并初始化MultiMarker点标记
markerLayer = new TMap.MultiMarker({
map: map, //指定地图容器
//样式定义
styles: {
//创建一个styleId为"myStyle"的样式styles的子属性名即为styleId
"myStyle": new TMap.MarkerStyle({
"width": 25, // 点标记样式宽度(像素)
"height": 35, // 点标记样式高度(像素)
// "src": '/static/common/image/default/icon_address.png', //图片路径
//焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
"anchor": { x: 16, y: 32 }
})
},
//点标记数据数组
geometries: [{
"id": "1", //点标记唯一标识后续如果有删除、修改位置等操作都需要此id
"styleId": 'myStyle', //指定样式id
"position": new TMap.LatLng(latitude, longitude), //点标记坐标位置
}
]
});
//Map实例创建后通过on方法绑定点击事件
map.on("click",obj.clickHandler)
},
clickHandler:function (evt) {
var lat = evt.latLng.getLat().toFixed(6);
var lng = evt.latLng.getLng().toFixed(6);
obj.changeCoordinate(lat,lng);
},
changeCoordinate:function(lat,lng){
//修改id为4的点标记的位置
markerLayer.updateGeometries([
{
"id": "1",
"styleId":"myStyle",
"position": new TMap.LatLng(lat, lng),
}
])
//修改地图中心点
map.setCenter(new TMap.LatLng(lat,lng));
//获取地图中心点
// var centerLatLng = map.getCenter();
$("input[name="+longitudeName+"]").val(lng);
$("input[name="+latitudeName+"]").val(lat);
},
searchMap:function (address) {
//正逆地址解析
var geocoder = new TMap.service.Geocoder();
//根据指定的文字地址转换为经纬度,并同时提供结构化的省市区地址信息
geocoder.getLocation({address:address}).then((res)=>{
if (res.status != 0) {
layui.layer.msg(res.message);
console.log('获取经纬度错误:',res);
return;
}
obj.changeCoordinate(res.result.location.lat,res.result.location.lng);
}).catch((res)=>{
layui.layer.msg(res.message);
console.log('获取经纬度错误:',res)
})
}
};
exports("customTxMap", obj);
});

View File

@ -0,0 +1,94 @@
layui.define(["jquery", "form"], function (exports) {
var markersArray = [];
var map = new BMap.Map("map");
var geoc = new BMap.Geocoder();
var obj = {
/**
* 初始化
*/
init: function (longitude, latitude) {
new BMap.Geolocation();
var local = new BMap.LocalSearch(map, { renderOptions: {map: map} });
var point = new BMap.Point(longitude, latitude)
map.centerAndZoom(point, 16);
map.addEventListener("click", obj.showInfo);
obj.searchMap(local);
},
/**
* 清除标识
*/
clearOverlays: function() {
if (markersArray) {
for (i in markersArray) {
map.removeOverlay(markersArray[i])
}
}
},
/**
* 地图上标注
*/
addMarker: function (point) {
var marker = new BMap.Marker(point);
markersArray.push(marker);
obj.clearOverlays();
map.addOverlay(marker);
},
/**
* 点击地图事件处理
*/
showInfo: function (e) {
$("input[name='longitude']").val(e.point.lng);
$("input[name='latitude']").val(e.point.lat);
geoc.getLocation(e.point, function (rs) {
var addComp = rs.addressComponents;
var info_address = addComp.street + addComp.streetNumber;
if(info_address !== ''){
$("input[name='address']").val(info_address);
}
});
obj.addMarker(e.point);
},
/**
* 搜索地图
* @param local
*/
searchMap: function (local) {
$(document).on('click', '#searchMap', function() {
var province_id = $("#province");
var city_id = $("#city");
var district_id = $("#district");
var shop_address = $("input[name='address']").val();
if(province_id.val() === null){
layer.open({icon:2, time:2000, content:"请选择省份"});
return;
}
if(city_id.val() === null){
layer.open({icon:2, time:2000, content:"请选择市"});
return;
}
if(district_id.val() === null){
layer.open({icon:2,time:2000,content:"请选择镇/区"});
return;
}
var address = province_id.find("option:selected").text() + city_id.find("option:selected").text() + district_id.find("option:selected").text() + shop_address;
//找到最符合的标注a点坐标
local.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
$("input[name='longitude']").val(poi.point.lng);
$("input[name='latitude']").val(poi.point.lat); //获取经度和纬度,将结果显示在文本框中
map.centerAndZoom(poi.point, 13);
});
local.search(address);
});
}
};
exports("likeMap", obj);
});

View File

@ -0,0 +1,119 @@
layui.define(["jquery", "form"], function (exports) {
var center,map,marker,geocoder,address = null;
var obj = {
init: function (init_lat, init_log) {
var lat = 39.9088;
var log = 116.3987;
if(init_log && init_lat){
log = init_log;
lat = init_lat;
}
center = new qq.maps.LatLng(lat, log);
map = new qq.maps.Map("map-container", {
center: center, //设置中心位置
zoom:14, //设置地图缩放级别
draggableCursor : 'https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/c1.cur', //设置鼠标拖拽元素样式
draggingCursor : 'https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/c2.cur' //设置鼠标移动样式
});
if(init_log && init_lat){
marker = new qq.maps.Marker({
position:center,
map:map,
animation: qq.maps.MarkerAnimation.BOUNCE,
icon:'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png'
});
}
obj.click_map();
obj.search_map();
},
click_map:function () {
//地址和经纬度之间进行转换服务
geocoder = new qq.maps.Geocoder();
// //添加监听事件 获取鼠标点击事件
qq.maps.event.addListener(map, 'click', function(event) {
geocoder.getAddress(event.latLng);
});
//解析地址
geocoder.setComplete(function(result) {
map.setCenter(result.detail.location);
var address_detail = '';
if(result.detail.addressComponents.streetNumber){
address_detail = result.detail.addressComponents.streetNumber
}else{
address_detail = result.detail.addressComponents.street
}
$("input[name='address']").val(address_detail);
//设置标记点
if(!marker) {
marker = new qq.maps.Marker({
position:result.detail.location,
map:map,
animation: qq.maps.MarkerAnimation.BOUNCE,
icon:'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png'
});
}else{
marker.setPosition(result.detail.location);
}
$("input[name='longitude']").val(result.detail.location.lng);
$("input[name='latitude']").val(result.detail.location.lat);
});
//解析失败
geocoder.setError(function() {
layui.layer.msg("地址解析错误,请重新选择");
});
},
search_map:function () {
$(document).on('click', '#searchMap', function() {
var province_id = $("#province");
var city_id = $("#city");
var district_id = $("#district");
var shop_address = $("input[name='address']").val();
if(province_id.val() === null){
layer.open({icon:2,time:2000,content:"请选择省份"});
return;
}
if(city_id.val() === null){
layer.open({icon:2,time:2000,content:"请选择市"});
return;
}
if(district_id.val() === null){
layer.open({icon:2,time:2000,content:"请选择镇/区"});
return;
}
address = province_id.find("option:selected").text() + city_id.find("option:selected").text() + district_id.find("option:selected").text() + shop_address;
searchService.search(address);
})
var searchService = new qq.maps.SearchService({
complete : function(results){
if(results.type === "CITY_LIST") {
searchService.setLocation(results.detail.cities[0].cityName);
searchService.search(address);
return;
}
var pois = results.detail.pois;
var latlngBounds = new qq.maps.LatLngBounds();
for(var i = 0,l = pois.length;i < l; i++){
var poi = pois[i];
latlngBounds.extend(poi.latLng);
var markers = new qq.maps.Marker({
map:map,
position: poi.latLng,
icon:'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
});
markers.setTitle(poi.name);
}
map.fitBounds(latlngBounds);
}
});
}
};
exports("txMap", obj);
});