百度地图API搜索关键词定位，点击获取经纬度

一、实现效果如下

二、获取百度地图秘钥AK

（1）申请秘钥地址

    http://lbsyun.baidu.com/apiconsole/key

（2）创建应用

（3）选择应用类型
我这个demo是在浏览器运行的，所以我选择浏览器端的应用类型，IP白名单根据要求填写，填写完成后就可以获取秘钥了。

三、demo实现

（1）填写申请的秘钥

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的秘钥"></script>

（2）html

<!--搜索框 S-->
<div class="inputCnt"><input type="input" name="inputSearch" id="inputSearch" value="" /><button id="search" onClick="getValue()">搜索</button>
</div>
<!--搜索框 E--><!--点击地图后显示经纬度 S-->
<div class="clickData"><p>经度:<span id="lng"></span></p><p>纬度:<span id="lat"></span></p>
</div>
<!--点击地图后显示经纬度 E--><!--地图显示 S-->
<div id="allmap"></div>
<!--地图显示 E-->

（3）javascript

// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var local = new BMap.LocalSearch(map, {renderOptions: {map: map}
});
local.search("上海");   //初始化定位//获取搜索框的关键字，地图上显示定位
function getValue() {var input = document.getElementById('inputSearch').value;local.search(input);
}//获取用户点击地图该点的经纬度，并显示出来
function showInfo(e) {var lng=document.getElementById('lng');var lat=document.getElementById('lat');lng.innerHTML=e.point.lng;  //经度lat.innerHTML=e.point.lat;  //纬度
}
map.addEventListener("click", showInfo);

（4）css

body,
html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";
}#allmap {width: 60%;height: 600px;background-color: red;margin: 30px auto;
}p {margin-left: 5px;font-size: 14px;
}.inputCnt {margin: 67px 381px 0;display: inline-block;
}.clickData{margin: 0 376px 0;
}.clickData span{margin-left: 8px;
}

百度地图API搜索关键词定位，点击获取经纬度相关推荐

百度地图api搜索地址定位
下载地址百度地图api地址搜索定位示例,选择公司名称地图上显示对应地址 dd:
android百度地图单点定位_Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡...
一.问题描述上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡如图所示: 二. ...
高德地图——浏览器定位+点击获取经纬度+去除高德百度地图左下角logo
高德地图--浏览器定位+点击获取经纬度+去除高德百度地图左下角logo 1.代码 <!doctype html> <html> <head><meta cha ...
php调用百度地图定位,php用百度地图API进行IP定位和GPS定位
/** * 根据地理坐标获取国家.省份.城市,及周边数据类(利用百度Geocoding API实现) * 百度密钥获取方法:http://lbsyun.baidu.com/apiconsole/key ...
【百度地图API】如何判断点击的是地图还是覆盖物？
原文:[百度地图API]如何判断点击的是地图还是覆盖物? 摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看. ...
HTML5+百度地图API实现地理定位
背景如果知道用户在哪里,往往会提高很多Web应用的体验,比如为用户指明方向,对它们要去的地方给出建议,让用户知道它们所在的区域内有哪些人可能会对某个活动感兴趣等等.现在,利用HTML5(以及基于Ja ...
百度地图api，第一次定位成功，后面505错误
百度地图api,第一次定位成功,后面505错误 1.查看key对不对 2.查看AndroidManifest中放的位置对不对,是放在 <application里面与 <activity a ...
使用百度地图api模拟实时定位页面完整示例
使用百度地图api模拟实时定位页面完整示例效果:使用百度地图api在页面上显示车辆的实时位置,并有自动刷新和手动刷新两种方式可以选择.每次刷新后,都会在地图上显示车辆的最新位置. 示例运行效果截图 ...
百度地图API的IP定位城市和浏览器定位（转）
转自博文:百度地图API的IP定位城市和浏览器定位 http://blog.csdn.net/suixufeng/article/details/13511761 百度地图API提供了Geolocat ...

百度地图API搜索关键词定位，点击获取经纬度

一、实现效果如下

二、获取百度地图秘钥AK

三、demo实现

百度地图API搜索关键词定位，点击获取经纬度相关推荐

最新文章

热门文章