<!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. POJ1944

    poj1944 一道我不会做的贪心题. (思维才是OI的重点) 但是if您也不会,那就来听我瞎扯吧. 首先,这个图是一个圈,只能连接邻点,使所有求的点联通. 我们先不考虑环,那么就可以想出一个假的做法 ...

  2. Windows环境安装kafka

    前言 注意事项: 需要有jdk,jdk8以上.配置好环境变量. 参看链接:https://blog.csdn.net/weixin_38004638/article/details/91893910 ...

  3. 字符串匹配算法(二)-BM算法详解

    我们在字符串匹配算法(一)学习了BF算法和RK算法,那有没更加高效的字符串匹配算法呢.我们今天就来聊一聊BM算法. BM算法 我们把模式串和主串的匹配过程,可以看做是固定主串,然后模式串不断在往后滑动 ...

  4. Sunset靶机

    仅供个人娱乐 靶机信息 https://www.vulnhub.com/entry/sunset-sunrise,406/ 一.主机探测 二.信息收集 nmap -sS -sV -T5 -A -p- ...

  5. appium的安装和环境配置教程

    模拟器安装 夜神模拟器下载地址:https://www.yeshen.com/ 无脑安装 jdk环境 安装jdk 安装教程:https://www.cnblogs.com/yhoil/p/148086 ...

  6. Vue2中父子组件通信的几种常用方法

    源码地址 点击查看演示源码 Vue2父子传参:props 首先在父组件中引入子组件,然后以属性的方式将数据传递给子组件 父组件: <template> <div class=&quo ...

  7. JVM 内存分配、调优案例

    内存分配 对象优先在Eden区分配 大多数情况下,对象在新生代Eden区中分配.当Eden区没有足够空间进行分配时,虚拟机将发起一次Minor GC. HotSpot虚拟机提供了-XX:+PrintG ...

  8. 100的累加和 while 循环

    //100的累加和 while 循环 #include <stdio.h> int main() { int sum = 0; //5050 int i = 0; while(i < ...

  9. Android NDK 直播推流与引流

    本篇介绍一下直播技术中推流与引流的简单实现. 1.流媒体服务器测试 首先利用快直播 app (其他支持 RTMP 推流与引流的 app 亦可)和 ffplay.exe 对流媒体服务器进行测试. 快直播 ...

  10. TestNG注释@BeforeGroups与@AfterGroups不执行的处理

    在学习TestNG框架注解时发现在执行以下的代码 package com.groups; import org.testng.annotations.AfterGroups; import org.t ...