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

原文:【百度地图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这个类就可以了。

var bdary =new BMap.Boundary();
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>
时间: 2024-08-10 23:05:01

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

百度地图API的IP定位城市和浏览器定位(转)

百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支持HTML5浏览器提供的Geolocation API 来进行定位的.目前Internet Explorer 9.Firefox.Chrome.Safari 以及 Opera 支持地理定位(因为他们支持HTML5). 2 本质上,LocalCity这个类是利用用户IP地址去百度数据库里查询得到IP所

实现选项卡切换的三种方式

首先我用Jquery库实现了一个简单的效果, 只需要点击上面的导航标签即可切换下方内容,Html代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>tab切换</title> <style type="text/css"> *{padding:0;margin:0;f

js实现选项卡切换的三种方式

前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>tab切换</title> <style type="text/css

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

根据当前所处位置 定位所在城市信息 <html> <head> <meta charset="UTF-8" /> <title>js 百度 geolocation 定位当前城市</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="vi

百度地图api获取经纬度和城市名称

想集成百度API定位需要完成以下步骤: 1:注册开发者 2:申请key 3:下载jar包 4:代码集成 先看下效果: 1:注册开发者 最好提前申请,审核需要1,2天 2:申请key 本人用的是Android Studio,所以用命令行查看SHA1码 3:下载jar包 只需下载"定位功能"的开发包即可 4:代码集成(详细可见官方讲解,以下代码以简洁实用为主) package com.union.roid.testroid; import android.app.Activity; imp

【百度地图API】暑假放假回老家——城市切换功能

原文:[百度地图API]暑假放假回老家--城市切换功能 任务描述: 酸奶小妹放寒假啦,要从北京呼啦一下飞回重庆呢.现在百度地图API上不能直接切换城市,怎么办呢? 如何实现: 利用API先搜索到要去城市,然后再让搜索到的城市显示在地图中心点. (百度地图上的实现方式是,给后端一个请求,后端返回该城市的经纬度) 图示: 运行代码:请点击这里 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

用户Ip地址和百度地图api接口获取用户地理位置(经纬度坐标,城市)

<?php //获取用户ip(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获取127.0.0.1) function getip(){ if(!empty($_SERVER["HTTP_CLIENT_IP"])){ $cip = $_SERVER["HTTP_CLIENT_IP"]; } else if(!empty($_SERVER["HTTP_X_FORWARDED_FOR"])){ $cip = $_SERVER[&quo

ionic 使用百度地图API, 定位用户当前所在的城市示例

在ionic程序中,如果需要定位用户所在的城市,可以用如下方法. 在ionic程序中,引入百度地图API.打开文件: \src\index.html. 在 head tag中,添加如下代码 , 注意将"您的密钥" 替换成 您申请的密钥 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 我

使用百度地图API制作线路轨迹播放

1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图 获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次连接相邻的2个点(注意polyline的个数比point的少1) 1.2绘制动态轨迹图(固定间隔时间) 每隔500毫秒读取一个轨迹点,实现a,b两个功能 a增加一条polyline b将marker从先前的point移到当前点 主方法使用setTimeout方法迭代来实现动态循环 Polyline在