dcat-admin
dcat-admin copied to clipboard
Published
20 hours ago •
jqhph
jqhph
腾讯地图地点搜索的建议
- Laravel Version: 8.65
- PHP Version: 7.4.3
- Dcat Admin Version: 2.1.7-beta
Description:
dcatadmin使用腾讯地图不支持地点搜索提示，尝试修改map.blade发现腾讯地图jsapi官方已不再维护，搜索地点不会返回结果。 服务类API 将在 2020-04-22 停止新用户接入，文档同步下线，已接入用户不受影响，新用户请使用功能更为丰富的 WebServiceAPI （涉及命名空间：qq.maps.SearchService，qq.maps.TransferService，qq.maps.LineService，qq.maps.StationService，qq.maps.DrivingService，qq.maps.Geocoder，qq.maps.CityService）
腾讯地图官方提供了jsapi GL的接口 https://lbs.qq.com/webDemoCenter/glAPI/glServiceLib/suggestion 可以实现搜索提示 我尝试改了map.blade.php，实现了地点搜索的功能，供参考，希望官方下个版本能支持腾讯地图搜索地点的功能
Steps To Reproduce:
<style>
.amap-icon img,
.amap-marker-content img {
width: 25px;
height: 34px;
}
#suggestionList {
list-style-type: none;
padding: 0;
margin: 0;
}
#suggestionList li {
margin-top: -1px;
background-color: #f6f6f6;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#suggestionList li .item_info {
font-size: 12px;
color: grey;
}
#suggestionList li:hover:not(.header) {
background-color: #eee;
}
</style>
<div class="{{$viewClass['form-group']}}">
<label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
<div class="{{$viewClass['field']}}">
@include('admin::form.error')
@if($type === 'baidu' || $type === 'amap' || $type==='tencent')
<div class="row mb-1">
<div class="col-md-7 col-md-offset-3">
<div class="input-group dropdown">
<input type="text" placeholder="{{ trans('admin.search') }}" class="form-control"
id="{{ $searchId }}">
@if($type === 'baidu' || $type==='tencent')
<span class="input-group-btn">
<button type="button" class="btn btn-primary btn-flat"><i class="fa fa-search"></i></button>
<ul id="suggestionList" class="dropdown-menu">
</ul>
</span>
@endif
</div>
</div>
</div>
@endif
<div class="{{ $class }}">
<div class="form-map" style="width: 100%;height: {{ $height }}"></div>
<input type="hidden" class="form-lat" name="{{ $name['lat'] }}" value="{{ $value['lat'] ?? null }}" {!!
$attributes !!} />
<input type="hidden" class="form-lng" name="{{$name['lng']}}" value="{{ $value['lng'] ?? null }}" {!!
$attributes !!} />
</div>
@include('admin::form.help-block')
</div>
</div>
<script init="{!! $selector !!}">
var lat = $this.find('.form-lat'),
lng = $this.find('.form-lng'),
container = $this.find('.form-map'),
mapId = "_" + Dcat.helpers.random();
container.attr('id', mapId);
@if($type === 'google')
function initGoogleMap() {
var LatLng = new google.maps.LatLng(lat.val(), lng.val());
var options = {
zoom: 13,
center: LatLng,
panControl: false,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(container[0], options);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Drag Me!',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function (event) {
lat.val(event.latLng.lat());
lng.val(event.latLng.lng());
});
}
initGoogleMap();
@endif
@if($type === 'tencent')
function initTencentMap() {
console.log(85,lat.val(), lng.val())
var center = new TMap.LatLng(lat.val(), lng.val());
var map = new TMap.Map(container[0], {
center: center,
zoom: 13
});
var marker = new TMap.MultiMarker({
id:'marker-layer',
map: map,
styles: {
// 点标记样式
marker: new TMap.MarkerStyle({
width: 20, // 样式宽
height: 30, // 样式高
anchor: { x: 10, y: 30 }, // 描点位置
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png', // 标记路径
}),
},
geometries: [
// 点标记数据数组
{
id:'markerid',
// 标记位置(经度，纬度，高度)
position: center,
},
],
});
// var marker = new qq.maps.Marker({
// position: center,
// draggable: true,
// map: map
// });
if( ! lat.val() || ! lng.val()) {
var ipLocation = new TMap.service.IPLocation(); // 新建一个IP定位类
ipLocation.locate({}).then((result2) => {
console.log(result2);
// 未给定ip地址则默认使用请求端的ip
var { result } = result2;
console.log(result2,result);
marker.updateGeometries([
{
id:'markerid',
position: result.location, // 将所得位置绘制在地图上
},
]);
map.setCenter(result.location);
});
// var citylocation = new qq.maps.CityService({
// complete : function(result){
// map.setCenter(result.detail.latLng);
// marker.setPosition(result.detail.latLng);
// }
// });
// citylocation.searchLocalCity();
}
map.on("click", (evt) => {
console.log(147,evt);
marker.setGeometries([
{
id:'markerid',
position: evt.latLng
}
]);
lat.val(evt.latLng.lat);
lng.val(evt.latLng.lng);
});
// qq.maps.event.addListener(marker, 'position_changed', function(event) {
// var position = marker.getPosition();
// lat.val(position.getLat());
// lng.val(position.getLng());
// });
var search = new TMap.service.Search({ pageSize: 10 });
var suggest = new TMap.service.Suggestion({
// 新建一个关键字输入提示类
pageSize: 3, // 返回结果每页条目数
//region: '北京', // 限制城市范围
regionFix: false, // 搜索无结果时是否固定在当前城市
});
var suggestionListContainer = document.getElementById('suggestionList');
suggestionListContainer.innerHTML = '';
document.getElementById('{{$searchId}}').addEventListener('input',function(e){
var keyword=this.value;
if(keyword){
suggest.getSuggestions({ keyword: keyword, location: map.getCenter() })
.then((result)=>{
suggestionListContainer.innerHTML = '';
suggestionList = result.data;
suggestionList.forEach((item, index) => {
var location=item.location;
console.log(202,item)
suggestionListContainer.innerHTML += `<li class="suggestionList_li" data-lat="${location.lat}" data-lng="${location.lng}">${item.title}<span class="item_info">${item.address}</span></li>`;
});
suggestionListContainer.style.display='block';
suggestionListContainer.style.zIndex=9999;
var lis=document.getElementsByClassName('suggestionList_li');
for(var i=0;i<lis.length;i++){
lis[i].addEventListener('click',function(){
var lat1=this.dataset.lat;
var lng1=this.dataset.lng;
console.log(this.dataset);
var newLocation=new TMap.LatLng(lat1, lng1);
marker.updateGeometries([
{
id:'markerid',
position: newLocation
}
]);
console.log(this.dataset);
map.setCenter(newLocation);
lat.val(lat1);
lng.val(lng1);
})
}
})
}
});
}
initTencentMap();
@endif
@if($type === 'yandex')
function initYandexMap() {
ymaps.ready(function(){
var myMap = new ymaps.Map(mapId, {
center: [lat.val(), lng.val()],
zoom: 18
});
var myPlacemark = new ymaps.Placemark([lat.val(), lng.val()], {
}, {
preset: 'islands#redDotIcon',
draggable: true
});
myPlacemark.events.add(['dragend'], function (e) {
lat.val(myPlacemark.geometry.getCoordinates()[0]);
lng.val(myPlacemark.geometry.getCoordinates()[1]);
});
myMap.geoObjects.add(myPlacemark);
});
}
initYandexMap();
@endif
@if($type === 'baidu')
function initBaiduMap() {
var map = new BMap.Map(mapId);
var point = new BMap.Point(lng.val(), lat.val());
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.enableDragging();
if (! lat.val() || ! lng.val()) {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(e){
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
map.panTo(e.point);
marker.setPosition(e.point);
lat.val(e.point.lat);
lng.val(e.point.lng);
} else {
console.log('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
}
map.addEventListener("click", function(e) {
marker.setPosition(e.point);
lat.val(e.point.lat);
lng.val(e.point.lng);
});
marker.addEventListener("dragend", function(e) {
lat.val(e.point.lat);
lng.val(e.point.lng);
});
var ac = new BMap.Autocomplete(
{"input" : "{{ $searchId }}"
,"location" : map
});
var address;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
address = _value.province + _value.city + _value.district + _value.street + _value.business;
setPlace();
});
function setPlace() {
function myFun() {
var pp = local.getResults().getPoi(0).point;
map.centerAndZoom(pp, 15);
marker.setPosition(pp);
lat.val(pp.lat);
lng.val(pp.lng);
}
var local = new BMap.LocalSearch(map, {
onSearchComplete: myFun
});
local.search(address);
}
}
initBaiduMap();
@endif
@if($type === 'amap')
function initAmap(){
var map = new AMap.Map(container[0], {
resizeEnable: true,
center: lng.val() && lat.val() ? [lng.val(), lat.val()] : null,
zoom: 14
});
var marker = new AMap.Marker({
position: new AMap.LngLat(lng.val(), lat.val()),
draggable: true,
map:map,
icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
zoom:15
});
if (!lng.val() || !lat.val()){
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
zoomToAccuracy: true,
buttonPosition: 'RB'
})
geolocation.getCurrentPosition(function (status,result){
if (status === 'complete'){
var point = new AMap.LngLat(result.position.lng, result.position.lat);
map.setCenter(point);
map.setZoom(15);
marker.setPosition(point)
lat.val(result.position.lat);
lng.val(result.position.lng);
}
})
}
//输入提示
var auto = new AMap.Autocomplete({
input: "{{$searchId}}"
});
var placeSearch = new AMap.PlaceSearch({
map: map
});
AMap.event.addListener(auto, "select", function (e){
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name);
});
AMap.event.addListener(placeSearch, "markerClick", function (e){
let point = new AMap.LngLat(e.data.location.lng, e.data.location.lat);
marker.setPosition(point)
lat.val(e.data.location.lat);
lng.val(e.data.location.lng);
});
marker.on('dragend',function (e){
lat.val(e.lnglat.lat);
lng.val(e.lnglat.lng);
});
map.on('click',function (e){
if (e.type === 'click'){
let point = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);
marker.setPosition(point)
lat.val(e.lnglat.lat);
lng.val(e.lnglat.lng);
}
})
}
initAmap();
@endif
</script>
searchId没用报错
public function tencent()
{
return $this->addVariables(['type' => 'tencent', 'searchId' => 'tcmap'.Str::random()]);
}
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
![stale[bot] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}