<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

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

        <title>searchNearby</title>

        <style>

            *{

                padding: 0;

                margin: 0;

                list-style: none;

            }

            #container{

                position: absolute;

                top: 0;

                left: 0;

                width: 100%;

                height: 100%;

            }

            #searchNode{

                position: absolute;

                z-index: 9;

                width: 300px;

                height: 100px;

                background: white;

                text-align: center;

                padding-top: 20px;

            }

            #setCenterNode{

                position: absolute;

                z-index: 9;

                width: 300px;

                background: white;

                top: 100px;

            }

        </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>

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

                zoom:10,

                center:[116.379391,39.861536]

            });

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

                btn.onclick = function(){

                    new AMap.PlaceSearch({

                        type:'餐饮',

                        pageSize:5,

                        pageIndex:1,

                        city:'010',

                        citylimit:true,

                        map:map,

                        panel:'setCenterNode'

                    }).searchNearBy('',[116.379391,39.861536],200,function(){

                    });

                }

            });

        </script>

    </body>

</html>

高德地图——searchNearBy（）的更多相关文章

  1. 高德地图JavaScript API开发研究

    高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API ...

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

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

  3. vue 高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链 ...

  4. 高德地图 JS API - 根据经纬度获取周边建筑地标

    像我们经常用的微信或微博,发表动态时都有选择位置的功能,根据当前的定位获取附近的地标.利用高德地图我们就可以实现这样的功能. 1. 具体代码: // 高德地图查询周边 function aMapSea ...

  5. 高德地图API-设置考勤范围

    <template> <div class="page-setting-setgps"> <!--head--> <div class=& ...

  6. vue+vant ui+高德地图的选址组件

    首先在index.html引入高德地图的js <script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key" ...

  7. HTML5创建高德地图

    创建高德地图 功能真的很好很强大,有图有证据! 1.申请key值 去官网2.https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db ...

  8. 高德地图api实现地址和经纬度的转换(python)

    利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...

  9. IOS原生地图与高德地图

    原生地图 1.什么是LBS LBS: 基于位置的服务   Location Based Service 实际应用:大众点评,陌陌,微信,美团等需要用到地图或定位的App 2.定位方式 1.GPS定位  ...

随机推荐

  1. WLS中Linux与Windows间的环境共享

    Reference 更多cmd.exe帮助参考 (cmd_helps)[https://ss64.com/nt/cmd.html] (WSL备份,windows Docker安装)[https://w ...

  2. 如何反编译Python写的exe到py

    参考链接: https://blog.csdn.net/qq_44198436/article/details/97314626?depth_1-utm_source=distribute.pc_re ...

  3. MySQL是怎么解决幻读问题的？

    前言 我们知道MySQL在可重复读隔离级别下别的事物提交的内容,是看不到的.而可提交隔离级别下是可以看到别的事务提交的.而如果我们的业务场景是在事物内同样的两个查询我们需要看到的数据都是一致的,不能被 ...

  4. js学习笔记之公告逐行显示

    $(function(){ var newsListHeight = $(".news-list").height(); //获得内容的高度 var newsConHeight = ...

  5. jquery 判断单/复选框是否被选中

    1 <div> 2 <span>高亮:</span><input type="checkbox" name="light&quo ...

  6. C++动态内存管理与源码剖析

    引言 在本篇文章中,我们主要剖析c++中的动态内存管理,包括malloc.new expression.operator new.array new和allocator内存分配方法以及对应的内存释放方 ...

  7. 自学linux——16.LAMP项目上线流程

    LAMP项目上线流程 一.编译安装与卸载Nginx(web服务器软件,类似于Apache) 1.安装nginx ①    下载nginx 网页下载https://nginx.org/en/downlo ...

  8. 攻防世界misc——János-the-Ripper

    攻防世界misc---János-the-Ripper 附件题目,题目的文件名为:misc100. 下载后,拖入linux中,binwalk发现有隐藏文件.用"strings  János- ...

  9. postman 常见异常问题的处理

    1.postman一直转圈打不开的问题 一般这种问题是因为缓存过多,所以这里需要清理下缓存文件,即:删除%appdata%目录下的postman文件,删除之后可恢复正常. 这个文件夹是隐藏的,对于文件 ...

  10. vim的代码缩进

    例如下面一段代码: 现在要统一缩进6个tab,在UltraEdit里首先要选中文本,然后按6次tab,VIM中的操作是:首先按V(shift+v)进入行visual模式,然后按7次j选中这段文本(或者 ...