H5 ---- 地图--周边搜索
Posted lipuqing180906
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5 ---- 地图--周边搜索相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>周边（圆形区域）检索</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
width:603px;
padding-top:3px;
margin-top:10px;
overflow:hidden;
}
#container {
min-width:603px;
min-height:767px;
}
.textButtom{text-align: center;line-height: 50px;}
.title{width: 100%;height: 50px;margin: 10px auto}
.abort{width: 100%;display: inline-flex;flex-direction: row;justify-content: space-between;}
.address{width: 100%;height: 50px;margin: 10px auto;text-align: center;}
/*.addressTitle{width: 20%;height: 50px;margin: 10px auto}*/
.btnGoApp{width: 100%;height: 50px;margin: 10px auto}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var searchService,map,markers = [],center,dataOP=[];
// 当前坐标 ,查询的坐标, 后台的地址
var userCurrent, selectCurrent, sysData;
var namearray = [] ;
$.ajax({
url:‘https://apis.map.qq.com/ws/location/v1/ip?key=PCWBZ-EKARQ-OSF56-GCG5I-UG3D3-GNF2N&output=jsonp‘,
method:‘get‘,
dataType:‘jsonp‘,
success:function(res){
console.log(res.result.location)
dataOP=res.result
// window.onload(init())
center = new qq.maps.LatLng(dataOP.location.lat,dataOP.location.lng);
map = new qq.maps.Map(document.getElementById(‘container‘),{
center: center,
zoom: 13
});
icon = new qq.maps.MarkerImage(‘yd.png‘);
var marker1 = new qq.maps.Marker({
position: center,
icon:icon,
map:map,
title:‘我‘
});
// 获取 所有的 数据
$.ajax({
method:‘post‘,
url:"/xcxCRMap/selectByConditions",
dataType:"json",
data : JSON.stringify({userId:9,pageNo:1, pageSize:20,provinces: ‘上海‘,city: ‘上海‘}),
contentType:‘application/json‘,
success:function(res) {
sysData = res.data
console.log("", sysData[0].distance)
sysData.forEach(function(val,index,sysData){
// 计算距离
$.ajax({
method:‘get‘,
url:‘https://apis.map.qq.com/ws/distance/v1/?key=PCWBZ-EKARQ-OSF56-GCG5I-UG3D3-GNF2N&output=jsonp&from=‘+ dataOP.location.lat + ‘,‘ + dataOP.location.lng + ‘&to=‘ +JSON.parse(val.lat)+‘,‘+JSON.parse(val.ing),
dataType:‘jsonp‘,
success:function(res){
// console.log(res)
if(res.status==0){
val.distance = res.result.elements[0].distance
// console.log(val.distance)
namearray.push(val)
console.log(namearray)
$(‘.title‘).html(namearray[0].title)
$(‘.address‘).html(namearray[0].address)
$(‘.cliack‘).html(namearray[index].title)
if(namearray.length>=5){
for (let i = 0; i < namearray.length; i++) {
for (let j = i + 1; j < namearray.length; j++) {
if (namearray[i].distance > namearray[j].distance) {
let arr = namearray[i];
namearray[i] = namearray[j];
namearray[j] = arr;
}
}
}
}
console.log("lat:"+Number(namearray[0].lat)+",lng:"+Number(namearray[0].ing))
var position = new qq.maps.LatLng(Number(namearray[index].lat), Number(namearray[index].ing));
icon = new qq.maps.MarkerImage(‘loca.png‘);
var marker = new qq.maps.Marker({
position: position,
icon:icon,
map:map,
});
markers.push(marker)
//添加到提示窗
var info = new qq.maps.InfoWindow({
position: position,
map: map
});
// console.log(marker.position.lat)
//绑定单击事件 传递事件函数名称
qq.maps.event.addListener(marker, ‘click‘, function() {
info.open();
info.setContent(‘<div class="cliack" style="text-align:center;white-space:nowrap;">‘+ namearray[index].title +‘</div>‘);
info.setPosition(position);
});
}
},
})
})
}
})
}
})
</script>
</head>
<body>
<div id="container"></div>
<div class="textButtom">
<div class="title"></div>
<div class="abort">
<div class="addressTitle"></div>
<div class="address">地址:</div>
</div>
</div>
</body>
</html>
以上是关于H5 ---- 地图--周边搜索的主要内容，如果未能解决你的问题，请参考以下文章
Unity与Android交互-Unity接入高德地图实现定位以及搜索周边的功能（使用Android Studio）详细操作