高德地图设置标记点,点击弹出infowindow,点击其他地方消失

使用高德地图SDK集成地图功能,在地图上显示Marker标记点,点击设置的标记点弹出弹窗显示信息,这部分可参考我的另一篇文章,地址:https://blog.csdn.net/u013184970/article/details/84874780;今天要补充的内容是,弹出弹窗后,如果想关闭弹窗怎么办,点击地图上的其它部位关闭弹窗功能。

网上大部分的解决办法都是直接在map的setOnMarkerClickListener方法里像下面这样写(错误的):

第一种是

        aMap.setOnMarkerClickListener(new AMap.OnMarkerClickListener() {
            @SuppressLint("LongLogTag")
            @Override
            public boolean onMarkerClick(Marker marker) {
                if (marker.isInfoWindowShown()){
                    marker.hideInfoWindow();
                }else {
                    marker.showInfoWindow();
                }
                Log.e("setOnMarkerClickListener", "Marker被点击了");
                return false;//return true 的意思是点击marker,marker不成为地图的中心坐标,反之,成为中心坐标。
            }
        });

此时弹窗会一直显示,并没有关闭。

 第二种是

        aMap.setOnMarkerClickListener(new AMap.OnMarkerClickListener() {
            @SuppressLint("LongLogTag")
            @Override
            public boolean onMarkerClick(Marker marker) {
                curShowWindowMarker = marker;
                Log.e("setOnMarkerClickListener", "Marker被点击了");
                return false;//return true 的意思是点击marker,marker不成为地图的中心坐标,反之,成为中心坐标。
            }
        });


        aMap.setOnMapClickListener(new AMap.OnMapClickListener() {
            @Override
            public void onMapClick(LatLng latLng) {
                if (curShowWindowMarker.isInfoWindowShown()){
                    curShowWindowMarker.hideInfoWindow();
                }else {
                    curShowWindowMarker.showInfoWindow();
                }
            }
        });

这种方式在点击marker的时候弹窗不能弹出,但是点击地图其他部位的时候却能弹出弹窗,再点击其他部位关闭弹窗,也不能达到想要的效果。

以上两种方法本人亲自试了都不可行, 之后自己又写了下面这种方法,亲试可行,以供需要的朋友参考

首先设置两个全局变量:

private Marker curShowWindowMarker;
private boolean infoWindowShown = false;

然后再写Map的两个方法:

        aMap.setOnMarkerClickListener(new AMap.OnMarkerClickListener() {
            @SuppressLint("LongLogTag")
            @Override
            public boolean onMarkerClick(Marker marker) {
                curShowWindowMarker = marker;
                infoWindowShown = false;
                Log.e("setOnMarkerClickListener", "Marker被点击了");
                return false;//return true 的意思是点击marker,marker不成为地图的中心坐标,反之,成为中心坐标。
            }
        });

        aMap.setOnMapClickListener(new AMap.OnMapClickListener() {
            @Override
            public void onMapClick(LatLng latLng) {
                Log.e("tag","onMapClick");
                Log.e("tag","curShowWindowMarker="+curShowWindowMarker.isInfoWindowShown());
                //点击其它地方隐藏infoWindow
                if(curShowWindowMarker.isInfoWindowShown() && !infoWindowShown){
                    infoWindowShown = true;
                    return;
                }

                if(curShowWindowMarker.isInfoWindowShown() && infoWindowShown){
                    curShowWindowMarker.hideInfoWindow();
                }
            }
        });

如果有更好的方式欢迎探讨一下。

### 回答1: 在高德地图中,您可以通过使用`AMap.InfoWindow`类来创建一个信息窗口。您可以使用`setContent`方法来设置信息窗口内容,并使用`open`方法打开信息窗口。 下面是一个示例,展示了如何在信息窗口中添加一个点击事件: ``` var infoWindow = new AMap.InfoWindow({ content: '<div onclick="alert(\'Hello World!\')">Click me</div>', offset: new AMap.Pixel(0, -30) }); infoWindow.open(map, marker.getPosition()); ``` 在这个示例中,当用户点击信息窗口中的文本时,会弹出一个提示框。您可以使用任何HTML元素来创建信息窗口内容,并为其添加任何类型的事件处理程序。 希望这个示例能帮助您。如果您还有其他问题,请随时追问。 ### 回答2: 高德地图是一款功能强大的地图应用,它允许用户自定义标记点InfoWindow,并为InfoWindow添加点击事件。 首先,我们需要在高德地图中创建一个标记点,并设置InfoWindow。 在创建标记点的过程中,通过AMap.Marker的构造函数可以添加一个自定义的InfoWindow对象。我们可以使用InfoWindow类的方法,如setContent()和open(),来设置InfoWindow的内容和打开方式。例如,下面的代码创建了一个标记点,并将一个自定义的InfoWindow对象与之关联: var marker = new AMap.Marker({ position: [116.480983, 39.989628], }); var infoWindow = new AMap.InfoWindow({ content: "这是一个InfoWindow", offset: new AMap.Pixel(0, -30), closeWhenClickMap: true }); marker.on('click', function() { infoWindow.open(map, marker.getPosition()); }); 在上述代码中,我们给标记点点击事件添加了一个回调函数,当用户单击标记点时,回调函数会触发。在回调函数中,我们使用infoWindow的open()方法打开InfoWindow,并将其关联到标记点的位置上。 通过这种方法,我们可以在高德地图标记点InfoWindow中添加点击事件。当用户点击InfoWindow时,可以执行一些自定义的操作,比如打开一个新的页面、展示详细信息等。这为地图应用的交互性和功能性提供了更多的可能性。 ### 回答3: 在高德地图中,可以通过以下步骤给InfoWindow添加点击事件: 1. 首先,使用`createInfoWindow()`方法创建一个InfoWindow对象,并设置其内容和位置等属性,例如: ```javascript var infoWindow = new AMap.InfoWindow({ content: "<div>这是一个InfoWindow</div>", position: [经纬度] }); ``` 2. 接下来,使用`on('click', function())`方法来为InfoWindow添加点击事件的监听器,例如: ```javascript infoWindow.on('click', function(){ // 在这里编写点击InfoWindow后要执行的代码 }); ``` 在这个监听器函数中,你可以编写任意你想要执行的代码,例如弹出一个提示框或者进行一些其他操作。 3. 最后,使用`open()`方法将InfoWindow显示在地图上,例如: ```javascript infoWindow.open(map, [经纬度]); ``` 其中,参数`map`是表示地图对象的变量,用于指定InfoWindow要显示在哪个地图上;`[经纬度]`表示InfoWindow要显示的位置。 当用户点击InfoWindow时,就会触发之前添加的点击事件监听器中的函数,从而执行你编写的代码。这样,就完成了在高德地图InfoWindow中添加点击事件的操作。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时代新人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值