[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>
相关文章
|
3月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
452 4
|
2月前
|
JavaScript 前端开发
Javascript:获取、设置复选框的勾选状态
Javascript:获取、设置复选框的勾选状态
55 1
|
4月前
|
设计模式 存储 JavaScript
JS:单例模式 —— 百度考题 (二)
JS:单例模式 —— 百度考题 (二)
|
4月前
|
设计模式 JavaScript 前端开发
JS:单例模式 —— 百度考题 (一)
JS:单例模式 —— 百度考题 (一)
|
4月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
78 0
|
4月前
|
JavaScript 前端开发
使用js对文本框设置字数限制
使用js对文本框设置字数限制
75 0
|
4月前
|
JavaScript 前端开发 Ubuntu
如何在 VPS 上安装 Express(Node.js 框架)并设置 Socket.io
如何在 VPS 上安装 Express(Node.js 框架)并设置 Socket.io
66 0
|
4月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)
|
5月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
61 1