原文:【百度地图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】暑假放假回老家——城市切换功能的更多相关文章

  1. 百度地图API的IP定位城市和浏览器定位（转）

    百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ...

  2. 百度地图API示例之根据城市名设置地图中心点

    代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

  3. geolocation/ 百度地图api Geolocation 定位当前城市信息

    根据当前所处位置 定位所在城市信息 <html> <head> <meta charset="UTF-8" /> <title>js ...

  4. 百度地图API试用--(初次尝试)

    2016-03-17: 百度地图API申请key的步骤相对简单,不做过多阐述. 初次使用百度地图API感觉有点神奇,有些功能加进来以后有点问题,注释掉等有空再解决. 代码如下: <%@ page ...

  5. 【百度地图API】如何制作班级地理通讯录？LBS通讯录

    原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...

  6. 百度地图API的自动定位和搜索功能（移动端）

    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...

  7. 使用百度地图API实现轨迹回放

    调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创 ...

  8. 【百度地图API】关于如何进行城市切换的三种方式

    原文:[百度地图API]关于如何进行城市切换的三种方式 摘要:本文介绍了三种切换城市的方式:查询城市.城市列表和显示城市轮廓. ------------------------------------ ...

  9. 微信小程序城市定位(借助百度地图API判断城市)

    概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...

随机推荐

  1. 【Java GUI】Java面板基础：JPanel

    有两个面板,常见的面板(JPanel)和滚动面板(JScrollPane) Jpanel 面板是一种常见的容器,JPanel的作用是实现接口层次结构,面放入一些组件.也能够在上面绘画,将放有组件和有画 ...

  2. 警报C++精密整数除法计算损失

    非常偶然发现了一个精度损失的问题,简单来说: 有表达式: l = i/30 + j/40 + k/25, 求当{i,j,k} = {50,85,27}时l的值,非常easy,用计算器立即能够算出答案为 ...

  3. 最小二乘法 （转）good

    最小二乘法也称为最小平方法,是一种数据优化技术,它通过最小化误差的平方和寻找数据的最佳函数匹配. 最小二乘法最初由高尔顿在创立回归分析的时候提出,现在已经成为探索变量间关系最重要的方法,最小二乘法根据 ...

  4. RH133读书 笔记(5) - Lab 5 User and Group Administration

    Lab 5 User and Group Administration Goal: To build skills for user and group administration. Estimat ...

  5. 第四章——SQLServer2008-2012资源及性能监控（1）

    原文:第四章--SQLServer2008-2012资源及性能监控(1) 性能优化的第一步是发现问题,而发现问题通常又有两类:突发问题的侦测和常规问题的侦测,对于常规问题的侦测,通常需要有一个长效的性 ...

  6. outlook 当关闭时最小化到任务栏完美的解决方案

    近期使用Outlook,但很发现easy退出关闭.不能达到最小化封. 在网上找了很长时间也用outlook on the desktop插件,但该插件安装后的执行错误和被遗弃. 最后,我发现了一个叫k ...

  7. API访问客户端

    API访问客户端(WebApiClient适用于MVC/WebForms/WinForm) 这几天没更新主要是因为没有一款合适的后端框架来支持我们的Web API项目Demo, 所以耽误了几天, 目前 ...

  8. ACM-DP最大连续子——hdu1231

    ***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...

  9. atitit.无线上网卡 无法搜索WiFi 解决无线路由器信号不能被连接

    atitit.无线上网卡 无法搜索WiFi 解决无线路由器信号不能被连接 #---现象 pc机无线网卡无法搜索到无线路由器的信号.. 但是,笔记本电脑和手机能够... 只要pc机无线网卡可以搜索信号, ...

  10. 国外流行的共享网站实现：facebook，twitter，google+1，tumblr等待

    近期需要做相关的国外几个站点共享,本来我以为它会和weibo.在同样的烦恼空间,什么appkey啦,apptoken啦.api啦.结果非常意外的发现并非如此恼火. Twitter分享: https:/ ...