腾讯地图JSAPI开发demo 定位，查询
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 定位，查询的更多相关文章
- 有关于腾讯地图服务端IP定位接口的获取当前城市的处理
接口说明:http://apis.map.qq.com/ws/location/v1/ip 说明里面写了ip可以缺省,然并卵,经过测试的到结果并不能获取到当前城市,理由是腾讯ip库的对应ip精度没有定 ...
- 百度地图 JSAPI使用 mark 定位地址 与周边覆盖物
http://lbsyun.baidu.com/index.php?title=jspopular api http://developer.baidu.com/map/jsdemo.htm#a ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息，wx.getLocation，腾讯地图小程序api，微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- Taro开发微信小程序之利用腾讯地图sdk标记
首先要下载腾讯地图提供的sdk,放在项目的对应目录下,引用. import QQMapWX from '../../sdks/qqmap-wx-jssdk' 设置好后,就可以开始使用了. let qq ...
- 地图API使用文档-以腾讯地图为例
目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...
- 基于MFC与第三方类CWebPage的百度地图API开发范例
在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...
- H5端调起百度地图、腾讯地图app
来自一个需求的总结: 在微信公众号中根据地图上的marker和label,或者搜索结果点击调起地图APP进行导航. 一开始是使用百度地图进行开发,后面转腾讯是因为微信不允许不是自家或者合作方的APP在 ...
- 微信小程序--百度地图坐标转换成腾讯地图坐标
最近开发小程序时出现一个问题,后台程序坐标采用的时百度地图的坐标,因为小程序地图时采用的腾讯地图的坐标系,两种坐标有一定的误差,导致位置信息显示不正确.现在需要一个可以转换两种坐标的方法,经过查询发现 ...
- iOS开发那些事-iOS6苹果地图实用开发
在iOS 6之后,不再使用谷歌地图了,而是使用苹果自己的地图,但是API编程接口没有太大的变化.开发人员不需要再学习很多新东西就能开发地图应用,这是负责任的做法.因此本节介绍的内容也同样适用于iOS5 ...
随机推荐
- C# 防火墙操作之开启与关闭
通过代码操作防火墙的方式有两种:一是代码操作修改注册表启用或关闭防火墙:二是直接操作防火墙对象来启用或关闭防火墙.不论哪一种方式,都需要使用管理员权限,所以操作前需要判断程序是否具有管理员权限. 1. ...
- TcpSendRcv方法笔记1
if (ns.DataAvailable) return ns.ReadByte(); ns.DataAvailable:获取一个值,该值指示在要读取的 NetworkStream 上是否有可用的数据 ...
- nodejs 中间件理解
中间件概念 在NodeJS中,中间件主要是指封装所有Http请求细节处理的方法.一次Http请求通常包含很多工作,如记录日志.ip过滤.查询字符串.请求体解析.Cookie处理.权限验证.参数验证.异 ...
- Linux 查找特定程序 whereis
Linux 查找特定程序 whereis whereis 命令主要用于查找程序文件,并提供这个文件的二进制可执行文件.源代码文件和使用手册存放位置. 1.查找命令程序 例如,查找 touch 命令 [ ...
- office web apps安装部署,配置https,负载均衡（七）配置过程中遇到的问题详细解答
该篇文章,是这个系列文章的最后一篇文章,该篇文章将详细解答owa在安装过程中常见的问题. 如果您没有搭建好office web apps,您可以查看前面的一系列文章,查看具体步骤: office we ...
- 小程序请求豆瓣API报403解决方法
微信小程序使用wx.request API请求豆瓣公开api的时候,会报一个403(Forbidden)的错误.这是为什么呢?是由于来自小程序的调用过多,豆瓣来自于小程序的调用被禁止.这里收集以下三种 ...
- 如何在google colab加载kaggle数据
参考https://medium.com/@yvettewu.dw/tutorial-kaggle-api-google-colaboratory-1a054a382de0 从本地上传到colab上十 ...
- __str__,__repr__,__add__
class School: def __init__(self,name,addr,type): self.name=name self.addr=addr self.type=type def __ ...
- WCF客户端代理
创建类库WCFServiceProxy 添加System.ServiceModel.WCFService(见上篇文章)引用 创建类:BookServiceClient using System; us ...
- mysql --single-transaction 在从库导入完数据以后要在配置文件/etc/my.cnf 中加上read_only=1的参数
1.在做数据库的主从时,防止在这个过程中,有数据访问进来,要: 要想连super权限用户的写操作也禁止,就使用"flush tables with read lock;",这样设置 ...