【百度地图API】暑假放假回老家——城市切换功能
任务描述:
酸奶小妹放寒假啦,要从北京呼啦一下飞回重庆呢。现在百度地图API上不能直接切换城市,怎么办呢?
如何实现:
利用API先搜索到要去城市,然后再让搜索到的城市显示在地图中心点。
(百度地图上的实现方式是,给后端一个请求,后端返回该城市的经纬度)
图示:

运行代码:请点击这里
代码:
<!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=gb2312"/><meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具"/><meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图"/><title>从北京到重庆</title><script type="text/javascript" src="http://api.map.baidu.com/api?&v=1.2"></script></head><body> <p>我要去<input id="txtSearch" type="text" value="重庆"/><input type="button" value="GO" onclick="search()"/></p><div style="width:520px;height:340px;border:1px solid gray;" id="container"></div></body><script type="text/javascript">function $(id){  return document.getElementById(id);   //定义$}var map =new BMap.Map("container");    //创建地图map.centerAndZoom(new BMap.Point(116.330599, 39.95536), 10);      //初始化地图var city =new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});   //地图显示到查询结果处function search(){  var s = $("txtSearch").value;  city.search(s);   //查找城市}</script></html>
2012-02-07 更新一下API1.2的代码:
原理:localsearch关键词,比如“西单”。
在回调函数里,获取第一个POI的经纬度,并且该点为中心点。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>西单</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
function myFun(){
var pp = local.getResults().getPoi(0).point;
map.centerAndZoom(pp, 18);
}
var local = new BMap.LocalSearch(map, {
onSearchComplete: myFun
});
local.search("西单");
</script>
【百度地图API】暑假放假回老家——城市切换功能的更多相关文章
- 百度地图API的IP定位城市和浏览器定位(转)
		百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ... 
- 百度地图API示例之根据城市名设置地图中心点
		代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ... 
- geolocation/ 百度地图api Geolocation 定位当前城市信息
		根据当前所处位置 定位所在城市信息 <html> <head> <meta charset="UTF-8" /> <title>js ... 
- 百度地图API试用--(初次尝试)
		2016-03-17: 百度地图API申请key的步骤相对简单,不做过多阐述. 初次使用百度地图API感觉有点神奇,有些功能加进来以后有点问题,注释掉等有空再解决. 代码如下: <%@ page ... 
- 【百度地图API】如何制作班级地理通讯录?LBS通讯录
		原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ... 
- 百度地图API的自动定位和搜索功能(移动端)
		近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ... 
- 使用百度地图API实现轨迹回放
		调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创 ... 
- 【百度地图API】关于如何进行城市切换的三种方式
		原文:[百度地图API]关于如何进行城市切换的三种方式 摘要:本文介绍了三种切换城市的方式:查询城市.城市列表和显示城市轮廓. ------------------------------------ ... 
- 微信小程序城市定位(借助百度地图API判断城市)
		概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ... 
随机推荐
- 【C语言探索之旅】 第三部分第二课:SDL开发游戏之创建窗口和画布
			内容简介 1.第三部分第二课: SDL开发游戏之创建窗口和画布 2.第三部分第三课预告: SDL开发游戏之显示图像 第三部分第二课:SDL开发游戏之创建窗口和画布 在上一课中,我们对SDL这个开源库做 ... 
- 开发一个Swing功能时的一点总结
			对JTextField进行效验,有两个途径:(1)是使用javax.swing.InputVerifier在获取焦点时进行校验(2)在点击“确定”按钮的监听事件中对控件的值进行校验 鉴于涉及的业务比较 ... 
- DataTable填补了实体类返回泛型集合
			坤哥见我昨天找了一段代码,如下面: 略微解释下,这段代码时D层查询结束后,将datatable查询到的结果赋值给实体对象的属性,然后返回实体的过程.坤哥看了之后问我,假设实体有500多个属性,难道也要 ... 
- sql 中获取最后生成的标识值 IDENT_CURRENT ,@@IDENTITY ,SCOPE_IDENTITY 的用法和区别
			原文:sql 中获取最后生成的标识值 IDENT_CURRENT ,@@IDENTITY ,SCOPE_IDENTITY 的用法和区别 IDENT_CURRENT 返回为任何会话和任何作用域中的指定表 ... 
- ORACLE 实验一
			实验一:数据定义 实验学时:4学时 实验类型:综合型 实验要求:必修 一.实验目的 1.熟悉Oracle的client配置: 2.掌握SQL Plus的使用: 3.掌握SQL模式定义语句,定义相关的表 ... 
- C++该函数隐藏
			只有基类成员函数的定义已声明virtualkeyword,当在派生类中的时间,以支付功能实现,virtualkeyword可以从时间被添加以增加.它不影响多状态. easy混淆视听,掩盖: ,规则例如 ... 
- Java线(一个):线程安全的和不安全
			当我们看JDK API什么时候,总是找一些类描述说:,线程安全或线程安全,例如StringBuilder在,么一句,"将StringBuilder 的实例用于多个线程是不安全的.假设须要这种 ... 
- 【转】Android内存机制分析2——分析APP内存使用情况
			上面一篇文章说了Android应用运行在dalvik里面分配的堆和栈内存区别,以及程序中什么代码会在哪里运行.今天主要是讲解一下Android里面如何分析我们程序内存使用情况.以便后续可以分析我们程序 ... 
- Java读书笔记三(字符串)
			1.介绍 本篇博客将对JAVA中的字符串类的基本知识进行介绍.主要字符串类的一些经常用法等内容. 2.字符串对象的创建 1.有两种形式.可是在开发中常常习惯于String 变量名的形式来进行操作. & ... 
- RestServer 1.1发布
			具体配置方法参照第一版:http://www.cnblogs.com/devgis/p/4947191.html BUG反馈 QQ:80163278 邮箱:devgis@qq.com 淘宝:http: ... 
