1.IP定位切换

2.点击坐标获取地点

3.查询地点切换坐标

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>简单地图</title>

    <meta name="viewport"

        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <style type="text/css">

        html,

        body {

            width: 100%;

            height: 100%;

        }

        * {

            margin: 0px;

            padding: 0px;

        }

        body,

        button,

        input,

        select,

        textarea {

            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;

        }

        p {

            width: 603px;

            padding-top: 3px;

            overflow: hidden;

        }

        .btn {

            width: 142px;

        }

        #container {

            height: 90%;

            width: 99%;

            text-align: center;

        }

    </style>

    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=MJABZ-YGGL5-IBIIN-Q5Z45-FMOI7-VIBGN"></script>

    <script src="jquery.min.js"></script>

    <script>

        //1. 通过传入地址 定位到地址

        //2. 通过查询地址 地图定位到地址

        //3. 通过地图点击定位，获取到具体地址

        var MAP_GLOAP = {

            CURR_MAP: [28.21409, 112.89173], //当前坐标

            CURR_ADR: null, //当前地址

            KEY: 'MJABZ-YGGL5-IBIIN-Q5Z45-FMOI7-VIBGN',

            map: null, //地图对象

            Maker: null, //标记（单个）

            SearchInput: "#mapSearch",//查询文本框

            SearchBT: "#mapSearchBT" //查询按钮

        };

        //刷新查询列表

        var RefSearch = function () {

            console.log(MAP_GLOAP);

            $(MAP_GLOAP.SearchInput).val(MAP_GLOAP.CURR_ADR);

        };

        //增加打标

        var AddMark = function () {

            var center = new qq.maps.LatLng(MAP_GLOAP.CURR_MAP[0], MAP_GLOAP.CURR_MAP[1]);

            if (MAP_GLOAP.Maker) {

                MAP_GLOAP.Maker.setMap(null);

            }

            MAP_GLOAP.Maker = new qq.maps.Marker({

                position: center,

                map: MAP_GLOAP.map

            });

        };

        //刷新坐标

        var RefMap = function () {

            var center = new qq.maps.LatLng(MAP_GLOAP.CURR_MAP[0], MAP_GLOAP.CURR_MAP[1]);

            MAP_GLOAP.map.panTo(center);

        }

        //通过IP获取定位

        var IpMap = function () {

            //如果有值的话就不需要重新定位

            if( MAP_GLOAP.CURR_ADR) return;

            var data = {

                    address: MAP_GLOAP.CURR_ADR,

                    key: MAP_GLOAP.KEY, //key为自己向腾讯地图申请的密钥

                    output: "jsonp"

                };

                var url = "http://apis.map.qq.com/ws/location/v1/ip";

                $.ajax({

                    type: "get",

                    dataType: 'jsonp',

                    data: data,

                    jsonp: "callback",

                    jsonpCallback: "QQmap",

                    url: url,

                    success: function (res) {

                        console.log(res);

                        if (res && res.result.location) {

                            MAP_GLOAP.CURR_MAP = [res.result.location.lat, res.result.location.lng];

                            //刷新坐标轴

                            RefMap();

                            //刷新maker

                            AddMark();

                            //刷新输入框

                            RefSearch();

                        }

                        else {

                            alert("暂时没有查到该地区，请重新在试下！");

                        }

                    },

                    error: function (err) {

                        alert("服务端错误，请刷新浏览器后重试");

                    }

                });

        }

        //地址查询

        var SearchMap = function () {

            //1.获取地址名称，转译坐标

            //2.设置坐标，重新载入地图

            $(MAP_GLOAP.SearchBT).click(function () {

                MAP_GLOAP.CURR_ADR = $(MAP_GLOAP.SearchInput).val();

                if (!MAP_GLOAP.CURR_ADR || MAP_GLOAP.CURR_ADR < 0) {

                    alert("查询数据不能为空");

                }

                var data = {

                    address: MAP_GLOAP.CURR_ADR,

                    key: MAP_GLOAP.KEY, //key为自己向腾讯地图申请的密钥

                    output: "jsonp"

                };

                var url = "http://apis.map.qq.com/ws/geocoder/v1/";

                $.ajax({

                    type: "get",

                    dataType: 'jsonp',

                    data: data,

                    jsonp: "callback",

                    jsonpCallback: "QQmap",

                    url: url,

                    success: function (res) {

                        console.log(res);

                        if (res && res.result.location) {

                            MAP_GLOAP.CURR_MAP = [res.result.location.lat, res.result.location.lng];

                            //刷新坐标轴

                            RefMap();

                            //刷新maker

                            AddMark();

                            //刷新输入框

                            RefSearch();

                        }

                        else {

                            alert("暂时没有查到该地区，请重新在试下！");

                        }

                    },

                    error: function (err) {

                        alert("服务端错误，请刷新浏览器后重试");

                    }

                });

            })

        }

        //初始化

        var init = function () {

            //定义map变量

            MAP_GLOAP.map = new qq.maps.Map(document.getElementById("container"), {

                center: new qq.maps.LatLng(MAP_GLOAP.CURR_MAP[0], MAP_GLOAP.CURR_MAP[1]),      // 地图的中心地理坐标。

                zoom: 10  // 地图的中心地理坐标。

            });

            //添加监听事件

            qq.maps.event.addListener(MAP_GLOAP.map, 'click', function (e) {

                MAP_GLOAP.CURR_MAP = [e.latLng.getLat().toFixed(5), e.latLng.getLng().toFixed(5)];

                var data = {

                    location: MAP_GLOAP.CURR_MAP[0] + ',' + MAP_GLOAP.CURR_MAP[1],

                    key: MAP_GLOAP.KEY, //key为自己向腾讯地图申请的密钥

                    get_poi: 0

                };

                var url = "http://apis.map.qq.com/ws/geocoder/v1/?";

                data.output = "jsonp";

                $.ajax({

                    type: "get",

                    dataType: 'jsonp',

                    data: data,

                    jsonp: "callback",

                    jsonpCallback: "QQmap",

                    url: url,

                    success: function (res) {

                        console.log(res);

                        MAP_GLOAP.CURR_ADR = res.result.address;//  `${res.result.address_component.province}${res.result.address_component.city}${res.result.formatted_addresses.recommend}`;

                        MAP_GLOAP.CURR_MAP = [res.result.location.lat, res.result.location.lng];

                        //刷新坐标轴

                        RefMap();

                        //刷新maker

                        AddMark();

                        //刷新输入框

                        RefSearch();

                    },

                    error: function (err) {

                        //  alert("服务端错误，请刷新浏览器后重试");

                    }

                });

                AddMark;

            });

        }

        window.onload = function () {

            //当前ip获取地址

            IpMap();

            //初始化地图函数  自定义函数名init

            init();

            //地址查询功能

            SearchMap();

        }

    </script>

</head>

<body>

        <input type="text" value="" id="mapSearch"><button id="mapSearchBT" value="">查询</button>

    <!--   显示地图的区域   -->

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

</body>

　　

C# 直接可用模板：

//调用

　　

腾讯地图JSAPI开发demo 定位，查询的更多相关文章

  1. 有关于腾讯地图服务端IP定位接口的获取当前城市的处理

    接口说明:http://apis.map.qq.com/ws/location/v1/ip 说明里面写了ip可以缺省,然并卵,经过测试的到结果并不能获取到当前城市,理由是腾讯ip库的对应ip精度没有定 ...

  2. 百度地图 JSAPI使用 mark 定位地址 与周边覆盖物

    http://lbsyun.baidu.com/index.php?title=jspopular   api  http://developer.baidu.com/map/jsdemo.htm#a ...

  3. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息，wx.getLocation，腾讯地图小程序api，微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  4. Taro开发微信小程序之利用腾讯地图sdk标记

    首先要下载腾讯地图提供的sdk,放在项目的对应目录下,引用. import QQMapWX from '../../sdks/qqmap-wx-jssdk' 设置好后,就可以开始使用了. let qq ...

  5. 地图API使用文档-以腾讯地图为例

    目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...

  6. 基于MFC与第三方类CWebPage的百度地图API开发范例

    在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...

  7. H5端调起百度地图、腾讯地图app

    来自一个需求的总结: 在微信公众号中根据地图上的marker和label,或者搜索结果点击调起地图APP进行导航. 一开始是使用百度地图进行开发,后面转腾讯是因为微信不允许不是自家或者合作方的APP在 ...

  8. 微信小程序--百度地图坐标转换成腾讯地图坐标

    最近开发小程序时出现一个问题,后台程序坐标采用的时百度地图的坐标,因为小程序地图时采用的腾讯地图的坐标系,两种坐标有一定的误差,导致位置信息显示不正确.现在需要一个可以转换两种坐标的方法,经过查询发现 ...

  9. iOS开发那些事-iOS6苹果地图实用开发

    在iOS 6之后,不再使用谷歌地图了,而是使用苹果自己的地图,但是API编程接口没有太大的变化.开发人员不需要再学习很多新东西就能开发地图应用,这是负责任的做法.因此本节介绍的内容也同样适用于iOS5 ...

随机推荐

  1. DP&图论 DAY 3 上午

    DP&图论  DAY 3  上午 状态压缩dp >状态压缩dp ◦状态压缩是设计dp状态的一种方式.◦当普通的dp状态维数很多(或者说维数与输入数据有关),但每一维总量很少是,可以将多维 ...

  2. Android studio 下 NDK Jni 开发 简单例子

    1. 创建一个新的工程 2. 创建一个新的类 JniText.java  点击Build--Make Project  后     选中工程 点击F4键 sdk location 中 Android ...

  3. openerp学习笔记 计划动作、计划执行（维护计划）

    示例代码: data/scheduler.xml <?xml version="1.0" encoding="utf-8"?><openerp ...

  4. java高级之Io流

    1.1,什么是io流? 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输特性将流抽象为各种类,方便更直观的进行数据操作 ...

  5. Python 正则表达式【二】

    关于前向,后向,匹配,非匹配 Matches if ... matches next, but doesn’t consume any of the string. This is called a ...

  6. Django使用消息提示简单的弹出个对话框

    1.下面就来介绍一下如何简单的显示一个消息提示,好像js可以控制,不过这里用了django.contrib.messages这个库 2.首先呢,在项目的settings.py有默认配置一个django ...

  7. charles安装&破解

    走在测试的道路上,我们总归要学习抓包,仅仅是为了更好的定位bug出现的位置.抓包工具何其之多,但是我个人推荐的是charles,主要是因为windows和ios可以同时使用,这样就可以方便不少.不废话 ...

  8. CRLF、CR、LF详解

    名词解释 CR:Carriage Return,对应ASCII中转义字符\r,表示回车 LF:Linefeed,对应ASCII中转义字符\n,表示换行 CRLF:Carriage Return &am ...

  9. 编译安装MySQL数据库

    1. 安cmake工具 # yum install -y cmake 2. 创建mysql用户 # useradd -M -s /sbin/nologin mysql 3. 创建数据目录 # mkdi ...

  10. 机器学习笔记：支持向量机(svm)

    支持向量机(svm)英文为Support Vector Machines 第一次接触支持向量机是2017年在一个在线解密游戏"哈密顿行动"中的一个关卡的二分类问题,用到了台湾教授写 ...