百度地图API搜索关键词定位,点击获取经纬度_Ariel_ckr的博客-程序员信息网

技术标签: allmap  地图  BMap  百度地图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;
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Ariel_201311/article/details/91891224

智能推荐

Linux安装(CentOS-7-x86_64-Minimal-1810.iso)_zhangMY12138的博客-程序员信息网_centos-7-x86_64-minimal-1810.iso

用到的软件:VMware-12.5.7vmware12的密钥: 5A02H-AU243-TZJ49-GTC7K-3C61N用到的镜像:CenterOS-6.9-86_64-bin-DVD.iso用到的镜像:CentOS-7-x86_64-Minimal-1810.iso1、打开VMware进行安装,点击下一步。如图:image.png2、勾选“我接受许可协议中的条款”,...

轻量级Java_《轻量级Java EE企业应用实战》PDF 下载_真实故事计划的博客-程序员信息网

第1章 Java EE应用和开发环境1.1 Java EE应用概述1.1.1 Java EE应用的分层模型1.1.2 Java EE应用的组件1.1.3 Java EE应用的结构和优势1.1.4 常用的Java EE服务器1.2 轻量级Java EE应用相关技术1.2.1 JSP、Servlet 3.0和JavaBean及替代技术1.2.2 Struts 2.2及替代技术1.2.3 Hiberna...

GDI简单介绍_千里修行的博客-程序员信息网

对于GDI的理解 GDI:在物理设备上显示图形,可以理解为一个程序(对比有界面的)画图工具软件 2.GDI座标3.GDI画图4.测试原码GDITest.cpp#include &lt;windows.h&gt;LRESULT CALLBACK pfnWndProc(HWND, UINT, WPARAM, LPARAM);in...

Linux与Windows文件系统互访_再战一场的博客-程序员信息网_windows访问linux文件系统

Linux与Windows文件系统的互访概述共享Linux文件系统给Windows共享Windows文件系统给Linux概述你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。共享Linux文件系统给Windows共享Windows文件系统给Linux...

yii2框架-理解yii2的架构(一)_bingcool空间的博客-程序员信息网_yii2架构

最近在学习yii2的框架,因为国内关于yii2框架的具体中文资料还是比较少,下面整理一些比较好的中文资料。(1)yii2的底层和架构方面  a)http://www.yiichina.com/doc/guide/2.0yii2的目前的官方中文社区文档,翻译还算是比较明白,最好从这里入手  b)http://www.yiichina.com/tutorial/773      yii2的关于底层方面...

数据分析-day03-pandas-dataFrame获取dataframe某行某列的数据_健康平安的活着的博客-程序员信息网_dataframe某行某列的值

#将第一行的2列设置为nand.iloc[1,1]=np.nan;d.iloc[3,3]=np.nan;#第二种方式#dataframe获取某行某列的数据print(df.loc[1,["Actors"]])

随便推点

内存泄露调试之 _CrtSetBreakAlloc_zimingjushi的博客-程序员信息网

在用VS或者VC进行编程的过程中,经常会在编译器的输出窗口看到类似下面的内容:Detected memory leaks!Dumping objects ->{52} normal block at 0x006D2498, 512 bytes long. Data: 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 {51} normal b

eclipse+tomcat+springmvc 手把手教你搭建最简单工程_yanzy1107的博客-程序员信息网

一、准备工作,使用工具:Eclipse IDE for Enterprise Java Developers. Version: 2019-06 (4.12.0) Build id: 20190614-1200下载地址:https://www.eclipse.org/downloads/download.php?file=/oomph/epp/2019-06/R/eclipse...

华为社会招聘面试流程_喜哥的博客-程序员信息网_华为招聘流程

整体流程:         简历的筛选――电话面试――华为项目面试――谈offer――确认入职时间(签订3年长期劳动合同)――项目报到 面试流程:提前一天通知候选人面试的时间及地址面试当天上午再电话跟侯选人确认面试的时间及地址安排人员在前台接待笔试面谈面试结束后第二天上午可以知道结果跟通过的侯选人沟通 华为技术面试注意事项:  面试官:从项目中达到系统分析师级别的技术人

北理工c语言编程网上作业答案,北理工C语言编程网上作业标准答案.pdf_weixin_39869432的博客-程序员信息网

网页 资讯 视频 图片 知道 文库 贴吧 采购 地图 | 文库首页 登录 VIP新客立减2元 上传文档 意见反馈北理工网上作业答案 搜索文档 ¥16 购买文档 登...

推荐文章

热门文章

相关标签