高德地图搜索定位搜索关键词定位

效果图：

关键代码

 AMap.service(["AMap.PlaceSearch","'AMap.AutoComplete'"], function() {var auto = new AMap.Autocomplete({ input: "tipinput"});//构造地点查询类var placeSearch = new AMap.PlaceSearch({ pageSize: 5, // 单页显示结果条数pageIndex: 1, // 页码city: "010", // 兴趣点城市citylimit: false,  //是否强制限制在设置的城市内搜索map: map, // 展现结果的地图实例// panel: "panel", // 结果列表将在此容器中进行展示。autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围});//关键字查询// placeSearch.search('西湖');auto.on("select", select);//注册监听，当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name);  //关键字查询查询}});

<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>蜂窝热力图</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><script src="https://cache.amap.com/lbs/static/es5.min.js"></script><style>html,body,#container {width: 100%;height: 100%;}label {width: 55px;height: 26px;line-height: 26px;margin-bottom: 0;}button.btn {width: 80px;}.amap-info-window{width: 150px;background: #fff;border-radius: 3px;padding: 3px 7px;box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);position: relative;}.amap-info-sharp{position: absolute;top: 21px;bottom: 0;left: 50%;margin-left: -8px;border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid #fff;}#panel {position: absolute;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;}</style><script>// 车主的位置数据var heatmapData_owner = `
113.399037  23.50067    100
113.361742  23.486032   300
`// 非车主的位置数据var heatmapData_not_owner = `
113.399037  20.50067    1
113.461742  20.486032   1
113.450026  21.838679   1
`</script>
</head><body><div id="container" class="container"></div><div id="panel"></div><div class="input-card" style="width:29rem;"><div class="input-item"><label>选择数据</label><button class="btn" id="data-all" style="margin-right:0.5rem;">全部</button><button class="btn" id="data-owner" style="margin-right:0.5rem;">车主</button><button class="btn" id="data-not-owner">非车主</button></div><div class="input-item"><label>站点：</label><button class="btn" id="add-station" style="margin-right:1rem;">添加站点</button><button class="btn" id="del-station" style="margin-right:1rem;">删除站点</button></div><div class="info"><div class="input-item"><div class="input-item-prepend"><span class="input-item-text" style="width:8rem;">请输入关键字</span></div><input id='tipinput' type="text"></div></div><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'您的密匙',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值&plugin=AMap.Autocomplete"></script><!--<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值"></script>--><script src="https://webapi.amap.com/loca?v=1.3.2&key=您的key值"></script><script src="https://a.amap.com/Loca/static/dist/jquery.min.js"></script><script>var map = new AMap.Map('container', {viewMode: '2D',resizeEnable: true,pitch: 0,mapStyle: 'amap://styles/normal',// features: ['bg', 'road'], // 打开这个参数，只显示路名，不显示地名maxPitch: 40,zoom: 5,center: [107.21, 33.1],zooms: [1, 16], // zooms[1]：最小展开resizeEnable: true,});map.on("complete", function(){log.success("地图加载完成！");});console.log(heatmapData_owner)// 关键词输入提示/*var auto = new AMap.Autocomplete({input: "tipinput"});*/AMap.service(["AMap.PlaceSearch","'AMap.AutoComplete'"], function() {var auto = new AMap.Autocomplete({ input: "tipinput"});//构造地点查询类var placeSearch = new AMap.PlaceSearch({ pageSize: 5, // 单页显示结果条数pageIndex: 1, // 页码city: "010", // 兴趣点城市citylimit: false,  //是否强制限制在设置的城市内搜索map: map, // 展现结果的地图实例panel: "panel", // 结果列表将在此容器中进行展示。autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围});//关键字查询// placeSearch.search('西湖');auto.on("select", select);//注册监听，当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name);  //关键字查询查询}});var layer = new Loca.HexagonLayer({map: map,fitView: false      // 每次渲染不要刷新视图});layer.setOptions({mode: 'count',// unit: 'px',unit: 'meter',style: {color: ['#c5d8e7', '#a9c9da', '#89b5ce', '#6ba0c2', '#508cb4', '#3975a6', '#265f95', '#19497e'],radius: 3000,opacity: 0.8,gap: 10,height: [0, 100000],text: {content: function(v){return v.value.count;},direction: 'center',  // 文字方位 //offset: [2, -5],  // 偏移大小fontSize: 9,  // 文字大小fillColor: '#03101F',strokeColor: 'rgba(255,255,255,0)',  // 文字描边颜色strokeWidth: 0,  // 文字描边宽度}}});// -------------------------------添加点标注------------------------------// 创建 AMap.LabelsLayer 图层var layer2 = new AMap.LabelsLayer({zooms: [3, 20],zIndex: 1000,collision: false});// 将图层添加到地图map.add(layer2);var markers = [];// 添加标记点var positions = [["116.441504","40.031386"],["116.466426","39.971294"],["116.443838","39.723097"],["116.470679","40.020576"],["116.522323","40.042006"],["116.395659","39.797351"],["116.118438","39.788421"],["116.306554","40.051124"],["116.410109","39.863089"],["116.237956","39.856638"],["116.414847","39.872101"],["116.378096","39.862151"],["116.374007","39.907619"],["116.264677","39.906542"],["116.374771","40.10086"],["116.689728","40.019175"],["116.374144","39.883654"],["116.365874","39.987327"],["116.58219","39.751092"],["116.684996","40.327258"],["116.477973","39.987746"],["116.451918","39.982646"],["116.40565","39.962105"],["116.348723","39.986815"],["116.447178","39.859231"],["116.3151","39.886732"],["116.181355","39.817032"],["116.353724","39.588081"],["116.256804","40.086322"],["116.322173","39.70021"],["116.554809","40.025499"],["116.598014","39.838229"],["116.573416","39.810885"],["116.69804","40.039724"],["116.384261","39.987597"],["116.435344","39.746919"],["116.812613","39.802763"],["116.093184","39.719226"],["116.727769","39.639731"],["116.345042","39.822802"],["116.634148","40.312279"],["116.624649","40.044904"],["116.351605","40.003057"],["116.542465","40.070977"],["116.265349","40.235543"],["116.335217","39.770789"],["116.264057","40.138553"],["116.369607","39.981576"],["116.527168","39.767207"],["116.257045","40.1723"],["116.57598","40.035914"],["116.470221","39.97098"],["116.205075","39.761149"],["116.449337","40.207716"],["116.478758","39.591689"],["116.220759","39.765049"],["116.529464","39.94152"],["116.48931","39.880713"],["116.269726","39.86512"],["116.230261","39.897086"],["116.46339","39.975531"],["116.92884","39.800036"]];var icon = {type: 'image',image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // https://img-blog.csdnimg.cn/5bf208cecf924f258ce4caa0cce3b7fe.pngsize: [12, 18],anchor: 'bottom-center',};/*// 遍历标记点经纬度列表，一个个生成labelMarker对象后添加到markers列表，并绑定事件for (var i = 0; i < positions.length; i++) {var curPosition = positions[i];var curData = {position: curPosition,icon};var labelMarker = new AMap.LabelMarker(curData);markers.push(labelMarker);// 给marker绑定事件labelMarker.on('mouseover', function(e){var position = e.data.data && e.data.data.position;if(true){normalMarker.setContent('<div class="amap-info-window">'+ position +'<div class="amap-info-sharp"></div>' +'</div>');normalMarker.setPosition(position);map.add(normalMarker);}});labelMarker.on('mouseout', function(){map.remove(normalMarker);});}// 普通点var normalMarker = new AMap.Marker({anchor: 'bottom-center',offset: [0, -15],title: null,});*/for (var i = 0; i < positions.length; i++) {var labelMarker = new AMap.LabelMarker({position: positions[i],opacity: 1,zIndex: 2,icon: {image: 'https://a.amap.com/jsapi_demos/static/images/poi-marker.png',anchor: 'bottom-center',size: [25, 34],clipOrigin: [459, 92],clipSize: [50, 68]},text: {content: '香猪坊',direction: 'right',style: {fontSize: 15,fillColor: '#fff',strokeColor: 'rgba(255,0,0,0.5)',strokeWidth: 2,padding: [3, 10],backgroundColor: 'yellow',borderColor: '#ccc',borderWidth: 3,}}});markers.push(labelMarker);}//------------------------------------按钮事件绑定------------------------------
document.querySelector("#data-all").onclick = function() {layer.setData(`lng    lat count`+heatmapData_owner+heatmapData_not_owner, { // 要加上列名 lng   lat countlnglat: function (obj) {var val = obj.value;return [val['lng'], val['lat']]},value: 'count',type: 'tsv'});// 更改按钮颜色，按下这个，背景色为，蓝，且其他按钮恢复原来的样式document.getElementById("data-all").style.backgroundColor="#25a5f7";document.getElementById("data-all").style.color="white";document.getElementById("data-owner").style.background='white';document.getElementById("data-owner").style.color="#25a5f7";document.getElementById("data-not-owner").style.background='white';document.getElementById("data-not-owner").style.color="#25a5f7";layer.render();  // 渲染
}
document.querySelector("#data-owner").onclick = function() {layer.setData(`lng  lat count`+heatmapData_owner, { // 要加上列名 lng  lat countlnglat: function (obj) {var val = obj.value;return [val['lng'], val['lat']]},value: 'count',type: 'tsv'});document.getElementById("data-owner").style.backgroundColor="#25a5f7";document.getElementById("data-owner").style.color="white";document.getElementById("data-all").style.background='white';document.getElementById("data-all").style.color="#25a5f7";document.getElementById("data-not-owner").style.background='white';document.getElementById("data-not-owner").style.color="#25a5f7";layer.render();  // 渲染
}
document.querySelector("#data-not-owner").onclick = function() {layer.setData(`lng  lat count`+heatmapData_not_owner, { // 要加上列名 lng  lat countlnglat: function (obj) {var val = obj.value;return [val['lng'], val['lat']]},value: 'count',type: 'tsv'});document.getElementById("data-not-owner").style.backgroundColor="#25a5f7";document.getElementById("data-not-owner").style.color="white";document.getElementById("data-all").style.background='white';document.getElementById("data-all").style.color="#25a5f7";document.getElementById("data-owner").style.background='white';document.getElementById("data-owner").style.color="#25a5f7";layer.render();  // 渲染
}
document.querySelector("#add-station").onclick = function() {// 添加站点标记layer2.add(markers);document.getElementById("add-station").style.backgroundColor="#25a5f7";document.getElementById("add-station").style.color="white";document.getElementById("del-station").style.background='white';document.getElementById("del-station").style.color="#25a5f7";
}
document.querySelector("#del-station").onclick = function() {// 删除站点标记layer2.remove(markers);document.getElementById("del-station").style.backgroundColor="#25a5f7";document.getElementById("del-station").style.color="white";document.getElementById("add-station").style.background='white';document.getElementById("add-station").style.color="#25a5f7";
}</script>
</body></html>

高德地图搜索定位搜索关键词定位相关推荐

python获取高德地图POI——关键字搜索
本文主要内容是利用python获取高德地图上的感兴趣点(POIs). 高德开放平台:https://lbs.amap.com/ 下载POI分类编码和城市编码表搜索POI相关文档:https://lb ...
基于高德地图JsAPI进行浏览器精确定位，实现手机端考勤打卡功能
前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...
高德地图七：根据地址定位
高德地图七:根据地址定位实例效果图: 代码实现: layout/activity_main.xml <?xml version="1.0" encoding="u ...
利用高德地图javascriptAPI实现模仿滴滴打车定位
利用高德地图javascriptAPI实现模仿滴滴打车定位使用API AMap.Map:地图对象类,封装了地图的属性设置.图层变更.事件交互等接口的类. AMap.Geocoder:地理编码与逆地理 ...
解决高德地图锁屏黑屏定位不更新，高德地图绘制定位轨迹，高德定位判断定位停留点，高德地图将所有坐标绘制在可视区域内
本文章主要介绍高德定位锁屏黑屏定位不更新的问题. 实现流程是:程序开始阶段正常执行定位,注册监听锁屏监听,唤醒cpu监听,当锁屏广播每2秒发起一起单次定位唤醒.源码如下: package net. ...
高德地图很详细的用法定位搜索添加小蓝点marker 移动地图实时定位
最近项目中需要用到地图的功能,看了下需求后,不多想,直接锁定高德地图,为什么不选择百度地图呢,这里本人觉得高德地图的文档让我看起来更爽,哈哈哈,进入主题吧前题的申请key这里我就不讲啦,很简单,直接 ...
高德地图引用，搜索定位
以下为最近项目中开发的高得地图定位功能,附上效果图与源代码.mapUtil.jsvar map,addMarker;var geocoder;var placeSearch;var infoWindo ...
Android - 集成高德地图API（搜索，地图，定位）
前言: 今天重构公司app的地图功能,刚好做个教程出来方便大家. 第一步: 注册高德开发用户,并来到控制台,点击应用管理->我的应用,然后创建新应用地址:高德开放平台 | 高德地图API 点击 ...
Cesium调用高德地图服务实现搜索地点定位详解
一.需求分析需要做一个类似于高德地图的搜索可以参考高德地图,用户输入地点,下拉列表自动弹出少量的相应地点,点击内容地点可以直接选择定位并且添加Cesium的广告牌(图标)和标注,点击标注可以弹出详细 ...
手把手叫你如何集成高德地图，实现地图显示、定位蓝点、大头针显示、获取周围地点信息等
因项目需求,之前用的百度地图被pass,全部换位高德地图,经过不断的走坑,实现了地图的显示.定位蓝点.大头针显示.周围地理信息等一.首先请各位要做高德的地图之前用心的去阅读下高德地图开放平台的技术文 ...

高德地图搜索定位搜索关键词定位

高德地图搜索定位搜索关键词定位相关推荐

最新文章

热门文章

高德地图 搜索定位 搜索关键词 定位

高德地图 搜索定位 搜索关键词 定位相关推荐

最新文章

热门文章

高德地图搜索定位搜索关键词定位

高德地图搜索定位搜索关键词定位相关推荐