<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>高德地图</title>

        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce"></script>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

                list-style: none;

            }

            #container{

                width: 100%;

                height: 100%;

                position: absolute;

                left: 0;

                top: 0;

            }

            #setZoomNode,#setCenterNode{

                width: 280px;

                position: absolute;

                z-index: 99;

                right: 20px;

                top: 50px;

                border: 1px solid black;

                box-shadow: 0 0 5px black;

                background: white;

            }

            #setCenterNode{

                top: 50px;

            }

            #node li{

                cursor: pointer;

            }

            #searchNode{

                width: 280px;

                height: 30px;

                background: white;

                position: absolute;

                top: 20px;

                right: 20px;

            }

        </style>

    </head>

    <body>

        <div id="container"></div>

        <div id="searchNode">

            <input type="" name="" id="searchInput" />

            <button id="btn">搜索</button>

        </div>

        <div id="setCenterNode">

        </div>

        <script type="text/javascript">

            var map = new AMap.Map('container',{

                zoom:10,

                center:[121,30]

            });

            AMap.service(['AMap.PlaceSearch'],function(){

                btn.onclick = function(){

                    new AMap.PlaceSearch({

                        pageSize:5,  //最多显示五条

                        pageIndex:1,  //在第二页显示

                        city:'010',  //在哪个城市搜索

                        citylimit:true,  //是否限制在城市内搜索

                        map:map,  //展示在哪个地图里

                        panel:'setCenterNode'  //放在哪个元素下

                    }).search(searchInput.value);  //搜索内容

                }

            });

        </script>

    </body>

</html>

高德地图&兴趣点（poi）的更多相关文章

  1. 高德地图-搜索服务-POI搜索

    高德地图-搜索服务-POI搜索 之前公司项目收货地址仿饿了么的收货地址,结果发现自己实现的关键字搜索和周边搜索,搜索到的poi列表跟饿了么的并不完全一样,后来考虑了下,应该是搜索的范围.类型之类的设置 ...

  2. 高德地图添加marker及反地理编码获取POI

    项目中集成百度.高德.腾讯地图已是司空见惯的事情,今天我总结了一下项目中用到的高德地图常用的功能: 1.展示高德地图并定位显示定位图标: 2.添加实时大头针: 3.反地理编码获取周围兴趣点 效果如下: ...

  3. 高德地图POI采集（URL-API）

    新手从零学起,成功跑通,记一下,技术大神们多多指点. ———————————————— 1-概述 POI:兴趣点.对于百度.高德等电子地图来说,一个POI是地图上的一个店铺/商场/小区等等. 这次要解 ...

  4. 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  5. 根据关键字获取高德地图poi信息

    根据关键字获取高德地图poi信息 百度地图和高德地图都提供了根据关键字获取相应的poi信息的api,不过它们提供给普通开发者使用的次数有限无法满足要求.其次百度地图返回的poi中位置信息不是经纬度,而 ...

  6. JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索

    代码如下 (填入Key值) : <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  7. web开发如何使用高德地图API（二）结合输入提示和POI搜索插件

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  8. 高德地图POI爬取_Python

    高德地图POI 官方文档:https://lbs.amap.com/api/webservice/guide/api/search#introduce 官网控制台:https://lbs.amap.c ...

  9. 零基础掌握百度地图兴趣点获取POI爬虫（python语言爬取）（代码篇）

    好,现在进入高阶代码篇. 目的: 爬取昆明市中学的兴趣点POI. 关键词:中学 已有ak:9s5GSYZsWbMaFU8Ps2V2VWvDlDlqGaaO 昆明市坐标范围: 左下角:24.390894 ...

随机推荐

  1. linux服务器安装svn超详细介绍

    #!/bin/sh REPOS="$1" REV="$2" export LANG=en_US.UTF-8 LOG_PATH=/tmp/svn.log echo ...

  2. LC-322. 零钱兑换

    322. 零钱兑换 给你一个整数数组 coins ,表示不同面额的硬币:以及一个整数 amount ,表示总金额. 计算并返回可以凑成总金额所需的 最少的硬币个数 .如果没有任何一种硬币组合能组成总金 ...

  3. django2.1实现全文检索（最详细）+遇到的坑+jieba分词

    首先django实现全文检索在这里使用的是haystack,环境是django2.1+win10 64+py3.7 1: 安装包: pip install dgango-haystack #安装全局检 ...

  4. CExec.jsp中请求过程

  5. 白话JavaScript原型链和继承

    原型基础 每个函数都有一个prototype属性,指向函数的原型对象 每个对象都一个私有属性 __proto__, 默认指向其构造函数的prototype 在JS中所有函数都是Function构造出来 ...

  6. Centos8 Tomcat 开机自启配置

    第一步:修改catalina.sh文件 # vim 编辑 Tomcat bin/catalina.sh 文件.增加如下内容 CATALINA_PID="$CATALINA_BASE/bin/ ...

  7. C++ //构造函数的分类及调用 //分类 // 按照参数分类 无参构造函数（默认构造） 有参构造函数 //按照类型分类 普通构造 拷贝构造

    1 //构造函数的分类及调用 2 //分类 3 // 按照参数分类 无参构造函数(默认构造) 有参构造函数 4 //按照类型分类 普通构造 拷贝构造 5 6 #include <iostream ...

  8. Ivy入门笔记

    安装过程 命令行安装 下载和安装JDK5.Eclipse3.5.Ant 1.8.Ivy 2.2: 安装JDK:成功标志:在命令行下运行java命令,得到java命令行帮助: 安装Ant:解压Ant,在 ...

  9. Linux进程理解与实践（二）僵尸&孤儿进程 和文件共享

    孤儿进程与僵尸进程 孤儿进程: 如果父进程先退出,子进程还没退出那么子进程的父进程将变为init进程.(注:任何一个进程都必须有父进程) [cpp] view plaincopy #include & ...

  10. Linux之cat tail less常见用法

    1.cat 通常查找出错误日志 cat error.log | grep 'foo' , 这时候我们还有个需求就是输出当前这个日志的前后几行: cat error.log | grep -C 10 ' ...