高德地图JS API获取经纬度，根据经纬度获取城市
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>输入提示后查询，点击获取坐标</title>
<style type="text/css"> #mapContainer{
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
} #tip{
background-color:#fff;
border:1px solid #ccc;
padding-left:10px;
padding-right:2px;
position:absolute;
min-height:65px;
top:10px;
font-size:12px;
right:10px;
border-radius:3px;
overflow:hidden;
line-height:20px;
min-width:30%;
}
#tip input[type="button"]{
background-color: #0D9BF2;
height:25px;
text-align:center;
line-height:25px;
color:#fff;
font-size:12px;
border-radius:3px;
outline: none;
border:0;
cursor:pointer;
} #tip input[type="text"]{
height:25px;
border:1px solid #ccc;
padding-left:5px;
border-radius:3px;
outline:none;
}
#pos{
height: 110px;
background-color: #fff;
padding-left: 10px;
padding-right: 10px;
position:absolute;
font-size: 12px;
right: 10px;
bottom: 30px;
border-radius: 3px;
line-height: 30px;
border:1px solid #ccc;
}
#pos input{
border:1px solid #ddd;
height:23px;
border-radius:3px;
outline:none;
width: 100px;
} #result1{
max-height:300px;
}
b{
display: block;margin: 5px 0;
}
</style>
</head>
<body>
<div style="width: 500px;height: 500px;position: relative;">
<div id="mapContainer"></div>
<div id="tip">
<b>请输入关键字：</b>
<input type="text" id="keyword" name="keyword" value="" onkeydown='keydown(event)' style="width: 95%;"/>
<div id="result1" name="result1"></div>
</div>
<div id="pos">
<b>鼠标左键在地图上单击获取坐标</b>
<div>X：<input type="text" id="lngX" name="lngX" value=""/> Y：<input type="text" id="latY" name="latY" value=""/></div>
<div>城市：<input type="text" id="city" name="city" value=""/></div>
</div>
</div> <!--请把js引入部分的key值换成你申请下来的，要不然不能用哦~~-->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=84a1f826e2e135184370cddc9e7848acluo"></script>
<script type="text/javascript">
var windowsArr = [];
var marker = [];
var mapObj = new AMap.Map("mapContainer", {
resizeEnable: true,
view: new AMap.View2D({
resizeEnable: true,
zoom:13//地图显示的缩放级别
}),
keyboardEnable:false
});
var clickEventListener=AMap.event.addListener(mapObj,'click',function(e){
console.log(e);
document.getElementById("lngX").value=e.lnglat.getLng();
document.getElementById("latY").value=e.lnglat.getLat();
AMap.service('AMap.Geocoder',function(){//回调函数
//实例化Geocoder
geocoder = new AMap.Geocoder({
city: ""//城市，默认：“全国”
});
var lnglatXY=[e.lnglat.getLng(), e.lnglat.getLat()];//地图上所标点的坐标
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
//获得了有效的地址信息:
//即，result.regeocode.formattedAddress
//console.log(result);
var city = result.regeocode.addressComponent.city;
}else{
var city = '获取失败';
//获取地址失败
}
document.getElementById("city").value=city;
console.log(city);
});
}) }); document.getElementById("keyword").onkeyup = keydown;
//输入提示
function autoSearch() {
var keywords = document.getElementById("keyword").value;
var auto;
//加载输入提示插件
AMap.service(["AMap.Autocomplete"], function() {
var autoOptions = {
city: "" //城市，默认全国
};
auto = new AMap.Autocomplete(autoOptions);
//查询成功时返回查询结果
if ( keywords.length > 0) {
auto.search(keywords, function(status, result){ autocomplete_CallBack(result);
});
}
else {
document.getElementById("result1").style.display = "none";
}
});
} //输出输入提示结果的回调函数
function autocomplete_CallBack(data) {
var resultStr = "";
var tipArr = data.tips;
if (tipArr&&tipArr.length>0) {
for (var i = 0; i < tipArr.length; i++) {
resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1)
+ ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1)
+ ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>";
}
}
else {
resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字";
}
document.getElementById("result1").curSelect = -1;
document.getElementById("result1").tipArr = tipArr;
document.getElementById("result1").innerHTML = resultStr;
document.getElementById("result1").style.display = "block";
} //输入提示框鼠标滑过时的样式
function openMarkerTipById(pointid, thiss) { //根据id打开搜索结果点tip
thiss.style.background = '#CAE1FF';
} //输入提示框鼠标移出时的样式
function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
thiss.style.background = "";
} //从输入提示框中选择关键字并查询
function selectResult(index) { if(index<0){
return;
}
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.getElementById("keyword").onpropertychange = null;
document.getElementById("keyword").onfocus = focus_callback;
}
//截取输入提示的关键字部分
var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g,"");
var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');
document.getElementById("keyword").value = text;
document.getElementById("result1").style.display = "none";
//根据选择的输入提示关键字查询
mapObj.plugin(["AMap.PlaceSearch"], function() {
var msearch = new AMap.PlaceSearch(); //构造地点查询类
AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数
msearch.setCity(cityCode);
//console.log(cityCode);
msearch.search(text); //关键字查询查询
});
} //定位选择输入提示关键字
function focus_callback() {
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.getElementById("keyword").onpropertychange = autoSearch;
}
} //输出关键字查询结果的回调函数
function placeSearch_CallBack(data) {
//清空地图上的InfoWindow和Marker
windowsArr = [];
marker = [];
mapObj.clearMap();
var resultStr1 = "";
var poiArr = data.poiList.pois;
var resultCount = poiArr.length;
for (var i = 0; i < resultCount; i++) {
resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
addmarker(i, poiArr[i]);
}
mapObj.setFitView();
} //鼠标滑过查询结果改变背景样式，根据id打开信息窗体
function openMarkerTipById1(pointid, thiss) {
thiss.style.background = '#CAE1FF';
windowsArr[pointid].open(mapObj, marker[pointid]);
} //添加查询结果的marker&infowindow
function addmarker(i, d) {
var lngX = d.location.getLng();
var latY = d.location.getLat();
var markerOption = {
map:mapObj,
icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",
position:new AMap.LngLat(lngX, latY)
};
var mar = new AMap.Marker(markerOption);
marker.push(new AMap.LngLat(lngX, latY)); var infoWindow = new AMap.InfoWindow({
content:"<h3><font color=\"#00a6ac\"> " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
size:new AMap.Size(300, 0),
autoMove:true,
offset:new AMap.Pixel(0,-30)
});
windowsArr.push(infoWindow);
var autoData = function (e) {
var nowPosition = mar.getPosition(),
lng_str = nowPosition.lng,
lat_str = nowPosition.lat;
infoWindow.open(mapObj, nowPosition);
document.getElementById("lngX").value = lng_str;
document.getElementById("latY").value = lat_str;
AMap.service('AMap.Geocoder',function(){//回调函数
//实例化Geocoder
geocoder = new AMap.Geocoder({
city: ""//城市，默认：“全国”
});
var lnglatXY=[lng_str, lat_str];//地图上所标点的坐标
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
//获得了有效的地址信息:
//即，result.regeocode.formattedAddress
//console.log(result);
var city = result.regeocode.addressComponent.city;
}else{
var city = '获取失败';
//获取地址失败
}
document.getElementById("city").value=city;
console.log(city);
});
})
};
AMap.event.addListener(mar, "mouseover", autoData);
} //infowindow显示内容
function TipContents(type, address, tel) { //窗体内容
if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
type = "暂无";
}
if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
address = "暂无";
}
if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
tel = "暂无";
}
var str = " 地址：" + address + "<br /> 电话：" + tel + " <br /> 类型：" + type;
return str;
}
function keydown(event){
var key = (event||window.event).keyCode;
var result = document.getElementById("result1")
var cur = result.curSelect;
if(key===40){//down
if(cur + 1 < result.childNodes.length){
if(result.childNodes[cur]){
result.childNodes[cur].style.background='';
}
result.curSelect=cur+1;
result.childNodes[cur+1].style.background='#CAE1FF';
document.getElementById("keyword").value = result.tipArr[cur+1].name;
}
}else if(key===38){//up
if(cur-1>=0){
if(result.childNodes[cur]){
result.childNodes[cur].style.background='';
}
result.curSelect=cur-1;
result.childNodes[cur-1].style.background='#CAE1FF';
document.getElementById("keyword").value = result.tipArr[cur-1].name;
}
}else if(key === 13){
var res = document.getElementById("result1");
if(res && res['curSelect'] !== -1){
selectResult(document.getElementById("result1").curSelect);
}
}else{
autoSearch();
}
}
</script>
</body>
</html>
高德地图JS API获取经纬度，根据经纬度获取城市的更多相关文章
- 高德地图 js api 使用
使用高德地图js api 制作网页上的地图应用. 1.先申请一个 开发者用的 key . 2. 在页面中引入高德提供的地图js <script src="http://webapi. ...
- 高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
- 高德地图 JS API - 根据经纬度获取周边建筑地标
像我们经常用的微信或微博,发表动态时都有选择位置的功能,根据当前的定位获取附近的地标.利用高德地图我们就可以实现这样的功能. 1. 具体代码: // 高德地图查询周边 function aMapSea ...
- 高德地图JS API 开发小结
项目中有一块功能要用到高德地图,所以,想把编码小结一下. 首先是地图的初始化 var map = new AMap.Map("mapDiv", { ...
- 高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)
-*- 父页面js function mapFocus(){ //console.log("-*-"); var longitude = mini.get("jd&qu ...
- 高德地图JavaScript API开发研究
高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API ...
- 腾讯地图JS API实现带方向箭头的线路Polyline
最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图 ...
- 在谷歌地图上绘制行政区域轮廓【结合高德地图的API】
实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...
- 高德地图Javascript API设置域名白名单
在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的K ...
随机推荐
- P2419 [USACO08JAN]牛大赛Cow Contest（dfs走天下/）
题目描述 FJ的N(1 <= N <= 100)头奶牛们最近参加了场程序设计竞赛:).在赛场上,奶牛们按1..N依次编号.每头奶牛的编程能力不尽相同,并且没有哪两头奶牛的水平不相上下,也就 ...
- js变量传递
基本类型.引用类型 基本类型: undefined.Null.Boolean.Number.String五种 (简单的数据段);引用类型: object (由多个值构成). 两种类型在使用上的区别: ...
- 软件工程---作业(one)
(1) 回顾你过去将近3年的学习经历 1.1 有序列表项一当初你报考的时候,是真正喜欢计算机这个专业吗? 自己填写来着,对这个专业也不是特别了解:导致后续学习很差 1.2 有序列表项二你现在后悔选择了 ...
- 洛谷 P2678 & [NOIP2015提高组] 跳石头
题目链接 https://www.luogu.org/problemnew/show/P2678 题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布 ...
- 两个fragment之间简单的跳转
1.在第一个fragment中开启事务,设置标记 Toast.makeText(getActivity(), "切换到下一个fragment中", Toast.LENGTH_SHO ...
- Angular动画——路由动画及高阶动画函数
一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 定义一个进场动画,一个离场动画. 因为进场动画和离场动 ...
- C# 通过 Quartz .NET 实现 schedule job 的处理
在实际项目的开发过程中,会有这样的功能需求:要求创建一些Job定时触发运行,比如进行一些数据的同步. 那么在 .Net Framework 中如何实现这个Timer Job的功能呢? 这里所讲的是借助 ...
- python 10大算法之二 LogisticRegression 笔记
使用的包 import matplotlib.pyplot as plt import pandas as pd import numpy as npfrom sklearn import datas ...
- 大数据学习之Linux基础01
大数据学习之Linux基础 01:Linux简介 linux是一种自由和开放源代码的类UNIX操作系统.该操作系统的内核由林纳斯·托瓦兹 在1991年10月5日首次发布.,在加上用户空间的应用程序之后 ...
- Macbook pro从购买服务器到搭建服务器环境（1）
查看进程命令:ps -ef |grep *** ps -ef | grep nginx ps -ef | grep mysql ps -ef | grep mongops -ef | grep uws ...