<!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. 安装InfoPath 2013后 SharePoint 2010 出现 “找不到 Microsoft.Office.InfoPath, Version=14.0.0....” 的错误的解决方案

    1. 症状 您的SharePoint 2010的服务器是不是最近一直出现这个错误呢? Could not load file or assembly 'Microsoft.Office.InfoPat ...

  2. Mockito Hello World

    Mockito Hello World 项目配置 IDE是Intellij IDEA,用gradle配置项目. 新建一个Java项目,gradle中需要有这个:   repositories { jc ...

  3. HTML5快速入门（三）—— 标签综合运用

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  4. 高性能Linux服务器构建实战笔记

    一.            web应用篇 1           HTTP服务器Nginx 1.1          性能上.功能上.安装上与Apache对比 l  性能上占用系统资源少,支持并发高 ...

  5. Java暗箱操作之自动装箱与拆箱

    我以前在写Android项目的时候,估计写得最多最熟练的几句话就是: List<Integer> list = new ArrayList<Integer>(); list.a ...

  6. Java 堆

    特性: 虚拟机启动时创建的线程共享的内存区域,所有实例对象和数组对象分配内存的区域 GC垃圾手机管理器管理的主要区域,GC堆 容量可以固定,也可以动态扩展,自动收缩 -Xmx最大堆大小 -Xms最小. ...

  7. 编程中Foo, Bar 到底什么意思？

    1 前言 在很多国外计算机书本和一些第三份开源软件的Demo中经常用到两个英文单词Foo,Bar.这到底是什么意思呢?从步入屌丝界的IT生活见到这两个单词到现在我还是不知道这两个单词的真正含义,今天有 ...

  8. 【小白的CFD之旅】17 需要编程?

    小白经过大半个多月对于CFD的学习,终于对其大概轮廓有了初步的了解,尤其是在与小牛师兄交流之后.小牛师兄毕竟是专业学流体力学的,小白认为在流体力学理论方面自己与牛师兄至少存在5年的差距.不过小白并不气 ...

  9. 帆软报表FineReport中数据连接之Websphere配置JNDI连接

    以oracle9i数据源制作的模板jndi.cpt为例来说明如何在FineReport中的Websphere配置JNDI连接.由于常用服务器的JNDI驱动过大,帆软报表FineReport中没有自带, ...

  10. Netruon 理解（12）：使用 Linux bridge 将 Linux network namespace 连接外网

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...