<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题页</title>
<style type="text/css">
body{
width:100%;
margin:0px;
background-color:#FAFAFA;margin: 0px;padding:0px;font-size: 12px;
}
div{width:95%;margin:10px auto;}
input {width:75px;margin-right:2px;}#result-list{width:100%;padding:0;margin:5px 5px;} #result-list li {padding:10px;background-color:#f1f2f4;height:80px;margin:10px 2px;width:41%;float:left;/*white-space:nowrap;*/overflow:hidden;
}#result-list li span {display:none;}
</style>
<!--地图标注Js文件-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=0IM6czqEBhOAqmrsdfsX9VTmiDOzu8"></script>
</head>
<body>
<div style="">城市:<input type="text" id="txtCityName"> 关键字:<input type="text" id="txtTitle"><button onclick="search()">搜索</button><button onclick="closeWindow()">关闭</button></div>
<div id="content" style="display:none;">
<div id="r-result" style="background:#fff;overflow:scroll;height: 200px; width: 100%;border:1px solid #ebeaba">
<ul id='result-list'></ul>
</div>
</div>
<div id="allmap" style="width:100%;height:300px"></div>
<span style="color: #ff0066">*</span>在地图上标注琴行位置时,应先选择城市,确认经度,纬度,比例文本框值的正确性方可!
<script type="text/javascript">
var myCity = new BMap.LocalCity();
var map = new BMap.Map("allmap");
myCity.get(function (result) {
console.log(result);
jQuery("#txtCityName").val(result.name);
map.centerAndZoom(result.center, 18);
});
map.enableScrollWheelZoom(true);
/*根据用户点击获得经纬度*/
map.addEventListener("click", function (e) {
console.log(e);
let addrInfo = e.point;
// jQuery('#txtMapJing').val(addrInfo.lng);
// jQuery('#txtMapWei').val(addrInfo.lat);
});
function getQuery(name) {
// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
console.log(r);
if(r != null) {
// 对参数值进行解码
return decodeURIComponent(r[2]);
}
return null;
}
function closeWindow()
{
window.parent.postMessage({close:"true"}, "*");
}
function search() {
let cityName=jQuery("#txtCityName").val();
var local = new BMap.LocalSearch(map, {
renderOptions: { map: map },
pageCapacity: 30,
onMarkersSet: function (array) {
// console.log(array[0]);
let arrLength = array.length;
str = '';
for (i = 0; i < arrLength; i++) {
str += '<li>标题：' + array.title + '<br/>地址：' + array.address;
if (typeof array.phoneNumber != 'undefined')
{
str += '<br/>电话：' + array.phoneNumber;
}
str += '</br><span>' + array.point.lng;
str += ',' + array.point.lat + '</span></li>';
}
jQuery("#content").show();
jQuery("#result-list").html(str);
jQuery("#result-list li").bind('click', function () {
let addrInfo = jQuery(this).find('span').text().split(',');
window.parent.postMessage({test:{'lng':addrInfo[0],'lat':addrInfo[1]}}, "*");
// jQuery('#txtMapJing').val(addrInfo[0]);
// jQuery('#txtMapWei').val(addrInfo[1]);
jQuery(this).css("background-color", '#eff4bc').siblings().css('background-color', '#f1f2f4');
var point = new BMap.Point(addrInfo[0], addrInfo[1]);
map.centerAndZoom(point, 18);
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("", function (point) {
if (point) {
map.centerAndZoom(point, 20);
map.addOverlay(new BMap.Marker(point));
} else {
alert("您选择地址没有解析到结果!");
}
}, cityName);
});
}
});
// let Province = jQuery('#ddlProvince option:selected').text();
// if (Province == '') { alert('请选择省'); }
// let city = jQuery('#ddlCity option:selected').text();
// if (city == '') { alert('请选择城市'); }
let qh = jQuery('#txtTitle').val();
if (qh == '') { alert('请填写琴行名称'); }
map.centerAndZoom(cityName, 15);
local.search(cityName+qh);
}
</script>
</body>
</html>
发表于 2021-6-22 16:36:00
