百度地图根据关键字搜索显示区域
时间:2019-10-17
本文章向大家介绍百度地图根据关键字搜索显示区域,主要包括百度地图根据关键字搜索显示区域使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>根据地址查询经纬度</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> </head> <body style="background:#f9f9f9; margin:0 auto"> <div style="width:730px;margin:30px auto;"> 要查询的地址:<input id="address" type="text" value="北京天安门" style="margin-right:50px;"/> 查询结果(经纬度):<input id="coordinate" type="text" /> <input type="button" value="查询" onclick="searchByStationName();"/> <div id="container" style="position:absolute; margin-top:30px; width:730px; height:590px; top:50; border:1px solid gray; overflow:hidden;"></div> </div> </body> <script type="text/javascript"> var map = new BMap.Map("container"); map.centerAndZoom("北京市", 12); map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件 map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角,打开 var localSearch = new BMap.LocalSearch(map); localSearch.enableAutoViewport(); //允许自动调节窗体大小 function searchByStationName() { var keyword = document.getElementById("address").value; localSearch.setSearchCompleteCallback(function (searchResult) { var poi = searchResult.getPoi(0); // 创建Map实例 var mPoint = new BMap.Point(poi.point.lng, poi.point.lat); map.enableScrollWheelZoom(); map.centerAndZoom(mPoint,15); var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3}); map.addOverlay(circle); var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}}); local.searchNearby('景点',mPoint,1000); }); localSearch.search(keyword); } </script> </html>
原文地址:https://www.cnblogs.com/Abner3721/p/11692369.html
- SparkSql的优化器-Catalyst
- Scala语言基础之结合demo和spark讲实现链式计算
- Spark高级操作之json复杂和嵌套数据结构的操作二
- Spark高级操作之json复杂和嵌套数据结构的操作一
- hadoop系列之基础系列
- Spark的调度系统
- Spark Structured Streaming的高效处理-RunOnceTrigger
- Spark度量系统相关讲解
- Spark Structured Streaming高级特性
- Table API&SQL的基本概念及使用介绍
- 使用Linq to Sql 创建数据库和表
- Flink DataSet编程指南-demo演示及注意事项
- 解决 wcf HTTP 无法注册 另一应用程序正在使用 TCP 端口 80
- 构建Flink工程及demo演示
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 为什么你使用的 Spring Security OAuth 过期了?松哥来和大家捋一捋!
- 一个诡异的登录问题
- 什么是计时攻击?Spring Boot 中该如何防御?
- XSS 攻击详解,为什么建议 Cookie 加上 HttpOnly 属性?
- 个性化调整坐标轴的颜色和位置
- matplotlib实现一页多图
- 用matplotlib实现画中画
- 为matplotlib设置不同的主题
- 模式利器 | MEIC污染源清单向WRF-Chem模式网格插值分配工具——meic2wrf
- Windows给力!可以扔掉Linux虚拟机了!
- 好慌,Redis这么多集群方案,要用哪种?
- 你真的了解MySQL 8.0 数据字典吗?
- 《调教命令行09》磁盘很廉价,放小电影最合适了
- 既保护隐私又快速训练,Facebook开源Opacus库,利用差分隐私训练PyTorch模型
- 为什么Java中1000==1000为false而100==100为true?