【百度地图API】关于如何进行城市切换的三种方式
摘要：本文介绍了三种切换城市的方式：查询城市、城市列表和显示城市轮廓。
---------------------------------------------------------------------
很多API爱好者问到我，如何像百度地图那样，实现各个城市之间的切换呢？
在这里，公布以下三种方式。
第一种，是查询城市的方法。使用API接口的LocalSearch方法。我之前写过完整的文章，请查看：
http://www.cnblogs.com/milkmap/archive/2010/12/22/1914106.html
另外，如果不想显示红色的标注，和信息窗口。可以尝试以下代码：
API1.2，利用localsearch找到第一个结果的经纬度，然后重新设置地图中心点。
<!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>
============================================================
上面这种方式有个缺陷，就是会显示出查询城市的红色标注，还有一个信息窗口。由于百科没有该城市的数据，这个信息窗口里还没有该城市的描述。
可不可以去掉标注，还有信息窗口呢？我只想切换城市呢。
接下来，就介绍一下第二种方法，点选城市列表，切换城市。
查看源代码，运行示例，请点击http://www.ui-love.com/baidumap/city/selectCity.htm （服务器原因，可能打开速度较慢，请耐心等待）
代码请看官网的libaray中的“城市列表”：http://dev.baidu.com/wiki/map/index.php?title=MapLibrary
===========================================================================
第三种，显示城市轮廓。最后这种方法我比较喜欢，当你切换城市的时候，可以显示出这个城市的轮廓。点击运行：http://www.ui-love.com/baidumap/city/Boundary.html
你只需要简单地使用Bounds这个类就可以了。
bdary.get(“山东省”, function(rs){
console.log(rs);//rs是返回的结果
})；
注意，以下提供的boundary代码是API1.1版本的，仅为参考。
<!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>获取地区轮廓线</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true">
</script>
<style type="text/css">
body{font-size:13px;margin:10px}
#container{width:800px;height:500px;border:1px solid gray}
</style>
</head>
<body>
<div id="container"></div>
<br />
输入省、直辖市或县名称：<input type="text" id="districtName" style="width:80px" value="山东省">
<input type="button" onclick="getBoundary()" value="获取轮廓线">
<script type="text/javascript">
if (typeof console == "undefined"){
window.console = {log: function(){}};
}
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
var stdMapCtrl = new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})
map.addControl(stdMapCtrl);
map.enableScrollWheelZoom();
map.enableContinuousZoom();
function getBoundary(){
var bdary = new BMap.Boundary();
var name = document.getElementById("districtName").value;
bdary.get(name, function(rs){
console.log(rs);
map.clearOverlays();
var bounds;
var maxNum = -1, maxPly;
var count = rs.boundaries.length;
for(var i = 0; i < count; i++){
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"});
map.addOverlay(ply);
var arrPts = ply.getPoints();
if(arrPts.length > maxNum){
maxNum = arrPts.length;
maxPly = ply;
}
}
if(maxPly){
map.setViewport(maxPly.getPoints());
}
});
}
</script>
</body>
</html>
【百度地图API】关于如何进行城市切换的三种方式的更多相关文章
- 百度地图API的IP定位城市和浏览器定位（转）
百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ...
- 百度地图API示例之根据城市名设置地图中心点
代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
- js实现选项卡切换的三种方式
前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE ht ...
- geolocation/ 百度地图api Geolocation 定位当前城市信息
根据当前所处位置 定位所在城市信息 <html> <head> <meta charset="UTF-8" /> <title>js ...
- 【百度地图API】暑假放假回老家——城市切换功能
原文:[百度地图API]暑假放假回老家--城市切换功能 任务描述: 酸奶小妹放寒假啦,要从北京呼啦一下飞回重庆呢.现在百度地图API上不能直接切换城市,怎么办呢? 如何实现: 利用API先搜索到要去城 ...
- 微信小程序城市定位(借助百度地图API判断城市)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
- 微信小程序城市定位(百度地图API)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
- 用户Ip地址和百度地图api接口获取用户地理位置（经纬度坐标，城市）
<?php //获取用户ip(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获取127.0.0.1) function getip(){ if(!empty($_SERVE ...
- 百度地图API开发指南
简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...
随机推荐
- 【Cocos2d-x】Mac 在 Cocos2d-x 3.X 打包Android
今天cocos2d-x 3.0正式版最终公布了,下午特地下载了来尝尝鲜,废话不多说了. 3.0正式版的环境搭建和之前的RC版事实上是一样的,太多的教程也写了怎样搭建.今天来写写我自己是怎样来搭建的. ...
- C# 经典排序算法大全
C# 经典排序算法大全 选择排序 using System; using System.Collections.Generic; using System.Linq; using System.Tex ...
- github jekyll site不再使用Maruku由于Markdown翻译员,但kramdown
今天写了一篇博客,之push至jekyll site on github在,发现总是错的,例如,下面的电子邮件消息: The page build completed successfully, bu ...
- 【十三】注入框架RoboGuice采用:(Logging via Ln)
上一篇我们简单的介绍了一下RoboGuice的使用([十二]注入框架RoboGuice使用:(Your First Injected ContentProvider)),今天我们来看下Log日志使用. ...
- .net与Java的WebService互调
本文记录一下.net与Java是如何进行Web Service的互相调用的. 1.准备工作 MyEclipse 10 JDK 1.6.0_13 Visual Studio 2012 .net fram ...
- MVC常用特性
MVC常用特性使用 简介 在以前的文章中,我和大家讨论如何用SingalR和数据库通知来完成一个消息监控应用. 在上一篇文章中,我介绍了如何在MVC中对MongoDB进行CRUD操作. 今天,我将 ...
- 【甘道夫】HBase连接池 -- HTablePool是Deprecated之后
说明: 近期两天在调研HBase的连接池,有了一些收获,特此记录下来. 本文先将官方文档(http://hbase.apache.org/book.html)9.3.1.1节翻译,方便大家阅读,然后查 ...
- 《Swift程序设计语言》中国翻译和学习笔记page23
·<The Swift Programming Language>中文翻译及读书笔记,附件中为英文原版教程 因21页之前内容和技术关系不大,不做翻译整理,从第21页開始 · 页 1 本页主 ...
- IOS总结_IOS经常使用的方法集合、调用系统电话、设备区分、APP内永不锁屏
调用系统打电话的功能 打电话功能仅仅有iPhone支持,对于其它设备相应button应该禁用. //直接调用系统电话呼叫功能,挂断电话后不能回到应用程序 ［UIApplication sharedAp ...
- cocos2dx 子弹飞作为一个例子来解释解酒效果类CCMotionStreak
感谢点评与关注,欢迎转载与分享. 勤奋努力,持之以恒! 在游戏开发中,有时会须要在某个游戏对象上的运动轨迹上实现渐隐效果.比方子弹的运动轨迹,假设不借助引擎的帮助.这样的效果则须要通过大量的图片来实现 ...