`
Turbo12138
  • 浏览: 41198 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

高德地图定位兼搜索

 
阅读更多

这几天一直忙着写高德地图的定位兼搜索功能,现在有点眉目了,但还是偶尔会出bug,希望大家有所借鉴,但更希望给提点建议微笑,不知好不好

 

我的缺点就是把三个地图整合到一块去了,分开写我实在不会,以后会的话一定分享…………

 

大家有想尝试的得去高德API注册一个密钥,也就是key,我这里是ada0145080deff882d2a28e8af2047ad

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>输入提示后查询</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script src="../API/jquery-2.1.4.min.js"></script>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.3&key=ada0145080deff882d2a28e8af2047ad&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    <link rel="stylesheet" type="text/css" href="../API/Api.css">
</head>
<body>
<div class="box_dis">
    <input class="search" id="tipinput"/>
</div>
<div class="distance">
    <div id="container"></div>
</div>
<div class="scroll" id="view">
    <div id="panel"></div>
</div>
<div id="containe"></div>
<!--<div id="container"></div>-->
<script type="text/javascript">
       window.onload = function () {

        getLocation()
        displayPOI()
    }
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
    }
    function showPosition(position) {
        var obj_info = {latitude: position.coords.latitude, longitude: position.coords.longitude};
        localStorage.setItem("info", JSON.stringify(obj_info));

    }
    var map, geolocation;
    //加载地图,调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true
    });
    $('.amap-logo').css('display','none');
    $('.amap-copyright').css('display','none');
    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位,默认:true
            timeout: 10000,          //超过10秒后停止定位,默认:无穷大
            buttonOffset: new AMap.Pixel(10, 10),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
            buttonPosition: 'RB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
    var autoOptions = {
        input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
    }
    var dress = JSON.parse(localStorage.getItem("info"))
    var map = new BMap.Map("containe");
    var mPoint = new BMap.Point(dress.longitude, dress.latitude);
    map.centerAndZoom(mPoint, 15);
    map.enableScrollWheelZoom();        //启用滚轮缩放
    var mOption = {
        poiRadius: 2500,           //半径为1000米内的POI,默认100米
        numPois: 20              //列举出50个POI,默认10个
    }
    var myGeo = new BMap.Geocoder();        //创建地址解析实例
    function displayPOI() {
        map.addOverlay(new BMap.Circle(mPoint, 0));        //添加一个圆形覆盖物
        myGeo.getLocation(mPoint,
                function mCallback(rs) {
                    var allPois = rs.surroundingPois;       //获取全部POI(该点半径为100米内有6个POI点)
                    for (i = 0; i < allPois.length; ++i) {
                        document.getElementById("panel").innerHTML += "<div class='list' id="+allPois[i].title+"><div class='site'>" + allPois[i].title +"</div><div class='site_down'>" + allPois[i].address + "</div><span class='right'><img class='tex'  src='../API/outstyle091100004.jpg' id="+allPois[i].title+"></span></div></div>";
                        map.addOverlay(new BMap.Marker(allPois[i].point));
                        $('.anchorBL').css('display','none');
                    }
                }, mOption
        );
    }
</script>
</body>
</html> 

 

分享到:
评论

相关推荐

    基于YOLOv5工地上安全帽佩戴的检测源码+训练好模型+数据集.zip

    YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明

    2011管理类联考199综合能力全国硕士研究生招生考试解析.pdf

    考研管理类联考综合能力答案解析,考研真题,考研历年真题,考研管理类联考历年真题,真题解析。

    NIUCLOUD-ADMIN 是一款快速开发SaaS通用管理系统后台框架.zip

    springboot框架 一、Spring Boot基础应用 Spring Boot特征 概念: 约定优于配置,简单来说就是你所期待的配置与约定的配置一致,那么就可以不做任何配置,约定不符合期待时才需要对约定进行替换配置。 特征: 1. SpringBoot Starter:他将常用的依赖分组进行了整合,将其合并到一个依赖中,这样就可以一次性添加到项目的Maven或Gradle构建中。 2,使编码变得简单,SpringBoot采用 JavaConfig的方式对Spring进行配置,并且提供了大量的注解,极大的提高了工作效率,比如@Configuration和@bean注解结合,基于@Configuration完成类扫描,基于@bean注解把返回值注入IOC容器。 3.自动配置:SpringBoot的自动配置特性利用了Spring对条件化配置的支持,合理地推测应用所需的bean并自动化配置他们。 4.使部署变得简单,SpringBoot内置了三种Servlet容器,Tomcat,Jetty,undertow.我们只需要一个Java的运行环境就可以跑SpringBoot的项目了

    2024-2030全球及中国冷冻有机毛豆行业研究及十五五规划分析报告.docx

    2024-2030全球及中国冷冻有机毛豆行业研究及十五五规划分析报告

    SpringBoo车险理赔源码.rar

    SpringBoo车险理赔源码.rarSpringBoo车险理赔源码.rarSpringBoo车险理赔源码.rar

    Python实现基于机器学习的银行客户认购产品预测项目源码+数据集+模型文件.zip

    详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;

    Web网页设计期末大作业壁纸之家网站源码.zip

    详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;详情请查看资源内容中使用说明;

    yolov8房屋墙面路面裂缝-发霉-油漆脱落-渗水-墙皮脱落检测+数据集

    1、yolov8房屋墙面路面裂缝-发霉-油漆脱落-渗水-墙皮脱落检测,包含训练好的检测权重,以及PR曲线,loss曲线等等,和数据集 2、pyqt界面可以检测图片、视频、调用摄像头 3、数据集和检测结果参考:https://blog.csdn.net/zhiqingAI/article/details/124230743 4、采用pytrch框架,python代码 https://blog.csdn.net/zhiqingAI/article/details/137371158

    射频通信原理-第1章.ppt

    射频通信原理-第1章.ppt

    081springboot-vue垃圾分类网站.zip(可运行源码+数据库文件+文档)

    本L文主要论述了如何使用JAVA语言开发一个垃圾分类网站 ,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发。在引言中,作者将论述垃圾分类网站的当前背景以及系统开发的目的,后续章节将严格按照软件开发流程,对系统进行各个阶段分析设计。 垃圾分类网站的主要使用者分为管理员和用户、垃圾分类管理员,实现功能包括管理员:首页、个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理,垃圾分类管理员;首页、个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理,用户前台;首页、垃圾分类、垃圾图谱、个人中心、后台管理等功能。由于本网站的功能模块设计比较全面,所以使得整个垃圾分类网站信息管理的过程得以实现。 本系统的使用可以实现本垃圾分类网站管理的信息化,可以方便管理员进行更加方便快捷的管理,可以提高管理人员的工作效率。 关键词:垃圾分类网站 JAVA语言;MYSQL数据库;Spring Boot框架

    基于微信小程序开发的多肉植物图鉴毕业设计源码.zip

    高分设计源码,详情请查看资源内容中使用说明 高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明

    312749069629470selfieU重绘.apk

    312749069629470selfieU重绘.apk

    芒果实例分割数据集yolov8格式,可用于yolov8的训练,包含453条训练数据,91条验证数据

    芒果实例分割数据集在多个场景中都有重要的应用,以下是几个主要的使用场景: 精准农业与果园管理:在精准农业中,对果园中的芒果进行实例分割可以帮助农民更准确地了解每个芒果的生长情况,包括大小、形状、颜色等。这有助于农民进行针对性的管理,如施肥、灌溉和修剪,从而提高果园的产量和质量。 自动化采摘:芒果实例分割数据集可以用于训练自动化采摘机器人。通过识别图像中的芒果实例,机器人可以精确地定位并采摘芒果,从而提高采摘效率和减少人工成本。 质量评估与分类:在芒果的分级和质量控制中,实例分割技术可以帮助对芒果进行自动分类。通过分析芒果的形状、大小和颜色等特征,可以评估芒果的成熟度、新鲜度和品质等级,从而为消费者提供更高质量的芒果产品。 病虫害检测:芒果实例分割数据集也可用于病虫害的检测和诊断。通过对芒果图像的分割和分析,可以检测病虫害的发生,及时发现并采取相应的防治措施,减少损失并保障芒果的健康生长。 智能监控与安全追溯:在芒果的储存和运输过程中,使用实例分割技术可以实现对芒果的实时监控和追溯。通过识别图像中的芒果实例,可以监测芒果的状态和变化,及时发现异常情况并采取相应措施,确保芒果的安

    C#课程设计大作基于WinForm的页面美观功能完整的导师双选系统源码..zip

    高分设计源码,详情请查看资源内容中使用说明 高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明

    实验四-数据库安全.doc

    实验四-数据库安全.doc

    天津科技大学-答辩通用PPT模板我给母校送模板作品.pptx

    PPT模板,答辩PPT模板,毕业答辩,学术汇报,母校模板,我给母校送模板作品,周会汇报,开题答辩,教育主题模板下载。PPT素材下载。

    C++毕业设计局域网聊天系统源码.zip

    高分设计源码,详情请查看资源内容中使用说明 高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明高分设计源码,详情请查看资源内容中使用说明

    node-v8.7.0-sunos-x64.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    LabVIEW动态调用子VI并插入主VI前面板-编程实例

    依次动态调用某一文件夹下的子VI,运行子VI,并将子VI前面板打开插入到主程序的前面板中。

    springboot部署系统(自动化部署+缓存管理+业务降级+应用监控).zip

    springboot框架 一、Spring Boot基础应用 Spring Boot特征 概念: 约定优于配置,简单来说就是你所期待的配置与约定的配置一致,那么就可以不做任何配置,约定不符合期待时才需要对约定进行替换配置。 特征: 1. SpringBoot Starter:他将常用的依赖分组进行了整合,将其合并到一个依赖中,这样就可以一次性添加到项目的Maven或Gradle构建中。 2,使编码变得简单,SpringBoot采用 JavaConfig的方式对Spring进行配置,并且提供了大量的注解,极大的提高了工作效率,比如@Configuration和@bean注解结合,基于@Configuration完成类扫描,基于@bean注解把返回值注入IOC容器。 3.自动配置:SpringBoot的自动配置特性利用了Spring对条件化配置的支持,合理地推测应用所需的bean并自动化配置他们。 4.使部署变得简单,SpringBoot内置了三种Servlet容器,Tomcat,Jetty,undertow.我们只需要一个Java的运行环境就可以跑SpringBoot的项目了

Global site tag (gtag.js) - Google Analytics