JS实现腾讯地图搜索信息下拉以及定位...
2024-04-24 16:04:35
- 看api搞了几个小时，废话不多说，上图上代码
搜索下拉信息以及定位：
图片：
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>腾讯地图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
//样式略
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=???"></script>
<script>var searchService,markers = [];var geocoder = null;var init = function() {var center = new qq.maps.LatLng(39.936273,116.44004334);var map = new qq.maps.Map(document.getElementById('editMap'),{center: center,zoom: 13});//调用地址解析类，根据地址定位geocoder = new qq.maps.Geocoder({complete : function(result){console.log(result);map.setCenter(result.detail.location);map.zoomBy(12);//设置指定等级var marker = new qq.maps.Marker({map:map,position: result.detail.location});var infoWindow = new qq.maps.InfoWindow({map: map,position: result.detail.location,offset: { x: -8, y: -32 }, //设置信息窗相对position偏移像素content: "<div style='width:200px;height:70px;'><p>" + result.detail.nearPois[0].name+"</p><p>地址："+result.detail.nearPois[0].address +"</p></div>",visible: true});}});//设置Poi检索服务，用于本地检索、周边检索searchService = new qq.maps.SearchService({//检索成功的回调函数complete: function(results) {//设置回调函数参数var pois = results.detail.pois;var infoWin = new qq.maps.InfoWindow({map: map});var latlngBounds = new qq.maps.LatLngBounds();var table = ""$("#information").css('display','block'); for (var i = 0, l = pois.length; i < l; i++) {var poi = pois[i];//扩展边界范围，用来包含搜索到的Poi点latlngBounds.extend(poi.latLng);(function(n) {var marker = new qq.maps.Marker({map: map});marker.setPosition(pois[n].latLng);marker.setTitle(i + 1);markers.push(marker);table += "<dd lay-value='"+i+"' onclick='info(\""+pois[n].latLng+"\",\""+pois[n].name+"\")'>"+pois[n].name+"</dd>";qq.maps.event.addListener(marker, 'click', function() {$("#information").css('display','none');infoWin.open();infoWin.setContent('<div style="width:200px;height:70px;"><p>' + pois[n].name +'</p><p>地址：'+ pois[n].address +'</p></div>');infoWin.setPosition(pois[n].latLng);});})(i);}$("#information").html(table)//调整地图视野map.fitBounds(latlngBounds);},});}//清除地图上的markerfunction clearOverlays(overlays) {var overlay;while (overlay = overlays.pop()) {overlay.setMap(null);}}//设置搜索的范围和关键字等属性function searchKeyword() {var keyword = document.getElementById("keyword").value;if(keyword == ""){//为空无数据$("#information").css('display','none');$("#information").html("");}clearOverlays(markers);var region = "杭州";//根据输入的城市设置搜索范围searchService.setLocation(region);//根据输入的关键字在搜索范围内检索searchService.search(keyword);//根据输入的关键字在圆形范围内检索searchService.searchNearBy(keyword, region , 2000);}//点击搜索结果显示信息窗口function info(latLng,name){clearOverlays(markers);$("#information").css('display','none');$("#keyword").val(name);//下拉地址显示在输入框var latlngStr = latLng.split(",",2);var lat = parseFloat(latlngStr[0]);var lng = parseFloat(latlngStr[1]);var latLn = new qq.maps.LatLng(lat, lng);//方法获取位置信息值geocoder.getAddress(latLn);}//点击其他位置隐藏下拉框$(".body").bind("click", function(){$("#information").css('display','none');});
</script></head>
<body onload="init()"><div class="edit-map" ><div class="search-item"><p><input type="textbox" class="fl search-word" oninput="searchKeyword()" id="keyword" value="" placeholder="楼盘名"/><input type="button" value="搜索" class="submit fr" onclick="searchKeyword()"></p></p><dl class="select-child" id="information"><dd lay-value="0" class="avtive">酒店</dd><dd lay-value="1">酒店</dd> </dl></div><div id="editMap" style="width:498px;height:280px;" onclick="enlarge()"></div></div> </body>
</html>
- 也可以使用 $(document).ready(function() { });
定位：
图片：
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>腾讯地图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
html,body{width:100%;height:100%;
}
*{margin:0px;padding:0px;
}
body, button, input, select, textarea {font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{width:603px;padding-top:3px;overflow:hidden;
}
.btn{width:142px;
}
#container{min-width:600px;min-height:767px;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=???"></script>
<script>//经纬度var longitude = ${renting.longitude?if_exists};var latitude = ${renting.latitude?if_exists};var init = function() {var center = new qq.maps.LatLng(longitude,latitude);var map = new qq.maps.Map(document.getElementById('map'),{center: center,zoom: 13, //设置缩放级别draggable: true, //设置是否可以拖拽scrollwheel: true, //设置是否可以滚动disableDoubleClickZoom: false //设置是否可以双击放大 false=是});var marker = new qq.maps.Marker({position: center,//标记的经纬度animation: qq.maps.MarkerAnimation.BOUNCE,//标记的动画map: map//标记的地图})//设置信息窗var infoWindow = new qq.maps.InfoWindow({map: map,offset: { x: -8, y: -32 }, //设置信息窗相对position偏移像素visible: true});//逆地址解析geocoder = new qq.maps.Geocoder({complete : function(result){infoWindow.open();infoWindow.setContent('<div><p>'+result.detail.nearPois[0].name+'</p><p>地址：'+result.detail.address+'</p></div>');infoWindow.setPosition(center);map.zoomTo(16);}});geocoder.getAddress(center);//传经纬度//给标记添加点击事件qq.maps.event.addListener(marker, 'click', function() {geocoder.getAddress(center);}); }</script>
</head>
<body onload="init()"><!-- 定义地图显示容器 --><div id="map"></div></body>
</html>
JS实现腾讯地图搜索信息下拉以及定位...相关推荐
- 搜索引擎下拉食云速捷详细_搜索框下拉优化雀云速捷好口碑
百度下拉框推广效果到底怎么样?输入关键词,不用搜索,自动展现在最显眼的位置,您觉得是不是最直观的推广方式?很多网民的搜索习惯都是打出几个字就选择下拉位置推荐的词,是不是您也有这样的习惯? 咨询微信:y ...
- python搜索关键词自动提交订单_Python批量获取淘宝相关搜索和下拉框关键词
首先淘宝seo是什么?淘宝seo是对淘宝站内关键字排名进行优化,淘宝三大排名因数:文本相关性,商业因素,用户喜好度.非专业总结(勿喷) 1,文本相关性:起码标题出现吧 2,商业因素:广告展位,直通车等 ...
- CSS+JS实现兼容性很好的无限级下拉菜单
CSS+JS实现兼容性很好的无限级下拉菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://ww ...
- 如何通过百度搜索的下拉词和相关搜索找长尾关键词？
平时我们在写文章的时候会围绕某个关键词来写文章,特别是通过百度等搜索引擎的下拉词和相关搜索功能来找该关键词的长尾关键词,然后围绕长尾关键词来写文章,所以今天我们就以百度搜索为例说一下如何通过百度搜索的 ...
- excel单元格下拉选项怎么设置_使用Excel制作搜索式下拉菜单，让你不再烦恼下拉选项多内容...
中岁颇好道,晚家南山陲.兴来每独往,胜事空自知.行到水穷处,坐看云起时.偶然值林叟,谈笑无还期. --[唐] 王维<终南别业> 下拉菜单,相信大家一定不陌生. 当我们需要快速输入数据内容, ...
- html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果（上）
最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果. 1.html 以及 css 部分 首先你得要有个输入框,这里我用了 控件,其次当用户 ...
- 阻止google chrome 保存搜索框下拉记录
本人有一点小小的强迫症,一直想要一个干净整洁的浏览器,谷歌是一个比较好的选择,这干净整洁的界面实在是让人难以拒绝,在强迫症的加持下,我就想让谷歌浏览器不要保存我的搜索框下拉记录,在搜索了大量的结果以后 ...
- iframe定位、下拉框定位、获取cookie
iframe 就是一个页面里嵌套了另外一个页面 iframe标签也叫浮动框架标签,iframe标签也是一个比较特殊的框架,可以放在浏览器中的小窗口,可以出现在页面的任何一个位置上,但是整个页面并一定在 ...
- uniapp 小程序使用腾讯地图搜索位置地点，获取省、市、县地区码的方法
一.调用uni.authorize()方法获取用户授权 二.调用官方uni.chooseLocation()方法获取当前地址的名称和经纬度 uni.chooseLocation({success: ( ...
最新文章
- 超级简单：在你的ASP.NET页面自定义列表和分页
- redis（一）--认识redis
- 使用Pitcher简化卫语句
- Spark 机器学习 —— KMeans
- 挂载Linux镜像文件，使用镜像文件安装依赖
- MIKE水动力笔记1_岸线及水深数据之依靠全球数据库资源提取的方法
- C4D 通过python导入外部.txt文件数据驱动物体
- MeanShift跟踪MATLAB实现
- pygame游戏素材预处理
- 学习记录, 带你玩转Pyppeteer (全干货)
- windows AD域的特点
- 5个常用的上传图片进行搜索的网站
- 测试篇(二)： 如何合理的创建bug、bug的级别、bug的生命周期、跟开发产生争执怎么办
- Linux命令行与shell脚本编程之笔记(3)
- 数据库扩容也可以如此丝滑，MySQL千亿级数据生产环境扩容实战
- 一次准备不充分的中信银行面试总结
- 本分初心，vivo以科技之力守护“唯一的地球”
- android 指纹添加_如何将手势添加到Android手机的指纹扫描仪
- DxLib做弹幕射击游戏(一)
- 为抗议SOPA法案 美国多款游戏下周将停运！
热门文章
- 3.后端学习JavaScript
- 【HW4】项目章程与项目管理计划
- 停车系统源码-基于springboot+uniapp前后端完全开源的多终端智慧停车场系统源码
- 前端案例 ——注册页面（html+css实现）
- 关于华为的高薪和华为的加班
- Office365 - 如何查询email是否发送成功
- 2022年湖南省高职单招（职业倾向性）（言语理解与表达）考试冲刺试题及答案
- 公用移动数据通信网（ＣＨＩＮＡＭＤＮ）（转）
- 赛扬处理器_【硬件资讯】Intel 10代酷睿 桌面处理器正式发布
- 推荐系统-排序层：主流CTR模型综述【Click-Through-Rate，点击率预估，指精排层的排序】【CTR 模型的输入（即训练数据）是：大量成对的 (features, label)数据】