<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>调用百度地图接口单击获取地图的经纬度和定位特效-xw素材网</title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=12610de17164d36ae93d38596b0e2399"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:850px;margin:20px auto;}
#l-map{height:400px;width:600px;float:left;border:1px solid #bcbcbc;}
#r-result{height:400px;width:230px;float:right;}
</style>
</head>
<body>

<div class="demo">
<p style="height:40px;">
输入城市：<input id="txtCity" type="text"/> <button onClick="getPoint()">获取坐标</button>
坐标：<input id="txtPoint" type="text"/>
</p>
<div id="l-map"></div>
<div id="r-result">

</div>
</div>

<script type="text/javascript">
// 百度地图API功能

var map = new BMap.Map("l-map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom();
var local = new BMap.LocalSearch("全国", {
renderOptions: {
map: map,
panel : "r-result",
autoViewport: true,
selectFirstResult: false
}
});

map.addEventListener("click",function(e){
document.getElementById("txtPoint").value=e.point.lng + "," + e.point.lat;
});
// 定义一个控件类，即function
function ZoomControl(){
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_LINE_TYPE_BUS;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
function getPoint(){
var city = document.getElementById("txtCity").value;
local.search(city);

}

</script>

</body>
</html>

百度API的更多相关文章

  1. 百度API ； 很多有用的接口及公用 数据

    百度API : http://apistore.baidu.com/ . 比如手机号码:

  2. 去百度API的百度地图准确叠加和坐标转换的解决方案研究

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百 ...

  3. 利用百度API Store接口进行火车票查询

    火车票查询 项目源码下载链接: Github:https://github.com/VincentWYJ/TrainTicketQuery 博客文件:http://files.cnblogs.com/ ...

  4. 百度api短信开发

    公司原来有一个短信发送的功能,是调用第三方的,但是很不稳定,时不时就收不到短信,但是钱已经扣了.对于这样的事,谁都忍受不了的.于是想找一个稳定短信发送平台,第一想到的是阿里云,百度.在这两个平台上公司 ...

  5. html5获取经纬度，百度api获取街区名，并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  6. 百度API使用--javascript api进行多点定位

    使用百度地图提供的javascript api,给定多点的经纬度坐标,在百度地图上 显示这些坐标点. 其中包括各个点自适应地图显示,自定义坐标点的图标,以及各个点之间添加折线. 实现的效果如下图: 具 ...

  7. PHP学习笔记：利用百度api实现手机归属地查询

    从来没有用过api,都不知道怎么获得api的数据,跟着demo,然后修改,终于实现了手机号码查询的功能,代码和说明很全,大家试试. <?php /** * Created by jianqing ...

  8. 【百度地图API】百度API卫星图使用方法和卫星图对比工具

    原文:[百度地图API]百度API卫星图使用方法和卫星图对比工具 百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度 ...

  9. 【转】百度API获取城市名地名(附源码)

    在做一个软件时,用到了定位功能.网上有很多关于google 的GPS定位,但网上关于google定位都没有用, 搜索下原因:(这里建议大家在中国就尽量不使用系统自带的定位) 因为Google的服务器不 ...

  10. HTML5根据浏览器获取经度和纬度（百度API）

    网页获取用户位置信息的办法1 调用百度地图的地图标注功能,通过百度地图API获取对应的经度和纬度进而获取地区信息 优点是比较准确,缺点是需要用户自己选择位置2 通过H5 geolocation属性获取 ...

随机推荐

  1. VS2015搭建GoogleTest框架--配置第一个项目

    最近公司要我学习Google的测试框架google test:https://github.com/google/googletest. GoogleTest是C++的测试框架,我一个学习Java的, ...

  2. IOS开发基础知识--碎片39

    1:UIWindow知识点 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDict ...

  3. 在CentOS7上安装JDK1.8

    在CentOS7上安装JDK1.8 1 通过 SecureCRT 连接到阿里云 CentOS7 服务器: 2 进入到目录 /usr/local/ 中: cd /usr/local/ 3 创建目录 to ...

  4. php new self()和new static()

    class A { public static function get_self() { return new self(); } public static function get_static ...

  5. CYQ.Data 数据层框架 CYQ.Data 数据框架 使用篇四 MAction 增删改

    本篇内容概要 本篇继续上一篇内容,本节介绍所有增删改的相关操作. 1:添加数据 Insert方法 2:删除数据 Delete方法 3:更新数据 Update方法 一:添加操作 方法原型: public ...

  6. 【hive】——Hive四种数据导入方式

    Hive的几种常见的数据导入方式这里介绍四种:(1).从本地文件系统中导入数据到Hive表:(2).从HDFS上导入数据到Hive表:(3).从别的表中查询出相应的数据并导入到Hive表中:(4).在 ...

  7. dragsort html拖拽排序

    一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...

  8. eclipse配置tomcat出现错误：Could not load the Tomcat server configuration at \Servers\Tomcat v7.0 Server at localhost-config.

    这是eclipse与之前的server配置冲突导致的,最简单的办法就是给Eclipse换个工作目录(Workspace). 步骤: 打开eclipse后,出现下面图片所示的页面,选择其他目录,重新配置 ...

  9. 云计算的三种服务模式:SaaS/PaaS/IaaS

    转载http://blog.chinaunix.net/uid-22414998-id-3141499.html 定义 云计算主要分为三种服务模式,而且这个三层的分法重要是从用户体验的角度出发的: S ...

  10. linux 之静默安装oracle

    Web服务器上面的Linux一般是不会有图形界面的,所有通过图形界面来安装Linux的方式在没有图形界面的Linux上面是行不通的,我们要使用的安装方式叫做Linux的静默安装.即在没有图形界面的Li ...