首页 > 其他分享 >高德地图api接口poi检索示例----并在信息框显示经纬度

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

时间:2023-08-08 22:32:49浏览次数:43  
标签:tel undefined 示例 ---- api location var new AMap



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 onm ouseout_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>



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


标签:tel,undefined,示例,----,api,location,var,new,AMap
From: https://blog.51cto.com/u_16218512/7013111

相关文章

  • mysql中的空间地理字段
    第19章:MySQL中的空间扩展目录19.1.前言19.2.OpenGIS几何模型19.2.1.Geometry类的层次19.2.2.类Geometry19.2.3.类Point19.2.4.类Curve19.2.5.类LineString19.2.6.类Surface19.2.7.类Polygon19.2.8.类GeometryCollection19.2.9.类MultiPoint19......
  • mysql配置my.cnf包含innodb配置详解
    1.#以下选项会被MySQL客户端应用读取。2.#注意只有MySQL附带的客户端应用程序保证可以读取这段内容。3.#如果你想你自己的MySQL应用程序获取这些值。4.#需要在MySQL客户端库初始化的时候指定这些选项。5.6.#7.[client]8.#password=[your_passwo......
  • 扶植版做出拓展版950通栏轮播效果无缝连接
       一、左侧栏和右侧栏各添加一个自定义区   二、将如下代码分别复制到两个自定义区的源码编辑区内:   1、右侧自定义区代码<DIVclass="slider-promoJ_SliderJ_TWidgettb-slide"style="RIGHT:200px;WIDTH:950px;HEIGHT:450px"data-widget-type="Slide"da......
  • mysql索引
    1,索引什么是索引?索引------搜索---引导------引导着我去搜索到某个记录的定义:没有索引的情况下,我们查询一条记录,需要从第一条记录一直往下查询,知道查找到我们需要的记录,如果记录数特别大的话,相当于大海捞针,速度特别慢索引:建一个索引-----指向的是数据的位置-----反映到新华字......
  • XAML格式化工具:XAML Styler
    XAML格式化的意义在开发WPF应用过程中,编写XAML时需要手动去缩进或者换行,随着时间的推移或者参与开发的人增多,XAML文件内容的格式会越来越乱。要么属性全都写在一行,内容太宽一屏无法完整展现;要么属性单独占一行,难以直观的看清结构;另外xaml元素的属性无序,重要属性查找困难,手动维护......
  • CF1239E 题解
    CF1239E给定\(2n\)个数,将其重排成\(2\timesn\)的矩阵,最小化:从\((1,1)\)走到\((2,n)\),只可向右下走的所有方案中,途径所有数的和的最大值。\(n\le25,|V|\le5\times10^4\)。考场上有个\(n\le10\)的包,分值高达\(40\)。注意到\(\binom{20}{10}\approx10^5\)可枚......
  • U盘配置系统
    1.安装英伟达驱动驱动下载地址:https://us.download.nvidia.cn/XFree86/Linux-x86_64/535.86.05/NVIDIA-Linux-x86_64-535.86.05.run以下是禁用Nouveau驱动的步骤:打开一个终端,输入以下命令来打开黑名单配置文件:sudovim/etc/modprobe.d/blacklist.conf在打开的文件末尾,添加......
  • 提问的艺术
    有很多人问我关于计算机的问题,就是一两句话“xxx无法下载怎么办啊”“我不能打开”就草草结束,可能还有[一张手机拍的电脑屏幕照片],然后希望我下一条消息就告诉他应该怎么解决。不懂电脑不怪你们,但是不懂提问就很让人难受了。在这里,我想给出几点意见,希望大家用这种方式交流,可以更......
  • 自制串口助手zcom.1.3.exe
    zcom.1.3.exehttps://www.aliyundrive.com/s/xpnLZvbRhjy提取码:点击链接保存,或者复制本段内容,打开「阿里云盘」APP,无需下载极速在线查看,视频原画倍速播放。......
  • Head First 的学习之道
    《HeadFirst设计模式》是一本好书,正如书的封面上说的那样,这是一本重视大脑的学习指南。里面提到了一些学习方法,可以尝试下,看看哪些对你有用:1.慢一点,理解的越多,需要记得就越少不要走马观花地看。停下来,好好想一想。面对书中提出的问题,不要急着翻答案。大脑想得越深,就越有可能......