利用高德地图api实现简单的地图功能，包括定位，地图缩放，搜索，列表展示等等基础功能

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

<link rel="stylesheet"

    href="https://cache.amap.com/lbs/static/main1119.css" />

<script type="text/javascript"

    src="https://webapi.amap.com/maps?v=1.4.13&key=1351d632dc1826495e1ae0e97da35baf&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>

        <style type="text/css">

        #panel {

            position: fixed;

            background-color: white;

            max-height: 90%;

            overflow-y: auto;

            top: 10px;

            right: 10px;

            width: 280px;

            border-bottom: solid 1px silver;

        }

    </style>

</head>

<body>

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

    <div id="panel"></div>

    <div id="myPageTop" style="left:50px;width:200px">

        <table>

            <tr>

                <td><label>请输入关键字：</label></td>

            </tr>

            <tr>

                <td><input id="tipinput" /></td>

            </tr>

        </table>

    </div>

    <div id="closeMaps"></div>

    <script type="text/javascript">

        var cityCode;

        //地图加载

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

            resizeEnable : true

        });

        map.plugin('AMap.Geolocation', function() {

            var geolocation = new AMap.Geolocation({

                // 设置定位超时时间，默认：无穷大

                timeout : 10000,

                buttonOffset : new AMap.Pixel(10, 20),

                zoomToAccuracy : false,

                //  定位按钮的排放位置,  RB表示右下

                buttonPosition : 'RB'

            })

            geolocation.getCurrentPosition()

            AMap.event.addListener(geolocation, 'complete', onComplete)

            AMap.event.addListener(geolocation, 'error', onError)

            function onComplete(data) {

                cityCode = data.addressComponent.adcode;

                // data是具体的定位信息

            }

            function onError(data) {

                // 定位出错

            }

            //输入提示

            var autoOptions = {

                input : "tipinput",

                city : "成都"

            };

            var auto = new AMap.Autocomplete(autoOptions);

            var placeSearch = new AMap.PlaceSearch({

                pageSize: 5, // 单页显示结果条数

                pageIndex: 1, // 页码

                type: "汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施",

                citylimit: false,

                panel: "panel",

                map : map

            }); //构造地点查询类

            AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发

            function select(e) {

                placeSearch.setCity(cityCode);

                placeSearch.search(e.poi.name); //关键字查询查询

            }

            AMap.plugin('AMap.ToolBar', function() {

                var toolbar = new AMap.ToolBar();

                map.addControl(toolbar)

            })

        });

    </script>

</body>

</html>

html地图定位的更多相关文章

  1. (十八)WebGIS中清空功能和地图定位功能的设计以及实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...

  2. Android之仿ele地图定位效果

    PS:最近项目要求,希望在选择地址的时候能够仿ele来实现定位效果.因此就去做了一下.不过ele使用高德地图实现的,我是用百度地图实现的.没办法,公司说用百度那就用百度的吧.个人觉得高德应该更加的精准 ...

  3. iOS 获取用户授权的用户隐私保护-地图定位

    获取用户授权的用户隐私保护地图定位示例://导入定位框架#import<CoreLocation/CoreLocation.h>@interfaceViewController()< ...

  4. 关于iOS地图定位中点击设置->隐私->定位服务 闪退问题

    iOS8之后,如果应用中用到了地图定位,那么点击设置->隐私->定位服务 再点击该应用有时候会出现闪退问题,其原因是iOS8之后定位中添加了 NSLocationWhenInUseDesc ...

  5. 百度地图API实现地图定位

    1.引用JS: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ...

  6. ios8版本地图定位注意点

    学习ios地图定位 我先定义一个属性: @property (weak, nonatomic) IBOutlet MKMapView *mapV; 然后在项目运行时初始化该属性一些参数: //设置地图 ...

  7. Android 百度地图定位(手动+自动) 安卓开发教程

    近由于项目需要,研究了下百度地图定位,他们提供的实例基本都是用监听器实现自动定位的.我想实现一种效果:当用户进入UI时,不定位,用户需要定位的时候,自己手动点击按钮,再去定位当前位置.  经过2天研究 ...

  8. 针对不同手机系统的LBS地图定位解决方案

    原文:针对不同手机系统的LBS地图定位解决方案 摘要: 针对目前的三种手机系统:Android安卓.S60塞班.IOS苹果,做出的三种不同的手机地图应用解决方案. 查阅了多数地图API对手机的支持情况 ...

  9. 百度地图定位SDK 之构想

    百度地图定位 前提 从香港旅游回来,心中油然升起一股热血滂湃,激励自己发现市场需求,向创业奋进,朝着梦想前进. 简介 百度Android定位SDK支持Android1.5以及以上设备,提供: 定位功能 ...

  10. 地图定位CoreLocation框架,地理位置编码与反编码

    在现代互联网时代,越来越多的应用,都用到了地图定位功能,在iOS开发中,想要加入这种功能,必须基于两个框架进行开发: 1.Map Kit:用于显示地图, 2.CoreLocation:用于显示地理位置 ...

随机推荐

  1. Linux 初始化系统 SystemV Upstart

    System V 特点 缺点: 启动时间长,init是串行启动,只有前一个进程启动完,才会启动下一个进程 启动脚本复杂,init只是执行启动脚本,不管其他事情,脚本需要自己处理各种情况,这往往使得脚本 ...

  2. 设计模式系列之中介者模式(Mediator Pattern)——协调多个对象之间的交互

    说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修炼之道)>一书的阅读笔记.个人感觉这本书讲的不错,有兴趣推荐读一读.详细内容也可以看看此书作者的博客https:/ ...

  3. MongoDB快速入门教程 （2）

    2.MongoDB的基本的CRUD操作 2.1.创建文档 在具体操作之前,想要知道有多少数据库,可以执行下面命令 show dbs 在mongodb中,数据库中包含的叫做集合(表),集合中存储的内容叫 ...

  4. Python之浅谈绑定方法

    目录 绑定方法和非绑定方法 绑定方法 对象的绑定方法 类的绑定方法 非绑定方法 总结 绑定方法和非绑定方法 类中定义的方法大致可以分为两类:绑定方法和非绑定方法.其中绑定方法又可以分为绑定到对象的方法 ...

  5. 宿主机ping不通虚拟机，虚拟机能ping通宿主机问题

    打开虚拟机管理器,点开设置=>网络,网络选的是NAT,所以宿主机不能直接ping能虚拟机!!! 问题描述 查看虚拟机ip,  #ifconfig如下图: 宿主机ping虚拟机ip,无法通信,如下 ...

  6. python-循环-两种方法实现九九乘法表

    方法一:用最基本的while循环嵌套(基础时,便于理解) while循环的嵌套,先执行里边的,再执行外边的 i = 1 while i <= 9: j = 1 while j <= i: ...

  7. 阿里云Linux CentOS8.1 64位服务器安装LNMP(Linux+Nginx+MySQL+PHP) 并发调试之调试工具ab(apache bench)

    ab 测试工具,全称是 apache bench ,是 Apache 提供的一款测试工具,具有简单易上手的特点,在测试 Web 服务时非常实用. ab 可以在 Windows 系统中使用,也可以在 L ...

  8. Electron 初识-搭建一个简易桌面应用

    Electron ​ 快速入门 简介 Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作是专注于桌面应用而不是 web 服务器的,io.j ...

  9. Validate表单验证插件之常用参数介绍

    Validate常用的一些参数和方法 1.errorElement 修改显示错误提示信息的HTML标签.默认是<label>,可以指定为<span>.... $("# ...

  10. redo log 与 binlog

    redo log 与 binlog   redo log redo log (重做日志)是处于存储引擎层的,是InnoDB引擎特有的 redo log 存储的是物理日志 --- 即,"在某个 ...