[JS]百度地图设置城市

简介: [JS]百度地图设置城市

经过一些学习百度地图的API,感觉这个功能用处很不错。可以定位到城市或者区。

主要思路就是利用LocalSearch类,通过输入城市中文找到相应的城市,然后出发onSearchComplete事件,把返回的数据第一条的坐标点设置为中心点。百度地图的切换城市就可以这么实现,当然人家可能另有更快捷的私密应用未公开。

代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>设置城市demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://api.map.baidu.com/api?key=79d13dd2c1076b1ad827484228ee4dea&v=1.1&services=true" ></script>
</head>
<body>
<input type="text" id="cityName" />
<input type="button" οnclick="setCity()" value="设置" />
<div id="container" style="width:500px;height:400px"></div>
<script>
var map = new BMap.Map("container");
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var search = new BMap.LocalSearch("中国", {
  onSearchComplete: function(result){
    if (search.getStatus() == BMAP_STATUS_SUCCESS){
      var res = result.getPoi(0);
      var point = res.point;
      map.centerAndZoom(point, 11);
    }
  },renderOptions: {  //结果呈现设置,
    map: map,  
    autoViewport: true,  
    selectFirstResult: true 
  } ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数,有了这个,可以简单的改一下返回的html内容了。
     alert(html.innerHTML)
  }//这一段可以不要,只不过是为学习更深层次应用而加入的。
});
function setCity(){
  search.search(document.getElementByIdx_x("cityName").value);
}
</script>
</body>
</html>
相关文章
|
5天前
|
JavaScript
JS设置日期为0时0分0秒
项目中经常要给设置默认值,搜索从哪天开始,这时候,如果直接通过new Date()来获取时间,会有时分秒,如果快速设置为0时0分0秒?
37 0
|
5天前
|
Ubuntu 网络安全 数据安全/隐私保护
百度搜索:蓝易云【Ubuntu实现免密登录设置教程】
完成以上步骤后,你将可以在客户端无需输入密码即可登录到服务器。请确保公钥已经正确复制到服务器,并妥善保管私钥,以确保安全性。
25 0
|
5天前
|
Ubuntu 网络协议
百度搜索:蓝易云【ubuntu系统如何设置静态IP地址?】
现在,你已经成功在Ubuntu系统中设置了静态IP地址。系统将使用指定的静态IP地址进行网络连接。
35 0
|
5天前
|
Ubuntu Shell
百度搜索:蓝易云【Ubuntu系统如何设置开机自启动shell脚本?】
现在,你的Shell脚本将会在Ubuntu系统开机时自动执行。请确保脚本中的逻辑是正确的,以免对系统造成不必要的影响。
38 0
|
5天前
|
关系型数据库 MySQL 数据库
百度搜索:蓝易云【【Docker】Docker部署Mysql并设置数据持久化教程】
通过以上步骤,您已经成功地在Docker中部署了MySQL,并设置了数据持久化,确保数据在容器重新启动或迁移时得以保留。
56 0
|
5天前
|
JSON JavaScript 前端开发
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
|
5天前
|
Ubuntu Linux
百度搜索:蓝易云【Linux设置默认编辑器(qbit)】
现在,你已经成功将默认编辑器设置为qbit。在终端中输入 `editor`命令或打开文本文件时,系统将使用qbit作为默认编辑器来打开文件。请注意,`update-alternatives`命令还可以用于设置其他默认应用程序。
82 3
|
5天前
|
JavaScript 前端开发 网络协议
利用Node.js和cpolar实现远程访问,无需公网IP和路由器设置的完美解决方案
利用Node.js和cpolar实现远程访问,无需公网IP和路由器设置的完美解决方案
22 0
|
5天前
|
JavaScript 前端开发
JavaScript如何设置定时器,怎么清除定时器
JavaScript如何设置定时器,怎么清除定时器
20 3
|
5天前
|
JavaScript 定位技术
Vue中使用百度地图demo Vue Baidu Map(vue-baidu-map)设置窗口信息
Vue中使用百度地图demo Vue Baidu Map(vue-baidu-map)设置窗口信息
40 0