原文:【百度地图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>

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

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

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

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

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

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

    前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE ht ...

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

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

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

    原文:[百度地图API]暑假放假回老家--城市切换功能 任务描述: 酸奶小妹放寒假啦,要从北京呼啦一下飞回重庆呢.现在百度地图API上不能直接切换城市,怎么办呢? 如何实现: 利用API先搜索到要去城 ...

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

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

  7. 微信小程序城市定位(百度地图API)

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

  8. 用户Ip地址和百度地图api接口获取用户地理位置（经纬度坐标，城市）

    <?php   //获取用户ip(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获取127.0.0.1) function getip(){     if(!empty($_SERVE ...

  9. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

随机推荐

  1. Linux的proc文件系统

    proc,用户空间和内核空间能够通过该接口通信, 与普通文件不同的是.这些虚拟文件的内容都是动态创建的. proc文件系统是一个伪文件系统,它仅仅存在内存其中,而不占用外存空间. 它以文件系统的方式为 ...

  2. iOS_17_控制开关_TabBarController_由storyboard道路

    最后效果图: main.storyboard BeyondViewController.m中有一句关键代码,设置tabbarItem图片的样式(30*30) // // BeyondViewContr ...

  3. 分布式服务框架 dubbo/dubbox 入门示例(转)

    dubbo是一个分布式的服务架构,可直接用于生产环境作为SOA服务框架. 官网首页:http://dubbo.io/ ,官方用户指南 http://dubbo.io/User+Guide-zh.htm ...

  4. 存储数据键和项目对的类（Dictionary对象）

    存储数据键和项目对的类(Dictionary对象) <% Class Dictionary Public Copyright, Developer, Name, Version, Web Pri ...

  5. 第十七章——配置SQLServer（2）——32位和64位系统中的内存配置

    原文:第十七章--配置SQLServer(2)--32位和64位系统中的内存配置 前言: 本文讲述32位和64位系统中的内存配置,在SQLServer 2005/2008中,DBA们往往尝试开启AWE ...

  6. shell编程三大神器之grep

  7. POJ 2155 Matrix (D区段树)

    http://poj.org/problem?id=2155 Matrix Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 1 ...

  8. CSS不常见问题汇总

    写css有一段时间了,其间也遇到一些问题,跟大家分享一下 IE10+滚动条自动以藏问题,导致滚动部分页面看起来不正常 html, body {-ms-overflow-style: scrollbar ...

  9. rm-rf 恢复过程中滥用

    多DBA一定rm -rf讨厌它,也许有一天自己将数据库,以消除一个中午,然后.那么就没有一个--这种情况下,--这个不幸真的发生,你真的无药可救?不必要,有解决方法.也许你遇到不幸时,有一天.你可以用 ...

  10. 《Effective C++》：规定44-规定45

    规定44分离的不依赖参数代码templates 条款45运用成员函数模板接受全部兼容类型 Templates和泛型编程 条款44:将与參数无关的代码抽离templates Templates能够节省时 ...