mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 19:53:27 +08:00
【升级】升级后端腾讯地图为最新版本,移除旧版老接口,解决后端腾讯地图提示无授权的问题。
This commit is contained in:
@@ -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]>
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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({
|
||||||
|
|||||||
Reference in New Issue
Block a user