百度地图API中加自定义信息检索功能可以点击获取名称onInfoHtmlSet方法的使用

最新推荐文章于 2023-02-14 03:00:00 发布

qq_40919097

最新推荐文章于 2023-02-14 03:00:00 发布

阅读量1.1k

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/qq_40919097/article/details/105560102

版权

百度地图中的关键字检索功能

在使用百度地图的api的时候会有需求方需要添加自定义信息检索在百度的API文档中很多时候并不能找到自己所需要的在信息窗口内的加入自定义的按钮功能,也是我自己在实际写项目中所遇到的问题,找了不少内容,并没找到,不知道我自己使用百度搜索功能时候关键字没找对还是怎么样,以下也是我自己正在使用的代码,如果有什么不足的地方可以在评论区指出。

百度API信息窗口添加按钮功能

图片: 在这里插入图片描述

以下为JS代码的方法

绑定页面div元素的ID

<div id="allmap"></div>

在js内写入基本的百度地图API的调用方法,首先获取百度秘钥,然后才可以使用百度地图的API

// 百度地图API功能
// 由于项目为VUE项目,在最外面进行将this重新定义以方便在百度API内部使用页面的this数据
	var that = this
	var map = new BMap.Map("allmap");            // 创建Map实例
	var mPoint = new BMap.Point(116.404, 39.915);  
	map.enableScrollWheelZoom();
	map.centerAndZoom(mPoint,15);
// 设置获取的范围中心点为Ponit数据
	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, {
          onSearchComplete: function(languageResults) {
            console.log(languageResults)
          },
          renderOptions: { map: map, panel: "r-languageResult" },
          // 获取信息窗口点击后所获取的数据, 根据自己项目的需要对其进行优化
          onInfoHtmlSet: function(params, html) {
            var newHtml = 
              '地址：&nbsp;$address' +
              '<input id="Button1" data-value="'+ params.title +'" type="button" value="入住酒店" style="float:right;zoom:1;overflow:hidden;width:70px;height:30px;margin-left:3px;"/>';
            var mydom = "入住酒店";
            newHtml = newHtml.replace(
              "$address",
              params.address ? params.address : ""
            );
            newHtml = newHtml.replace(
              "$hotelName",
              params.title ? params.title : ""
            );
            newHtml = newHtml.replace("$mydom", mydom);
            html.innerHTML = newHtml;
            // 由于无法获取到每次点击信息框后的按钮点击事件无法触发,所以在这里使用按钮的ID进行绑定
            // 使用ID绑定点击事件用来将数据传出,到主页面内,并对他进行使用
            document.getElementById('Button1').addEventListener('click', function () {
              that.openName($(this).attr('data-value'))
            })
          },
          pageCapacity: 40
        });
        local.searchNearby('酒店',mPoint,1000);