高德地图搜索提示框

已于 2023-05-22 10:20:24 修改
阅读量216 收藏
点赞数
文章标签： javascript 前端 css
于 2023-05-22 10:17:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43998184/article/details/130801758
版权

在这里插入图片描述

<!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.png
            size: [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	count
			lnglat: 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	count
			lnglat: 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	count
			lnglat: 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>
weixin_43998184
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
高德地图API拾取坐标并赋值，可通过搜索框进行搜索获取
09-07
高德地图API，拾取坐标，可通过点击地图获取，也可以通过搜索框进行搜索获取，带点标记
高德地图搜索提示
08-28 218
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>高德地图</title> <script type="text/javascript" src="https://we...
高德地图定位、周边搜索、位置弹框、添加覆盖物等功能
09-07
高德地图定位、周边搜索、位置弹框、添加覆盖物等功能，可以自定义定位，添加覆盖物，覆盖物点击事件等，自定义定位按钮
Vue 高德地图 输入提示和POI搜索插件结合使用 拾取对应地点坐标
weixin_55510188的博客
08-26 4592
7、效果：在搜索框输入地点名称，产生输入提示，点击某个提示选项后，进行POI搜索，地图会自行标记出搜索地点。点击地图任意位置，或者POI搜索结果的marker，都会拿到相对应的坐标。4、JSAPI 的加载：这里使用官方文档推荐的方式，使用 JSAPI Loader ，并按 NPM 方式使用 Loader。1、准备好高德地图的key和安全密钥jscode，key的平台类型是Web 端 ( JSAPI )。如上述代码，在配置文件中设置安全密钥，这样只要外部引用key就会执行 设置安全密钥 的代码。...
高德地图搜索功能源码文件
12-27
高德地图搜索功能源码文件，可以输入搜索，以及定位功能
高德地图 js 搜索获取坐标转换地图添加标记
09-30
最后，关于"必看说明.txt"文件，这通常包含一些使用API时的重要提示或注意事项，例如提醒开发者替换示例代码中的API密钥，确保使用自己的有效密钥，否则将无法正常使用高德地图的服务。 综上所述，掌握高德地图API...
高德地图JS API搜索服务Demo
11-24
java script 搜索服务 输入提示并自动搜索 标记 信息框
Android开发 高德地图SDK检索关键字demo
11-28
在Android开发中，集成高德地图SDK是常用的操作，它能提供丰富的地图功能，包括定位、路线规划、地图展示以及搜索服务等。本项目重点在于如何利用高德地图SDK进行关键字搜索并显示搜索结果，同时在地图上添加自定义...
jQuery高德地图api开发实例代码
06-10
- 搜索路径：用户在输入框中输入路径后，调用高德地图API的路径规划服务，获取路径坐标点。 - 测量路径：左键点击地图上的两点，计算它们之间的距离，并在地图上显示或更新测量结果。 - 右键拖拽放大：监听地图的...
高德地图周边搜索与搜索提示(三)
01-03
"高德地图周边搜索与搜索提示(三)"这个主题聚焦于如何利用高德地图API实现特定功能，即根据用户输入的地址信息，展示周边的各类地点，并提供搜索提示。在实际应用中，这种功能能够帮助用户快速找到附近的餐馆、酒店...
高德地图自动定位并实现搜索
qq_44137046的博客
02-17 1257
1、首先我们需要登录高德开发平台：https://lbs.amap.com/ 2、控制台->应用管理->创建新应用 3、 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-s
高德地图使用坑点记录。
SilenceJude的博客
03-21 831
1、AMap.AutoComplete的大小写问题，在v2版本中，从Autocomplete改成了AutoComplete，变成了大驼峰，真的坑死，千万别看错文档，不然就变成大家来找茬。2、AMap.AutoComplete中的city属性限制，只能限制城市！不管是citycode还是adcode还是文字，如果你设置省份，如河北省，山东省，370000，根本无效！但是AMap.PlaceSearch对于省份设置是有效的，无语。
高德地图 javascript 输入提示后查询
anzy/pine的博客
10-07 6987
高德地图web服务api--搜索功能（输入提示）
Just a Coder
11-09 1万+
需求：提供高德地图搜索地点功能，并查出经纬度坐标。 官方文档：http://lbs.amap.com/api/webservice/guide/api/inputtips 地点详情接口： http://restapi.amap.com/v3/assistant/inputtips?output=xml&city=010&keywords=招商银行&key=<用户的key>使用说明第一步，申
高德地图定位+搜索自动提示+poi搜索+移动地图选址
牛仔面包
01-12 1万+
我们需要完成如图的功能。 分4步：首先先看布局<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"
高德地图（定位、描点）
weixin_34326429的博客
11-27 796
为什么80%的码农都做不了架构师？>>> ...
高德地图Marker的管理（添加,删除）
热门推荐
Rose
11-09 5万+
方法一：清除地图上所有的Marker 说明：这种方式清除marker可能会出现设置了icons模拟gif动画的marker显示不了，这时候就需要用第二种方法了。AMap aMap = mapView.getMap(); aMap.clear();方法二：添加，删除指定的Marker,这样就不用清除地图上所有的Marker了//添加Marker,需要指定title，要不然可能会出现显示不了Marke
高德地图02---高德地图添加覆盖物
shuiermengqi的专栏
07-23 9969
1 添加MarkOption标记“` MarkerOptions mark = new MarkerOptions(); LatLng lat=new LatLng(39.908127, 116.375257); mark.position(lat); //mark的坐标位置 ArrayList list_icons = new Array
js 高德地图 搜索
最新发布
08-20
js 高德地图搜索功能可以通过调用高德地图的API来实现。首先，在网页中引入高德地图的API库文件，可以使用script标签进行引入。 然后，在JS代码中，可以使用AMap对象来调用搜索功能。通过使用AMap对象的搜索方法，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值