最近搜索
web项目 集成 腾讯地图 可以搜索名字
管理员
2025-10-30 20:03
搜索的时候 输入 城市和名称（比如 城市必写， 搜索酒店 停车场 等等）
点击 右边的记录可以跳转到位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div th:include="/common/layui"></div>
<div th:include="/common/jq"></div>
<title>设置坐标位置</title>
</head>
<style type="text/css">
html,body{
width:100%;
height:100%;
}
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
width:603px;
padding-top:3px;
overflow:hidden;
}
.btn{
width:142px;
}
#container{
flex:1;
-webkit-flex:1;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key在腾讯后台免费申请"></script>
<script th:inline="javascript">
var loadPosition = [[${loadPosition}]] ;
var lng = [[${goods.lng}]] ? [[${goods.lng}]] : 116.39705657958984; // 北京经度默认值
var lat = [[${goods.lat}]] ? [[${goods.lat}]] : 39.90552253972854; // 北京纬度默认值
// var lat = "39.90552253972854"
// var lng ="116.39705657958984"
//lat:39.90552253972854 lng 116.39705657958984 北京
var goodsId = [[${goods.id}]];
var map ;
var markersArray = [];
window.onload = function(){
//初始化地图函数 自定义函数名init
function init() {
//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(lat,lng), // 地图的中心地理坐标。
zoom:15, //设置地图缩放级别
pitch: 43.5, //设置俯仰角
rotation: 45 //设置地图旋转角度
});
//绑定单击事件添加参数
qq.maps.event.addListener(map, 'click', function(event) {
//alert('您点击的位置为: [ lat' + event.latLng.getLat() + ', long' + event.latLng.getLng() + ']');
$("#lat").val(event.latLng.getLat());
$("#lng").val(event.latLng.getLng());
//添加 标记
clearOverlays();
addMarker(event.latLng);
});
}
//调用初始化函数地图
init();
if(loadPosition){
//初始化 上一次选择的位置
addMarker(new qq.maps.LatLng([[${goods?.lat}]],[[${goods?.lng}]]));
}
}
//添加标记
function addMarker(location) {
var marker = new qq.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
//清除覆盖层
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
function save(){
var lat = $("#lat").val();
var lng = $("#lng").val();
$.post("/admin/goods/update", {id:goodsId,lat:lat,lng:lng
}, function(result) {
if (result.success) {
layer.msg("提交成功");
} else {
layer.msg(result.msg);
}
}, 'json');
}
function searchLocation() {
var searchInput = document.getElementById('searchInput').value;
var searchService = new qq.maps.PlaceSearch({
pageSize: 5,
pageIndex: 1,
keyword: searchInput
});
searchService.search(function(results) {
var placeList = results.detail.pois;
if (placeList.length > 0) {
clearOverlays();
var firstPlace = placeList[0].location;
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(firstPlace.lat, firstPlace.lng),
map: map
});
markersArray.push(marker);
map.setCenter(new qq.maps.LatLng(firstPlace.lat, firstPlace.lng));
} else {
alert('未找到相关位置');
}
});
}
function search_place(){
var city = $("#city").val();
var name = $("#name").val();
console.log(city,name);
$.post("/admin/goods/search/place", {name:name,city:city}, function(result) {
console.log(result.data);
var arr = result.data;
//遍历arr 添加到地图上面
//title: "全聚德烤鸭店(和平门店)"
//address: "北京市西城区前门西大街14号楼(近地铁和平门站与师大附中)"
//location: {lat: 39.899345, lng: 116.384995}
//tel: "01083193102;010-83193100;010-83193101"
$("#data").empty();
arr.forEach((item)=>{
$("#data").append("" +
"<div id=\"item\" style=\"margin-bottom: 10px;\" lat='"+item.location.lat+"' lng='"+item.location.lng+"' >\n" +
"<div style=\"font-weight: bold; font-size: 14px; cursor: pointer; \">"+item.title+"</div>\n" +
"<div>"+item.address+"</div>\n" +
"</div>");
});
init_item_click();
}, 'json');
}
function init_item_click(){
//点击名称 输出 坐标 跳转地图位置
$("#data #item").each(function(index, element) {
// index: 当前元素的索引
// element: 当前遍历到的 DOM 元素（非 jQuery 对象）
// 如果你需要使用 jQuery 方法，可以这样做：
var $element = $(element);
// 现在你可以使用 $element 来调用 jQuery 方法了
$element.off("click").on("click", function() {
var lat = $(this).attr("lat");
var lng = $(this).attr("lng");
console.log(index,lat,lng); // 输出当前 span 的下标
clearOverlays();
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(lat, lng),
map: map
});
markersArray.push(marker);
map.setCenter(new qq.maps.LatLng(lat, lng));
});
});
}
</script>
</head>
<body>
<div style=" display: flex;display: -webkit-flex; flex-direction: column; height: 100%; ">
<div style=" position: relative;" id="container">
<div id="data" style="overflow: scroll; max-height: 100%;position: absolute; width: 300px; top: 30px; right: 0px; z-index: 5; background-color: white; ">
<!-- <div id="item" style="margin-bottom: 10px; ">-->
<!-- <div style="font-weight: bold; font-size: 14px; cursor: pointer;">名123123123123称</div>-->
<!-- <div>13123123</div>-->
<!-- </div>-->
<!-- <div id="item" style="margin-bottom: 10px;">-->
<!-- <div style="font-weight: bold;">名123123123123称</div>-->
<!-- <div>13123123</div>-->
<!-- </div>-->
</div>
</div>
<div style="height: 30px; padding-top: 10px;">
<label >lat</label>
<input type="text" id="lat" th:value="${goods?.lat}" >
<label >long</label>
<input type="text" id="lng" th:value="${goods?.lng}" >
<button type="button" onclick="save()" >提交坐标</button>
<label style="margin-left: 200px;">城市</label>
<input type="text" id="city" >
<label >名称</label>
<input type="text" id="name" >
<button type="button" onclick="search_place()" >搜索</button>
</div>
</div>
</body>
<script th:inline="none">
layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload',
'element' ], function() {
var laydate = layui.laydate //日期
, laypage = layui.laypage //分页
, layer = layui.layer //弹层
, table = layui.table //表格
, carousel = layui.carousel //轮播
, upload = layui.upload //上传
, element = layui.element; //元素操作
});
</script>
</html>后台接口
/**
*
* @return
* @throws Exception
*/
@ResponseBody
@RequestMapping("/search/place")
public JSONObject search_place(@RequestParam(value = "name", required = false) String name,@RequestParam(value = "city", required = false) String city, HttpServletRequest request)
throws Exception {
String webPath = request.getServletContext().getRealPath("");
JSONObject result = new JSONObject();
try {
String baseUrl = "https://apis.map.qq.com/ws/place/v1/search";
String key = "你的key在腾讯后台免费申请";
String keyword = URLEncoder.encode(name, "UTF-8");
String boundary = URLEncoder.encode("region("+city+",0)", "UTF-8");
String url = baseUrl + "?key=" + key +
"&boundary=" + boundary +
"&keyword=" + keyword +
"&page_size=20";
System.out.println("最终URL: " + url);
String resultStr = HttpClient.get(url);
System.out.println("API响应: " + resultStr);
JSONObject obj = JSONObject.parseObject(resultStr);
return obj;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}官方接口响应数据如下
没有结果这个样子。
get请求方法
/**
* 发送get 请求一个url返回 返回的内容
*
*/
public static String get(String url) {
String html = null;
CloseableHttpClient httpClient = HttpClients.createDefault(); // 创建httpClient实例
HttpGet httpGet = new HttpGet(url); // 创建httpget实例
// 添加referer头
// 设置Referer为你的系统标识
httpGet.setHeader("Content-Type", "application/x-www-form-urlencoded");
httpGet.setHeader("Referer", "https://api1.juncheng2.cn");
CloseableHttpResponse response = null;
try {
response = httpClient.execute(httpGet); // 执行http get请求
} catch (ClientProtocolException e) { // http协议异常
e.printStackTrace();
} catch (IOException e) { // io异常
e.printStackTrace();
}
HttpEntity entity = response.getEntity(); // 获取返回实体
try {
// System.out.println("网页内容："+EntityUtils.toString(entity,
// "utf-8")); // 获取网页内容
html = EntityUtils.toString(entity, "utf-8");
} catch (ParseException e) { // 解析异常
e.printStackTrace();
} catch (IOException e) { // io异常
e.printStackTrace();
}
try {
response.close(); // response关闭
} catch (IOException e) { // io异常
e.printStackTrace();
}
try {
httpClient.close(); // httpClient关闭
} catch (IOException e) {
e.printStackTrace();
}
return html;我们请求加了域名-腾讯后台后台配置-访问的域名
联系站长
站长微信:xiaomao0055
站长QQ:14496453
按分类分组
按日期分组