利用高德地图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. chromedp入门

    chromedp入门 chromedp是什么? chromedp是go写的,支持Chrome DevTools Protocol 的一个驱动浏览器的库.并且它不需要依赖其他的外界服务(比如 Selen ...

  2. Mongodb 批量更新

    >db.col.update({查询条件},{修改条件},{multi:true})

  3. spring boot 和shiro的代码实战demo

    spring boot和shiro的代码实战 首先说明一下,这里不是基础教程,需要有一定的shiro知识,随便百度一下,都能找到很多的博客叫你基础,所以这里我只给出代码. 官方文档:http://sh ...

  4. 入门大数据---Hbase搭建

    环境介绍 tuge1 tuge2 tuge3 tuge4 NameNode NameNode DataNode DataNode ZooKeeper ZooKeeper ZooKeeper ZooKe ...

  5. 用Visual C++创建WPF项目的三种主要方法

    用Visual C++创建WPF项目的三种主要方法 The problem with using XAML from C++ Because C++ doesn't support partial c ...

  6. BootstrapDialog.show - 提示信息对话框

    外文资料:http://nakupanda.github.io/bootstrap3-dialog/ (1)最简单的实现方式: BootstrapDialog.show({ message: 'Hi ...

  7. Solaris 11.4安装，映像包管理系统(IPS)搭建

    文章目录 1.下载地址 2. IPS安装准备 2.1 repo包 2.1 install-repo.ksh 2.2 校验文本 3. Solaris系统安装 3.1 虚拟机软件 3.2 安装os 3.3 ...

  8. linux中编写同步文件的脚本

    搭集群最麻烦的就是修改配置文件,如果只用修改一个机器上的配置文件,然后用一个脚本就可以把配置文件同步到其他机器上,岂不快哉! 编写一个名为xsync的脚本文件: 作用: 将当前机器的文件,同步到集群所 ...

  9. 重学 Java 设计模式：实战策略模式「模拟多种营销类型优惠券，折扣金额计算策略场景」

    作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 文无第一,武无第二 不同方向但同样努力的人,都有自身的价值和亮 ...

  10. BZOJ 2200 道路与航线（图论）

    BZOJ 2200 道路与航线 题目大意 有两种路,一种没负数,一种没环,求单源最短路. solution 存在负边权Dij一定不能用嘛,显然不是 根据题意能看出来是tarjan,将双向边缩点,得到的 ...