关于使用高德地图API Web端(JS API)

标签: Javascript  API  

关于使用高德地图API web端(JS API)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/QZPHP_L/article/details/82143240


本次集成了浏览器定位拖拽选址POI周边搜索三个功能

这里写图片描述

浏览器定位

只需要使用官网浏览器定位demo中一小段js代码

 //精确定位
 map.plugin('AMap.Geolocation', function() {
    geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位,默认:true
        timeout: 10000,          //超过10秒后停止定位,默认:无穷大
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认: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);      //返回定位出错信息
  });

拖拽选址

此功能需要引入高德地图的UI,否则页面上一些按键不显示

<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.9&key=key值&plugin=AMap.ToolBar'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
   AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
       var map = new AMap.Map('container', {
            zoom: 16,
            scrollWheel: false,
            resizeEnable: true     
       })
       var positionPicker = new PositionPicker({
            mode: 'dragMap',
            map: map
       });
      //精确定位
    map.plugin('AMap.Geolocation', function() {
       geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,//是否使用高精度定位,默认:true
          timeout: 10000,          //超过10秒后停止定位,默认:无穷大
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认: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);      //返回定位出错信息
      });
      //精确定位结束
      //拖拽成功触发
      positionPicker.on('success', function(positionResult) {
            document.getElementById('address').innerHTML = positionResult.address;      
            AMap.service(["AMap.PlaceSearch"], function() {
        var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
            pageSize: 5,
            pageIndex: 1,
            panel: "panel"
        }); 
        var cpoint = [ positionResult.position]; //中心点坐标
        placeSearch.searchNearBy('', cpoint, 200, function(status, result) {
        });
    });
        });
        positionPicker.on('fail', function(positionResult) {
            document.getElementById('address').innerHTML = '获取位置信息失败';
        });
        var onModeChange = function(e) {
            positionPicker.setMode(e.target.value)
        }
        positionPicker.start();
        map.panBy(0, 1);
        map.addControl(new AMap.ToolBar({
            liteStyle: true
        }))
    });
    </script>

到此基本实现定位和微调功能,下面可以根据需要加入POI周边搜索

POI周边搜索

浏览器定位成功后,自动检索周边一定范围内的地点
var cpoint = [ positionResult.position]; //中心点坐标
这里的positionResult.position是根据上文中拖拽选址成功后的返回值得来的
这段js需要加到拖拽选址positionPicker.on返回success的函数中·

     AMap.service(["AMap.PlaceSearch"], function() {
        var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
            pageSize: 5,
            pageIndex: 1,
            panel: "panel"
        });

        var cpoint = [ positionResult.position]; //中心点坐标
        placeSearch.searchNearBy('', cpoint, 200, function(status, result) {

        });
    });

以上实现了定位,拖拽选址,POI周边功能
需要特别注意的是Key值必须是Web端(JS API)的key值,这个Key值可以在高德开发平台的控制台中添加Key,
选择Web端(JS API)点击生成Key。使用android或其他生成的key值,可以实现定位,但是其他功能都不会实现。

测试时需放入环境中, 使用localhost127.0.0.1访问

这里写图片描述

下面贴出html部分

css可根据需要自行修改

<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 原始地址://webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/positionPicker.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德地图</title>
    <style>
    html,
    body {
        height: 100%;
        margin: 0;
        width: 100%;
        padding: 0;
        overflow: hidden;
        font-size: 13px;
    }

    .map {
        height: 310px;
        width: 100%;

    }

    #right {
        color: #444;
        background-color: #f8f8f8;
        min-width: 30px;
        line-height:30px;
        height: 30px;
        position: absolute; 
        top: 0;
        left: 0;

    }

    .title {
        width: 100%;
        background-color: #dadada
    }

    button {
        border: solid 1px;
        margin-left: 15px;
        background-color: #dadafa;
    }

    .c {
        font-weight: 600;
        padding-left: 15px;
        padding-top: 4px;
    }

    #lnglat,
    #address,
    #nearestJunction,
    #nearestRoad,
    #nearestPOI,
    .title {
        padding-left: 15px;
    }
    #panel {
           position: absolute; 
            background-color: white;
            height: 150px;
            overflow-y: auto;
            bottom: 0px;
            width: 100%;
            border-bottom: solid 1px silver;
        }
      .poi-img,.amap-zoomcontrol,.poi-tel,.poi-more{
        display:none;
      }
    </style>
</head>
<body>
    <div id="container" class="map" tabindex="0"></div>
    <div id='right'>
        <div>
            <div id='address'></div>
        </div>
    </div>
  <div id="panel"></div>
</body>
</html>
版权声明:本文为QZPHP_L原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/QZPHP_L/article/details/82143240

智能推荐

数据去重的各种方法汇总(三)

Pandas去重DataFrame 接上篇,这篇就剩最后的用Pandas对DataFrame里面的数据去重,这里也有两种方法,可以直接看官方文档(但是掌柜觉得其实就是一种方法,因为第一种只是显示哪些重复。。。): 使用duplicated方法,它会返回一个布尔向量,其长度为行数,表示行是否重复,但是并不会删除重复数据。来看实例: 然后会得到这样一个表格: 现在使用duplicated方法: 会得到...

Linux环境下RabbitMQ消息队列的安装和配置

一、什么是RabbitMQ? RabbitMQ就是一个在AMQP基础上实现的企业级消息系统,简单的说,就是一个消息队列系统。具体的介绍,可以网上去搜!目前只介绍RabbitMQ在Linux系统的安装。 二、RabbitMQ的安装 1、 RabbitMQ是基于Erlang开发,所以使用之前必须安装Erlang语言开发包。 wget http://www.erlang.org/download/otp...

train_test_split切分数据集工具

顾名思义,这是一个切分训练集与测试集的工具   如果我们不使用,而是手动进行划分,要么进行简单的操作——划去前80%为训练集,后20%为测试集,这样会带来很多的问题,因为这样做,我们切出来的会让训练集和测试集的分布很不一致,我们可以看一下简单粗暴方法切出来的分布图: 红色的训练集,蓝色是测试集(点击图片放大可以看得很清楚,直接看博客好像图片模糊)   然...

shell编程第一节 和shell

shell编程看的博客感觉写的挺好的:http://www.cnblogs.com/dongying/p/6262935.html 以及  https://www.cnblogs.com/clsn/p/8028337.html#auto_id_0 简单总结:shell编程就是对一堆Linux命令的逻辑化处理。 chmod +x hello_world.sh ./hello_world.s...

微信开发:js sdk 分享(java)

今天记录一下微信jssdk 的分享给朋友的功能,获取config接口注入。 1.需要绑定域名(注意:设置js安全域名的时候,需要设置微信ip白名单,ip白名单新出来的,非白名单内的ip无法获取access_token 更无法获取jsapi) 在设置js 安全域名在 设置–>公众号设置–>功能设置里边 appid appSercret 在开发–>...

猜你喜欢

js--HTML美术馆

前言 因为之前库房合作的时候交给我一个任务,就是在点击某一项物品的时候显示出几张相印的小图片,然后点击小图片之后显示出一张大图片,因为当时还没有接触JavaScript,所以这方面的知识不是很了解,一直拖着,大概有两天吧,是在是解决不了,于是将这个任务交给了老付和建华,今天在学习JavaScript的时候突然之后就看到了有这么一项功能,于是就有感而发。 内容 首先向大家展示代码。 这部分是HTML...

Jenkins持续集成环境部署(入门篇)

为什么要持续集成 持续集成是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。 价值: 1、减少风险 一天中进行多次的集成,并做了相应的测试,有利于检查缺陷,了解软件的健康状况,减少假定。 2、减少重复过程 节省时间、费用和工作量,通过自动化的持...

linux 下rabbitmq的安装以及设置远程用户访问

安装过程中会有提示,一路输入“y”即可。 完成后安装RabbitMQ: 3.自己建个文件夹 进行下载安装也可  直接执行也可 先下载rpm: 完成后启动服务: 可以查看服务状态: 这里可以看到log文件的位置,转到文件位置,打开文件: 这里显示的是没有找到配置文件,我们可以自己创建这个文件 编辑内容如下: 这里的意思是开放使用,rabbitmq默认创建的用户gue...

Java工程师成长修炼手册:01--Java基础特性和字符串

一.三大特性 1.封装 封装,把对象的属性封装起来(使用private修饰符),不被外部程序直接随意调用或修改成员变量。只能通过对象使用public修饰符的set 和 get 方法,来设置和获取成员变量的值。也可以把只在本类内部使用的方法使用 private。另外,还可以封装,隐藏一些方法,需要用的时候,就调用这些方法。这些就是封装。 封装的优点 良好的封装能够减少耦合,可以独立地开发、优化和修改...

android手机传感器总结

  传感器的分类 动作传感器 加速度传感器 重力传感器 陀螺仪 位置传感器 方向传感器 磁力传感器 环境传感器 温度传感器 压力传感器 亮度传感器 传感器的使用 1.获取SensorManager对象 2.执行SensorManager对象的getdefaultSensor()方法获取Sensor对象 3.获取Sensor对象的各种属性 获取安卓手机中所有传感器  输出结果 传...