高德地图api接口poi检索示例----并在信息框显示经纬度

最新推荐文章于 2024-05-13 10:52:40 发布

张小凡vip

最新推荐文章于 2024-05-13 10:52:40 发布

阅读量1w

点赞数

分类专栏： map developing 文章标签：高德地图 javascript

本文链接：https://blog.csdn.net/zzq900503/article/details/11533499

版权

map developing 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

api官网链接：

http://api.amap.com/Javascript/example#

http://api.amap.com/Javascript/plugin_detail/id/0

代码示例如下(保存为html打开可见效果如下图)：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>按关键字查询</title>
<!-- <style>
body{ margin:0; padding:0;font:12px/16px Verdana, Helvetica, Arial, sans-serif;}
</style> -->
<link rel="stylesheet" href="/Public/Css/demo.Default.css" type="text/css"/>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=3e4ad80bb35e0d2f4a0ccd9779162923"></script>
<script language="javascript">
var mapObj;
var marker = new Array();
var windowsArr = new Array(); 
//基本地图加载
function mapInit() {
    mapObj = new AMap.Map("iCenter",{
        level:13,  
        center:new AMap.LngLat(116.397428,39.90923)
    });
}
function placeSearch() {
    var MSearch;
    mapObj.plugin(["AMap.PlaceSearch"], function() {        
        MSearch = new AMap.PlaceSearch({ //构造地点查询类
            city:"成都" //城市
        }); 
        AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果
        MSearch.search("宽窄巷子"); //关键字查询
    });
}
//添加marker&infowindow    
function addmarker(i, d) {
    var lngX = d.location.getLng();
    var latY = d.location.getLat();
    var markerOption = {
	    map:mapObj,
        icon:"http://api.amap.com/webapi/static/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,d.location),
        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);
}
//回调函数
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) + "' οnmοuseοver='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://api.amap.com/webapi/static/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,poiArr[i].location) + "</td></tr></table></div>";
            addmarker(i, poiArr[i]);
    }
    mapObj.setFitView();
    document.getElementById("result").innerHTML = resultStr;
}
function TipContents(type, address, tel,location) {  //窗体内容
    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 tel == "undefined") {
        tel = "暂无";
    }
    if (location == "" || location == "undefined" || location == null || location == " undefined" || typeof location == "undefined") {
        location = "暂无";
    }

    var str = "  地址：" + address + "<br />  电话：" + tel + " <br />  类型：" + type+"<br />  经纬度："+location;
    return str;
}
function openMarkerTipById1(pointid, thiss) {  //根据id 打开搜索结果点tip
    thiss.style.background = '#CAE1FF';
    windowsArr[pointid].open(mapObj, marker[pointid]);
}
function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
    thiss.style.background = "";
}


function showmap()
{
mapInit();
placeSearch();

}
</script>
</head>
<body οnlοad="showmap();">  
<table width="661px"  border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><div id="iCenter" style="height:300px;width=661px "></div></td>
    </tr>
   
  <hr>
    <tr>
        <td>
            <div id="result" name="result" style="overflow:auto;margin-top:5px;width:661px;height:255px"></div>
        </td>
    </tr>
</table>         
</body>
</html>