根据地址和关键字查找详细地址经纬度

最新推荐文章于 2023-10-27 17:56:37 发布

闲云9134

最新推荐文章于 2023-10-27 17:56:37 发布

阅读量2k

点赞数

分类专栏： java 文章标签：百度地图

本文链接：https://blog.csdn.net/remembercard/article/details/52708747

版权

java 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="overview & stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="<%=basePath%>">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/chosen.css" />
<link rel="stylesheet" href="css/ace.min.css" />
<link href="css/btstyle.css" rel="stylesheet" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
#l-map{width: 100%;height: 100%;};
</style>
</head>
<body>
<div id="l-map"></div>
<div style="position: absolute;top: 20px;left:20px;">
<select id="address" class="chzn-select" data-placeholder="请选择地址..." οnchange="openMessage(this)" style="width: 220px;"><option></option></select>
<div style="font-size: 13px;position: relative;display: inline-block;vertical-align: middle;zoom: 1;">
<a οnclick="getPoint();" class="btns btn-blues" style="width:50px;height:28px;font-size:12px;display: inline-block;line-height: 28px;text-decoration: none;text-align: center;">确定</a>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/chosen.jquery.min.js"></script>
<script src="js/plugins/layer/layer.min.js?v=2.1"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度key"></script>
<script type="text/javascript">
var layerIndex = layer.load();
// 百度地图API功能
var map = new BMap.Map("l-map"); // 创建Map实例
map.centerAndZoom("湖北省武汉市洪山区", 11);
var myKeys = "酒店";

map.enableScrollWheelZoom(); //允许鼠标方法缩小
var options = {
onSearchComplete: function(results) {
if (local.getStatus() == BMAP_STATUS_SUCCESS) {
// 判断状态是否正确
var s = [];
var json_data = [];
for (var i = 0; i < results.getCurrentNumPois(); i++) {
var add = [];
add.push(results.getPoi(i).title);
add.push(results.getPoi(i).point.lng + "," + results.getPoi(i).point.lat + "," + results.getPoi(i).title + "," + results.getPoi(i).address);
s.push(add);
var point = [];
point.push(results.getPoi(i).point.lng);
point.push(results.getPoi(i).point.lat);
point.push(results.getPoi(i).title);
point.push(results.getPoi(i).address);
json_data.push(point);
}
var pointArray = new Array();
for (var i = 0; i < json_data.length; i++) {
var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
map.addOverlay(marker); //增加点
pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
addClickHandler(json_data[i], marker);
}
//让所有点在视野范围内
map.setViewport(pointArray);
var optionstr = "";
for (var i = 0; i < s.length; i++) {
optionstr += "<option value='" + s[i][1] + "'>" + s[i][0] + "</option>"
}
document.getElementById("address").innerHTML = optionstr;
$(".chzn-select").trigger("liszt:updated");//jquery choose插件数据刷新操作
$(".chzn-select").chosen();
} else {
map.centerAndZoom("湖北省武汉市洪山区", 11);
}
layer.close(layerIndex);
}
};
var local = new BMap.LocalSearch(map, options);
local.search(myKeys);//关键字搜索

$(function() {
$(".chzn-select").chosen();//一到这页面就显示jquery choose插件样式
$(".chzn-select-deselect").chosen({ allow_single_deselect: true });
});

function addClickHandler(obj, marker) {
marker.addEventListener("click", function(e) {
openInfo(obj, e)
});
}
var opts = {
width: 250, // 信息窗口宽度
height: 80, // 信息窗口高度
};

function openInfo(obj, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var content = '<div style="margin:0;line-height:20px;padding:2px;"><span style="font-weight:bold;color:#CE5521;font-size:18px">' + obj[2] +
'</span><br/>地址：' + obj[3] + '<br/>' +
'</div>'
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
$(".chzn-select option[value='"+obj[0] + "," + obj[1] + "," + obj[2] + "," + obj[3]+"']").attr("selected","selected"); //点击备注点自动选中jquery choose中对应下拉列
$(".chzn-select").trigger("liszt:updated");
$(".chzn-select").chosen();
}

function openMessage(obj) {
var datas = obj.value.split(',');
var point = new BMap.Point(datas[0], datas[1]);
var content = '<div style="margin:0;line-height:20px;padding:2px;"><span style="font-weight:bold;color:#CE5521;font-size:18px">' + datas[2] +
'</span><br/>地址：' + datas[3] + '<br/>' +
'</div>'
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
}

function getPoint() {
var point = document.getElementById("address").value;
var datas = point.split(',');
alert(datas);
}
</script>
</body>
</html>

闲云9134

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据地址和关键字查找详细地址经纬度

String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> ">
复制链接

扫一扫