高德地图根据关键字查询，拾取坐标经纬度。

最新推荐文章于 2024-01-31 23:17:16 发布

1988_1989

最新推荐文章于 2024-01-31 23:17:16 发布

阅读量4.4k

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/zhuni_xingfu/article/details/19485325

版权

java 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>关键字查询</title>
<link rel="stylesheet" type="text/css"
	href="css/demo.Default.css" />
<script  type="text/javascript"
	src="http://webapi.amap.com/maps?v=1.2&key=571bdde43751cab4702d2bf7ad54cec6"></script>
<script language="javascript">  
var mapObj;  
var marker = new Array();  
var windowsArr = new Array();   
//基本地图加载  
function mapInit() {  
    mapObj = new AMap.Map("iCenter"); 
	//AMap.event.addListener(mapObj,'click',getLnglat);   	
}  
function placeSearch() {  
    var MSearch;  
    mapObj.plugin(["AMap.PlaceSearch"], function() {          
        MSearch = new AMap.PlaceSearch({ //构造地点查询类  
            pageSize:10,  
            pageIndex:1,  
            city:"021" //城市  
        });   
        AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果  
        var searchName = document.all.searchText.value;//查询关键字
		MSearch.search(searchName); //关键字查询  
    });  
}  
//添加marker&infowindow      
function addmarker(i, d) {  
    var lngX = d.location.getLng();  
    var latY = d.location.getLat();  
    var markerOption = {  
        map:mapObj,  
        icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",  
        position:new AMap.LngLat(lngX, latY)  
    };  
		
    var mar = new AMap.Marker(markerOption);            
    marker.push(new AMap.LngLat(lngX, latY));  
  
    var infoWindow = new AMap.InfoWindow({  
        content:"<h3><font color=\"#00a6ac\">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),  
        size:new AMap.Size(300, 0),   
        autoMove:true,    
        offset:new AMap.Pixel(0,-30)  
    });  
    windowsArr.push(infoWindow);   
    var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};  
    AMap.event.addListener(mar, "click", aa);  
	AMap.event.addListener(mar,'click',getLnglat); 
}  
//回调函数  
function keywordSearch_CallBack(data) {  
    var resultStr = "";  
    var poiArr = data.poiList.pois;  
    var resultCount = poiArr.length;  
    for (var i = 0; i < resultCount; i++) {  
        resultStr += "<div id='divid" + (i + 1) + "' οnclick='openMarkerTipById1(" + i + ",this)' οnmοuseοut='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";  
            resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";  
            addmarker(i, poiArr[i]); 	
    }  
    mapObj.setFitView();  
    document.getElementById("result").innerHTML = resultStr;  
	
}  
function TipContents(type, address, tel) {  //窗体内容  
    if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {  
        type = "暂无";  
    }  
    if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {  
        address = "暂无";  
    }  
    if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {  
        tel = "暂无";  
    }  
    var str = "  地址：" + address + "<br />  电话：" + tel + " <br />  类型：" + type;  
    return str;  
}  
function openMarkerTipById1(pointid, thiss) {  //根据id 打开搜索结果点tip  
    thiss.style.background = '#CAE1FF';  
    windowsArr[pointid].open(mapObj, marker[pointid]); 
    
	//result中每个div触发的事件
	document.getElementById("lngX").value = marker[pointid].getLng();
	document.getElementById("latY").value = marker[pointid].getLat();
	
}  
function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复  
    thiss.style.background = "";  
}  
//鼠标在地图上点击，获取经纬度坐标  
function getLnglat(e) {
	document.getElementById("lngX").value = e.lnglat.getLng();
	document.getElementById("latY").value = e.lnglat.getLat();
}

//关闭页面
function CloseWind(){
    var lat = document.getElementById("lngX").value;
    var lon = document.getElementById("latY").value;
	opener.setValue(lat+","+lon);
	window.close();

} 
</script>  
<style type="text/css">
<!--
 
table{height:100%} 
    html,body{height:100%;margin:0px;padding:0px} 

.STYLE1 {color: #F3F3F3}
-->
</style>
</head>  
<body onLoad="mapInit();">   	  
	<table width="100%" border="0" cellspacing="0" cellpadding="0" >
	<tr>
	<td colspan="2" height="50"><br>
高德地图：<input type="text" name="searchText"> 
	  <input type="button" value="查询" onClick="placeSearch()"/> 输入位置信息
		<br><br>地图经纬度坐标： X：<input type="text" id="lngX" name="lngX"/> Y：<input type="text" id="latY" name="latY"/>  
		<input type="button" name="btn_Close" id="btn_Close" value="确定，并关闭页面" onClick="CloseWind();" /> *选择正确地点之后，请点击该按钮
</td>
	</tr>
  <tr>
    <td width="70%" height="500"> <div  style="height:100%" id="iCenter"></div></td>
    <td valign="top" ><div class="demo_box">
        <div id="r_title"><b>关键字查询结果:</b></div> 
        <div id="result" > </div>  
    </div>  
    <span class="STYLE1"></span></td>
  </tr>
</table>
 
</body>  
</html>

稍微修改了一下样式：

demo.Default.css

/*!
 * Css Document
 * .
 * @version $Id$
 */


/************************* Just Reset Browser Default CSS : BEGIN ***************************/
html{
	background-color:#fff;
}
body,div,h1,h2,h3,h4,ul,li,form,input,dl,dt,dd,p{
	margin:0;
	padding:0;
	font-family:微软雅黑;
}
h3{
	+font-size:14px;
	_font-size:14px;
}
img{
	border:none;
}
.c{
	clear:both;
}
ul,ol,li{
	list-style:none;
}

 /*清除浮动*/
.clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}

/* no ie mac \*/
* html .clearfix {
    height: 1%;
}
/* end */
* + html .clearfix {
    height: 1%;
}

body{
	font: 12px/1.5em 微软雅黑,Arial,Verdana,Helvetica,sans-serif;
	color:#333;
}
button,input,select,textarea{
	color:#999;
}
input[type="button"]{
	padding:0 5px;
	color:#333;
}
.demo_box{
	width:360px;
}
/* map style */
#iCenter{
	width:100%;
	height:100%;
	border:1px solid #F6F6F6;
}
#r_title{
	line-height:28px;
	padding-left:5px;
	background-color:#D1EEEE;
	font-weight:bold;
}
#result{
	overflow:auto;
	margin-bottom:5px;
/*	width:661px;*/
	height:500px;
}
/*  结果项 */
#result .sub_result{
	font-size:12px;
	cursor:pointer;
	line-height:20px;
	/*padding:0px 0 4px 2px;*/
	border-bottom:1px solid #C1FFC1;
}
#result .sub_result .detail{
}
#result .sub_result .detail h3{
	color:#00A6AC;
}

a{
	color:#067EC0;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
.note{
	color:#999;
}

/*** layerout stylesheet ***/
/* 修改背景URL */
div.change{
	background-image:url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h.png);
}
div.change div{
	background-image:url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h-l.gif);
}

/*** copied from demo #39 添加自定义点覆盖物 ***/
/* 定义自定义点样式 */
.markerContentStyle{position:relative;}
.markerContentStyle span{
	background-color: #FFFFFF;
	color:#FF1493;
	width:120px;
	heigth:80px;
	border:2px solid #D8BFD8;
	FONT-FAMILY:华文行楷;
	position:absolute;
	top:-10px;left:25px;
	white-space:nowrap
	-webkit-border-radius:5px;
	border-radius:5px;
}

/*** copied from demo #43 添加自定义信息窗体 ***/
/* 定义自定义信息窗体样式 */
div.info {
	position: relative;
	z-index: 100;
	border: 1px solid #BCBCBC;
	box-shadow: 0 0 10px #B7B6B6;
	border-radius: 8px;
	background: rgb(255,255,255); /* The Fallback */
	background-color: rgba(255,255,255,0.9);
	transition-duration: 0.25s;
}
div.info:hover {
	box-shadow: 0px 0px 15px #0CF;
}

div.info-top {
	position: relative;
	background: none repeat scroll 0 0 #F9F9F9;
	border-bottom: 1px solid #CCC;
	border-radius:5px 5px 0 0;
}
div.info-top div {
	display: inline-block;
	color: #333333;
	font-size:14px;
	font-weight:bold;
	line-height:31px;
	padding:0 10px;
}
div.info-top img {
	position: absolute;
	top: 10px;
	right: 10px;
	transition-duration: 0.25s;
}
div.info-top img:hover{
	box-shadow: 0px 0px 5px #000;
}
div.info-middle {
	font-size:12px;
	padding:10px;
	line-height:21px;
}
div.info-bottom {
	height:0px;
	width:100%;
	clear:both;
	text-align:center;
}
div.info-bottom img{
	position: relative;
	z-index:104;
}
/*** -------------------------***/

1988_1989

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高德地图根据关键字查询，拾取坐标经纬度。

关键字查询<link rel="stylesheet" type="text/css" href="css/demo.Default.css" /><script type="text/javascript" src="http://webapi.amap.com/maps?v=1.2&key=571bdde43751cab4702d2bf7ad54cec6"> var mapOb
复制链接

扫一扫