<!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. Android中的AlertDialog使用示例二（普通选项对话框）

    在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框,AlertDialog实现方法为建造者模式. ...

  2. Android Hack1 使用weight属性实现视图的居中显示

    本文地址:http://www.cnblogs.com/wuyudong/p/5898403.html,转载请注明源地址. 如果要实现如下图所示的将按钮居中显示,并且占据父视图的一半,无论屏幕是否旋转 ...

  3. iOS程序破解——ARM汇编基础

    原文在此:http://www.cnblogs.com/mddblog/p/4951650.html 一.Thumb指令与ARM指令 Thumb指令为16位,因此存储代码的密度高,节省存储空间.但是功 ...

  4. .NET开源插件内核

    http://www.cnblogs.com/newmin/ .NET开源插件内核:支持WinForm和Asp.net. 设计的初衷是:利用“开发平台 + 插件内核"来开发子系统,及对系统进 ...

  5. mac系统及xcode使用的SVN客户端安装升级

    当前的SVN版本已经升级到1.8.x了,但mac系统自带的以及xcode使用的SVN客户端版本没有跟着升级,还是1.6.x的版本.为了解决隐藏目录.svn只在根目录下存在的情况,至少要升级到1.7.x ...

  6. 通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  7. Redhat Linux安装JDK 1.7

    本篇主要介绍在Redhat Linux(Red Hat Enterprise Linux Server release 5.7 (Tikanga))系统上安装JDK 1.7,其它Linux平台安装也大 ...

  8. （转载）SQL去除回车符，换行符，空格和水平制表符

    http://www.cnblogs.com/insus/p/4815336.html MS SQL去除回车符,换行符,空格和水平制表符,参考下面语句,一般情况是SQL接受富文本或是textarea的 ...

  9. MongoDB学习笔记~MongoVUE对数据进行查询，排序和按需显示

    回到目录 对于MongoDB这个非关系型数据库(NoSql)来说,找一个IDE工具不是很容易,还好被我找到了,它就是大名鼎鼎的MongoVUE,它可以对mongodb数据表进行增删改查,下面我主要说一 ...

  10. 使用Docker快速部署Storm环境

    Storm的部署虽然不是特别麻烦,但是在生产环境中,为了提高部署效率,方便管理维护,使用Docker来统一管理部署是一个不错的选择.下面是我开源的一个新的项目,一个配置好了storm与mono环境的D ...