【升级】升级后端腾讯地图为最新版本,移除旧版老接口,解决后端腾讯地图提示无授权的问题。

This commit is contained in:
jianweie code
2024-07-22 16:05:38 +08:00
parent f82032a5e0
commit a3212c34bc
3 changed files with 156 additions and 86 deletions

View File

@@ -17,8 +17,7 @@
<script type="text/javascript" src="/lib/ckeditor/ckeditor.js"></script> <script type="text/javascript" src="/lib/ckeditor/ckeditor.js"></script>
<link href="/static/css/documentEditor.min.css" rel="stylesheet" /> <link href="/static/css/documentEditor.min.css" rel="stylesheet" />
<script src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=225d6c323c15ed3391a890f834bc4533"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=place&key=225d6c323c15ed3391a890f834bc4533"></script>
<!-- 让IE8/9支持媒体查询从而兼容栅格 --> <!-- 让IE8/9支持媒体查询从而兼容栅格 -->
<!--[if lt IE 9]> <!--[if lt IE 9]>

View File

@@ -5,6 +5,8 @@
.warning-msg-content p { display: inline-block; } .warning-msg-content p { display: inline-block; }
.warning-msg-content a { color: #20a53a; } .warning-msg-content a { color: #20a53a; }
.warning-msg-content a:hover { color: #23527c; } .warning-msg-content a:hover { color: #23527c; }
#container { width: 100%; height: 450px; }
#suggestionList { position: absolute; z-index: 999999; background: #fff; padding: 10px; }
</style> </style>
<body> <body>
<script type="text/html" template lay-done="layui.data.done(d);"> <script type="text/html" template lay-done="layui.data.done(d);">
@@ -12,10 +14,18 @@
<input type="hidden" name="coordinate" value="{{d.params.data.oldData}}"> <input type="hidden" name="coordinate" value="{{d.params.data.oldData}}">
<div class="layui-form-item"> <div class="layui-form-item">
<label for="tags" class="layui-form-label">请输入地址</label> <label for="tags" class="layui-form-label">区域</label>
<div class="layui-input-inline layui-inline-10"> <div class="layui-input-inline layui-inline-2">
<input name="tags" class="layui-input" lay-reqText="请输入标签" placeholder="请输入标签" id="place" style="z-index: 99999999" /> <input id="areaName" name="areaName" value="怀化" class="layui-input" lay-reqText="请输入标签" placeholder="请输入标签" />
</div> </div>
<label for="tags" class="layui-form-label">详细地址</label>
<div class="layui-input-inline layui-inline-6">
<input id="keyword" name="keyword" oninput="getSuggestions()" class="layui-input" lay-reqText="请输入标签" placeholder="请输入标签" id="place" style="z-index: 99999999" />
<ul id="suggestionList">
</ul>
</div>
<div class="layui-form-mid layui-text-em">先输入区域再输入模糊地址</div>
<div class="layui-form-mid" style="padding: 0 !important;float: right"> <div class="layui-form-mid" style="padding: 0 !important;float: right">
<button type="button" id="save-map" class="layui-btn" lay-submit lay-filter="formDemo">保存当前位置</button> <button type="button" id="save-map" class="layui-btn" lay-submit lay-filter="formDemo">保存当前位置</button>
</div> </div>
@@ -32,6 +42,11 @@
var debug = layui.setter.debug; var debug = layui.setter.debug;
var coordinateBoxIdName; var coordinateBoxIdName;
var addressBoxIdName; var addressBoxIdName;
var suggest;
var map;
var markerLayer;
var infoWindowList = Array(10);
layui.data.done = function (d) { layui.data.done = function (d) {
//开启调试情况下获取接口赋值数据 //开启调试情况下获取接口赋值数据
if (debug) { console.log(d.params.data); } if (debug) { console.log(d.params.data); }
@@ -39,115 +54,171 @@
coordinateBoxIdName = d.params.data.coordinateBoxIdName; coordinateBoxIdName = d.params.data.coordinateBoxIdName;
addressBoxIdName = d.params.data.addressBoxIdName; addressBoxIdName = d.params.data.addressBoxIdName;
console.log(addressBoxIdName);
layui.use(['admin', 'form', 'coreHelper'], function () { layui.use(['admin', 'form', 'coreHelper'], function () {
$ = layui.$; $ = layui.$;
var setter = layui.setter, admin = layui.admin, coreHelper = layui.coreHelper, form = layui.form; var setter = layui.setter, admin = layui.admin, coreHelper = layui.coreHelper, form = layui.form;
var layer = layui.layer; var layer = layui.layer;
var cityLocation, map, marker, center = null; var center = null;
var markerImage = "http://api.map.baidu.com/images/marker_red_sprite.png";
var preLocationCenter = $("input[name=coordinate]").val(); var preLocationCenter = $("input[name=coordinate]").val();
if (preLocationCenter == '') { if (preLocationCenter == '') {
cityLocation = new qq.maps.CityService({ //定义地图中心点坐标
complete: function (result) { center = new TMap.LatLng(27.551849, 109.983969)
center = new qq.maps.LatLng(result.detail.latLng.lat, result.detail.latLng.lng);
setMap(center);
}
});
cityLocation.searchLocalCity();
} else { } else {
var arr = preLocationCenter.split(','); var arr = preLocationCenter.split(',');
if (arr.length < 2) { if (arr.length < 2) {
parent.layer.msg("坐标位置错误"); parent.layer.msg("坐标位置错误");
return false; return false;
} }
center = new qq.maps.LatLng(arr[0], arr[1]); center = new TMap.LatLng(arr[0], arr[1])
setMap(center);
} }
function setMap(center) {
map = new qq.maps.Map(document.getElementById('container'), { //定义map变量调用 TMap.Map() 构造函数创建地图
center: center, map = new TMap.Map(document.getElementById('container'), {
zoom: 13 center: center,//设置地图中心点坐标
zoom: 17.2, //设置地图缩放级别
pitch: 43.5, //设置俯仰角
rotation: 0 //设置地图旋转角度
}); });
var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
var size = new qq.maps.Size(20, 27); //创建并初始化MultiMarker
var origin = new qq.maps.Point(0, 0); markerLayer = new TMap.MultiMarker({
var icon = new qq.maps.MarkerImage(markerImage, size, origin); map: map, //指定地图容器
//创建一个Marker //样式定义
marker = new qq.maps.Marker({ styles: {
icon: icon, marker: new TMap.MarkerStyle({
width: 20, // 样式宽
height: 30, // 样式高
anchor: { x: 10, y: 30 }, // 描点位置
}),
},
geometries: [
{
// 标记位置(纬度,经度,高度)
position: center, position: center,
animation: qq.maps.MarkerAnimation.DOWN, id: 'marker',
map: map, },
title: '选择企业位置' ],
}); });
var jump = function (event) { //移除marker事件
marker.setPosition(event.latLng); function removeMarker() {
}; markerLayer.setGeometries([])
qq.maps.event.addListener(map, 'click', jump);
//搜索框提示
var ap = new qq.maps.place.Autocomplete(document.getElementById('place'), {
offset: new qq.maps.Size(0, 5),
location: '北京市',
zIndex: 99999999
});
var keyword = "";
//调用Poi检索类。用于进行本地检索、周边检索等服务。
var searchService = new qq.maps.SearchService({
complete: function (results) {
if (results.type === "CITY_LIST") {
searchService.setLocation(results.detail.cities[0].cityName);
searchService.search(keyword);
return;
} }
var pois = results.detail.pois;
var latlngBounds = new qq.maps.LatLngBounds(); //监听点击事件添加marker
for (var i = 0, l = pois.length; i < l; i++) { map.on("click", (evt) => {
var poi = pois[i]; removeMarker();
latlngBounds.extend(poi.latLng); markerLayer.add({
var marker = new qq.maps.Marker({ position: evt.latLng
map: map, });
position: poi.latLng
}); });
marker.setTitle(poi.name); //定义事件处理方法
} var clickHandler = function (evt) {
map.fitBounds(latlngBounds); var lat = evt.latLng.getLat().toFixed(6);
} var lng = evt.latLng.getLng().toFixed(6);
}); console.log("您点击的的坐标是:" + lat + "," + lng);
//添加监听事件
qq.maps.event.addListener(ap, "confirm", function (res) {
console.log('查询地址');
keyword = res.value;
searchService.search(keyword);
});
} }
//Map实例创建后通过on方法绑定点击事件
map.on("click", clickHandler)
$("#save-map").on('click', function () { $("#save-map").on('click', function () {
parent.$("#" + coordinateBoxIdName).val(marker.position.lat + ',' + marker.position.lng);
console.log(markerLayer.geometries);
parent.$("#" + coordinateBoxIdName).val(markerLayer.geometries[0].position.lat + ',' + markerLayer.geometries[0].position.lng);
if (addressBoxIdName) { if (addressBoxIdName) {
setName(marker.position.lat, marker.position.lng);
var location = new TMap.LatLng(Number(markerLayer.geometries[0].position.lat), Number(markerLayer.geometries[0].position.lng));
geocoder.getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => {
console.log(result.result.address);
parent.$("#" + addressBoxIdName).val(result.result.address);
// 显示搜索到的地址
});
} }
//parent.layer.closeAll(); //parent.layer.closeAll();
parent.layer.close(layer.index); parent.layer.close(layer.index);
}); });
form.render(null, 'LAY-app-CoreCmsEnterprise-MapForm'); form.render(null, 'LAY-app-CoreCmsEnterprise-MapForm');
}); });
// 新建一个地点搜索类
//suggest = new TMap.service.Suggestion({
// // 新建一个关键字输入提示类
// pageSize: 10, // 返回结果每页条目数
// region: '北京', // 限制城市范围
// regionFix: true, // 搜索无结果时是否固定在当前城市
//});
}; };
function setSuggestion(index) {
function setName(lat, lng) { // 点击输入提示后,于地图中用点标记绘制该地点,并显示信息窗体,包含其名称、地址等信息
geocoder = new qq.maps.Geocoder({ infoWindowList.forEach((infoWindow) => {
complete: function (result) { infoWindow.close();
parent.$("#"+addressBoxIdName).val(result.detail.address);
}
}); });
var coord = new qq.maps.LatLng(lat, lng); infoWindowList.length = 0;
geocoder.getAddress(coord); document.getElementById('keyword').value = suggestionList[index].title;
document.getElementById('suggestionList').innerHTML = '';
markerLayer.setGeometries([]);
markerLayer.updateGeometries([
{
id: '0', // 点标注数据数组
position: suggestionList[index].location,
},
]);
var infoWindow = new TMap.InfoWindow({
map: map,
position: suggestionList[index].location,
content: `<h3>${suggestionList[index].title}</h3><p>地址:${suggestionList[index].address}</p>`,
offset: { x: 0, y: -50 },
});
infoWindowList.push(infoWindow);
map.setCenter(suggestionList[index].location);
markerLayer.on('click', (e) => {
infoWindowList[Number(e.geometry.id)].open();
});
}
function getSuggestions() {
var areaName = document.getElementById('areaName').value;
if (!areaName) {
areaName = "怀化";
}
suggest = new TMap.service.Suggestion({
// 新建一个关键字输入提示类
pageSize: 30, // 返回结果每页条目数
region: areaName, // 限制城市范围
regionFix: true, // 搜索无结果时是否固定在当前城市
});
// 使用者在搜索框中输入文字时触发
var suggestionListContainer = document.getElementById('suggestionList');
suggestionListContainer.innerHTML = '';
var keyword = document.getElementById('keyword').value;
if (keyword) {
suggest
.getSuggestions({ keyword: keyword, location: map.getCenter() })
.then((result) => {
// 以当前所输入关键字获取输入提示
suggestionListContainer.innerHTML = '';
suggestionList = result.data;
suggestionList.forEach((item, index) => {
suggestionListContainer.innerHTML += `<li><a onclick="setSuggestion(${index})">${item.title}<span class="item_info">${item.address}</span></a></li>`;
});
})
.catch((error) => {
console.log(error);
});
}
} }
</script> </script>

View File

@@ -406,7 +406,7 @@
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">{{d.data.configs['reshipAddress']['sKey']}}</label> <label class="layui-form-label">{{d.data.configs['reshipAddress']['sKey']}}</label>
<div class="layui-input-inline layui-inline-5"> <div class="layui-input-inline layui-inline-5">
<input type="text" name="reshipAddress" value="{{d.data.configs['reshipAddress']['sValue']}}" lay-verify="title" autocomplete="off" placeholder="退货地址" class="layui-input"> <input type="text" id="reshipAddress" name="reshipAddress" value="{{d.data.configs['reshipAddress']['sValue']}}" lay-verify="title" autocomplete="off" placeholder="退货地址" class="layui-input">
</div> </div>
<div class="layui-form-mid layui-word-aux">商家的详细地址</div> <div class="layui-form-mid layui-word-aux">商家的详细地址</div>
</div> </div>
@@ -1332,7 +1332,7 @@
let data = { let data = {
oldData: oldData, oldData: oldData,
coordinateBoxIdName: 'coordinateBox', coordinateBoxIdName: 'coordinateBox',
addressBoxIdName: 'addressBox' addressBoxIdName: 'reshipAddress'
} }
admin.popup({ admin.popup({