基于Baidu Map InfoWindow的消息交互(失败案例)

6 篇文章 1 订阅
3 篇文章 0 订阅

在上篇博文(Baidu Map 周边雷达)中,我们实现了周边APP的扫描。本文将在此基础上,进一步尝试添加群发消息功能。

但本文是一失败的案例!若有同学想要开发基于地图的社交功能,可以下课了~失败原因在于,InfoWindow一次只能显示一个!这显然不能满足群聊的要求。之所以将此博文写下,也是想见证学习过程,以及摔过的巨坑!

功能需求如下:
消息发送后,对应marker上将出现信息内容窗口。消息对周围所有人可见。

我们将借助RadarUploadInfo对象中的Comments变量,来存储要发送的消息内容。通过上传定位信息的方法,将消息发送出去。
当其他用户使用雷达时,将会检索到该定位信息。App再根据RadarNearbyInfo对象中有无Comments,创建InfoWindow,用以显示消息内容。

关于RadarUploadInfo对象和RadarNearbyInfo对象,在之前的博文(Baidu Map 周边雷达)中有提及,此处不再详细介绍。

基本思路有了,接下来分两部分实现上述功能。

(一)消息的发送

采用定位信息单次上传模式。

RadarUploadInfo info = new RadarUploadInfo();
info.comments = "My Msg is Hello Baidu Map";
//m_CurrentLocation 为当前定位信息
info.pt = new LatLng(m_CurrentLocation.getLatitude(),m_CurrentLocation.getLongitude());
//m_RadarManager为RadarSearchManager对象
m_RadarManager.uploadInfoRequest(info);

(二)信息窗口的显示

信息的显示采用InfoWindow对象完成。
InfoWindow提供了两种构造方法。

方法一:仅显示一个图标,并通过实现Clicklistener,完成自定义操作。

InfoWindow(BitmapDescriptor bd, LatLng position, int yOffset, InfoWindow.OnInfoWindowClickListener listener) 

本例使用的是第二种方法。

方法二:自定义显示窗口,需要创建View对象,并传入该对象。

InfoWindow(View view, LatLng position, int yOffset) 

用例如下:

TextView textView = new TextView(getApplicationContext());
textView.setBackgroundResource(R.drawable.chat);
textView.setPadding(30, 20, 30, 50);
textView.setText(Info.comments);

infoWindow =new InfoWindow(textView,Info.pt,DEFAULT_INFO_WINDOW_Y_OFFSET);
m_Map.showInfoWindow(infoWindow);

效果显示如下:
Phone1Phone2

此后,发现巨坑。InfoWindow只能显示一个。因此无法在Map显示所有用户发送的消息。

至此,信息交互尝试失败。

*转换思路:
marker可以显示多个,可尝试将消息文本转换为图片,作为marker的Image显示。*

尝试后再做记录。

### 回答1: 以下是一个基于WebGIS的网页设计的HTML代码案例,它使用了开放地图库Leaflet来显示地图,并在地图上添加了一些地理数据和控件。在代码中,您需要用自己的地图服务URL替换标有注释的部分: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>WebGIS网页设计</title> <!-- 引入Leaflet CSS文件 --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha384-RfSNKR8WUpc/lTNfFKZEz1opnMvZGQ2PWKGi+VRktt15yX0v8ROeO/ehmfBIgBRf" crossorigin="" /> <!-- 引入Leaflet JavaScript文件 --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha384-2P9FFvH8G+rWu0Sgmaa7+uZvLbBCwVYp4SO3q7VJ9OBxbFbwEuVZ+ctTCbF+bukZ" crossorigin="" ></script> </head> <body> <div id="map" style="height: 500px;"></div> <script> // 创建地图对象 var mymap = L.map("map").setView([51.505, -0.09], 13); // 添加地图图层 L.tileLayer( // 用自己的地图服务URL替换此处 "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors', maxZoom: 18, } ).addTo(mymap); // 添加标记 var marker = L.marker([51.5, -0.09]).addTo(mymap); // 添加带弹出窗口的标记 var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("这是一个标记。") .openOn(mymap); // 添加控件 L.control .scale({ imperial: false, maxWidth: 200, }) .addTo(mymap); L.control .layers( { // 用自己的图层服务URL替换此处 地图: L.tileLayer( "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors', maxZoom: 18, } ), 影像: L.tileLayer( "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", { attribution: 'Map data © <a href="https://www.arcgis.com/home/item.html?id=10df2279f9684e4a9f6 ### 回答2: HTML是一种用于创建网页的标记语言,而WebGIS则是指基于Web技术实现的地理信息系统。在网页设计中,我们可以使用HTML来构建一个基于WebGIS的网页。 下面是一个简单的HTML代码案例,展示如何使用HTML来设计一个基于WebGIS的网页: ```html <html> <head> <title>基于WebGIS的网页设计</title> <style> #map { width: 600px; height: 400px; } </style> </head> <body> <h1>基于WebGIS的网页设计</h1> <div id="map"></div> <script> // 在这里添加WebGIS代码 // 创建地图对象 var map = new WebGIS.Map("map"); // 添加图层 var layer = new WebGIS.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"); map.addLayer(layer); // 设置地图中心和缩放级别 map.setView([51.505, -0.09], 13); </script> </body> </html> ``` 在这个例子中,我们首先定义了一个`map`的`div`元素,用于显示地图。然后在`<script>`标签内,我们添加了WebGIS的代码,创建了一个地图对象`map`,并添加了一个OSM图层。最后,我们设置了地图的中心坐标和缩放级别。 通过这个简单的HTML代码案例,我们可以在网页中嵌入WebGIS地图,提供地理信息展示和交互功能,实现基于WebGIS的网页设计。 ### 回答3: 以下是一个基于WebGIS的网页设计的HTML代码案例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebGIS网页设计</title> <style> #map { height: 400px; width: 100%; } </style> <script src="https://api.map.baidu.com/api?v=2.0&ak=YourBaiduMapAPIKey"></script> <script> function initMap() { var map = new BMap.Map("map"); // 创建地图容器 var point = new BMap.Point(116.404, 39.915); // 设置地图中心点位置 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var infoWindow = new BMap.InfoWindow("这是一个WebGIS网页设计的示例"); // 创建信息窗口对象 marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); // 点击标注时打开信息窗口 }); } window.onload = initMap; // 页面加载完成后初始化地图 </script> </head> <body> <h1>WebGIS网页设计示例</h1> <div id="map"></div> <!-- 地图容器 --> </body> </html> ``` 这个案例基于百度地图API创建了一个简单的WebGIS网页设计。在网页中,首先通过`<script>`标签引入了百度地图API的库,并在`<script>`标签中编写了初始化地图、创建标注、添加事件等地图操作的代码。 在网页的`<body>`标签内,使用`<h1>`标签添加了一个标题,用于显示网页的名称,然后使用一个`<div>`标签设置了一个地图容器`id="map"`,用于显示地图。 在页面加载完成后,通过`window.onload`事件触发函数`initMap()`来初始化地图。`initMap()`函数中,首先创建了一个地图容器`map`,然后指定了地图的中心坐标和缩放级别,接着创建了一个标注`marker`,并将标注添加到地图中。同时,还创建了一个信息窗口对象`infoWindow`,当点击标注时,会打开这个信息窗口。 这个简单的示例展示了如何利用HTML和百度地图API实现一个基于WebGIS的网页设计,显示地图,并在地图上添加标注和信息窗口。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值