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

已于 2022-02-21 00:02:55 修改
阅读量3.1k 收藏 10
点赞数
分类专栏： 高德地图api 文章标签： html css javascript
于 2022-02-21 00:00:40 首次发布
本文链接：https://blog.csdn.net/Caiqiudan/article/details/123038371
版权
该博客演示了如何使用高德地图API实现关键词搜索功能，结合地点查询类和AutoComplete组件，实现用户输入提示并进行地点查询。同时，展示了如何利用Loca库创建蜂窝热力图，动态展示车主和非车主的位置分布。通过JavaScript代码，实现了数据的切换显示和地图上的标记点管理功能。
摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述

关键代码

	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.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>
坑死我的高德地图之：PlaceSearch.clear()
whl223的专栏
09-04 4454
        高德地图JS-API，使用PlaceSearch搜索地址，在地图上产生Marker，但是在调用PlaceSearch.clear()之后，Marker并没有被清除。这个问题困扰了我好几天了。高德官方参考手册相当简单：      https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.PlaceSearch ...
vue项目中调用高德地图vue-amap 插件 的AMap.PlaceSearch简用
Navy
06-25 3623
vue项目调用高德地图vue-amap 插件 的AMap.PlaceSearch简用 结合 elementui 的 el-input 直接下拉选取地点 不展示地图 1.下载 npm install vue-amap --save 2.直接在mian.js import AMap from 'vue-amap'; Vue.use(AMap); // 初始化vue-amap AMap.initAMapApiLoader({ // 高德key key: '自己的高德key',
Vue 高德地图实现添加标记，AMap.PlaceSearch 地点搜索，根据页面主题修改地图样式
Wang_make的博客
04-01 3813
Vue 高德地图实现添加标记，AMap.PlaceSearch 地点搜索，根据页面主题修改地图样式
android高德地图关键字搜索,关键字搜索-POI搜索-示例中心-JS API 示例 | 高德地图API...
weixin_30430517的博客
05-26 635
关键字检索#panel {position: absolute;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;}var map = new AMap.Map("container", {resizeEnable: true});AMap.service(["AM...
Jquery 浏览器调用高德地图进行导航
格林王子举哥
07-18 2668
第一步，去高德地图开发平台申请应用Key，这个key很重要，是用来和高德“”通话“”的标识，点击下方链接去申请： https://lbs.amap.com/dev/key/app 如图：点击加号，就可以申请应用实例了，申请成功后，会有名称和key 第二步，引用js文件： 这里采用高德的在线js文件引用， <!DOCTYPE html> <html>...
pc端vue封装高德地图实现定位 PlaceSearch搜索
LRQQHM的博客
01-23 1192
【代码】vue封装高德地图实现定位 PlaceSearch搜索。
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
10-15
在Vue项目中集成高德地图并实现定位及关键字搜索功能是一项常见的需求，下面将详细介绍如何在Vue项目中实现这些功能，以及在实现过程中需要注意的一些关键点。 首先，我们需要在项目的`index.html`文件中引入高德...
安卓GPS地图导航定位指南相关-Android高德地图gps定位.rar
07-29
高德地图作为一款流行的导航工具，提供了强大的定位和路线规划服务。本压缩包"Android高德地图gps定位.rar"包含了与实现这一功能相关的源代码和资源文件，适合开发者进行学习和参考。 首先，我们要理解GPS（全球...
mapdemo高德地图定位搜索
04-28
在iOS开发中，集成高德地图API可以实现各种丰富的地图功能，如定位、搜索和标注等。"mapdemo"是一个示例项目，它演示了如何在iOS应用中使用高德地图SDK来实现实时定位并进行精确的地图搜索。下面将详细讲解其中涉及...
高德地图定位、周边搜索、位置弹框、添加覆盖物等功能
09-07
本项目聚焦于“高德地图定位、周边搜索、位置弹框、添加覆盖物”等核心功能，允许开发者实现自定义定位、覆盖物管理以及交互事件处理，从而创建出更加个性化的地图应用。 首先，高德地图的定位功能是基础，它能够...
jQuery高德地图api开发实例代码
06-10
一款输入搜索路径，右键拖拽放大，左键点击测量路径的jQuery高德地图api开发实例代码。
jQuery采用高德地图api开发实例特效代码
03-20
jQuery采用高德地图api开发实例是一款输入搜索路径，右键拖拽放大，左键点击测量路径。
高德地图实现定位 获取周边 拖动 搜索
03-08
1. **输入框监听**: 在应用中设置一个搜索框，监听用户的输入，当用户输入关键字后，调用高德地图的关键词搜索API。 2. **展示搜索结果**: 将搜索结果同样以Marker形式标注在地图上，或者在列表中展示，用户点击后...
高德地图 AMap.PlaceSearch
热门推荐
ooiuy450的专栏
03-30 2万+
AMap.PlaceSearch地点搜索服务，提供某一特定地区的位置查询服务。PlaceSearch构造函数的参数为可选，表达为参数对象PlaceSearchOptions。PlaceSearchOptions允许设置搜索城市、搜索数据类别、搜索结果详略、搜索结果排序规则等。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回错误信息。高德地图为我们提供了某一地区的查询服务，通过
高德地图placesearch 搜索结果生成自定义marker
Zihuatanjo
10-28 3434
业务需求: 高德地图,输入关键词输入提示(autocomplete), 按照选择的关键词执行地点搜索placesearch在地图上生成标记点marker, 点击标记点弹出自定义信息窗口infowindow 点击信息窗体确定按钮,根据经纬度+地址更新当前行数据. 踩坑 1.placesearch 在初次加载时,会生成默认的标记点marker,与自定义的marker 重叠,再次进入不会出现. 2.infowindow 自定义信息窗体的内容没有跟随marker变动,不管点击哪个marker内容都是一样. .
高德地图PlaceSearch标记点清除
最新发布
来一杯Java咖啡
05-25 825
这时通过 searchNearBy()成员方法获取到的地点值含有省市区等详细信息。但是将map属性注释掉之后 发现不返回省市区，但是又不想关联上展示marker点。插件之后 增加map属性之后，地图上会出现自带的marker点，extensions: 'all' 属性，即可获取到省市区信息。在开发过程中发现引入 AMap.PlaceSearch。找了找办法，只需要将map注释掉之后，新增。
高德地图初始化
qq_59741893的博客
11-24 693
placeSearch.search(val?.name ?? '', ()=> { // 注：获取坑货高德搜索完自己创建的标点覆盖物 var overlays = map.getAllOverlays() // 移除点，坑我好久 map.remove(overlays) // placeSearch.render.markerList.clear()
高德地图自动定位并实现搜索
qq_44137046的博客
02-17 1309
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
高德地图基础控件使用 搜索定位等
paidaboluo的博客
08-21 600
高德地图基础控件使用 鹰眼 工具条 比例尺 切换图层 定位 搜索位置点
Android高德地图仿微信定位功能实现代码解析
本示例代码是关于在Android应用中使用高德...以上就是基于高德地图API在Android实现的微信位置功能实例代码的主要技术点，它涵盖了地图展示、定位、搜索和交互等多个方面，是Android地图应用开发的一个典型应用场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值