Question

我想在我的应用程序中显示地图（谷歌地图或黑莓MapField），用户个人资料图片作为标记。此外，我想点击引脚，然后它会显示一个警告框。怎么做的？提前谢谢。

我想要这样 -

enter image description here

我试过这段代码 -

import net.rim.blackberry.api.browser.Browser;
import net.rim.blackberry.api.browser.BrowserSession;
import net.rim.device.api.browser.field2.*;
import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.container.*;

public class App extends UiApplication
{
public static void main(String[] args)
{
    App app = new App();
    app.enterEventDispatcher();
}
public App()
{
    pushScreen(new MultiplePoints());
}
}
     class MultiplePoints extends MainScreen{
        String initial = "<!DOCTYPE html>\r\n" +
                "<html> \r\n" +
                "<head> \r\n" +
                "  <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" /> \r\n" +
                "  <title>Google Maps Multiple Markers</title> \r\n" +
                "  <script src=\"http://maps.google.com/maps/api/js?sensor=false\" \r\n" +
                "          type=\"text/javascript\"></script>\r\n" +
                "</head> \r\n" +
                "<body>\r\n" +
                "  <div id=\"map\" style=\"width: 500px; height: 400px;\"></div>\r\n" +
                "\r\n" +
                "  <script type=\"text/javascript\">\r\n" +
                "    var locations = [";
        String second= " ];\r\n" +
                "\r\n" +
                "    var map = new google.maps.Map(document.getElementById('map'), {\r\n" +
                "      zoom: 8,";
        String centerPoint ="";
        String finalpart = " mapTypeId: google.maps.MapTypeId.ROADMAP\r\n" +
                "    });\r\n" +
                "\r\n" +
                "    var infowindow = new google.maps.InfoWindow();\r\n" +
                "\r\n" +
                "    var marker, i;\r\n" +
                "\r\n" +
                "    for (i = 0; i < locations.length; i++) {  \r\n" +
                "      marker = new google.maps.Marker({\r\n" +
                "        position: new google.maps.LatLng(locations[i][2], locations[i][2]),\r\n" +
                "        map: map\r\n" +
                "      });\r\n" +
                "\r\n" +
                "      google.maps.event.addListener(marker, 'click', (function(marker, i) {\r\n" +
                "        return function() {\r\n" +
                "          infowindow.setContent(locations[i][0]);\r\n" +
                "          infowindow.open(map, marker);\r\n" +
                "        }\r\n" +
                "      })(marker, i));\r\n" +
                "    }\r\n" +
                "  </script>\r\n" +
                "</body>\r\n" +
                "</html>";
        String[] lt={"12.966085","12.944337","12.925599"};
      String[] lon={"77.533264","77.549400","77.594719"};
      String[] name={"vijyanagar","Banashankari","jaynagar"};

      MultiplePoints(){//StringBuffer html,Vector waypoints,LocationObj center){
            StringBuffer html=new StringBuffer();
            html.append(initial);        
            for(int i=0 ; i<lt.length; i++){
                //LocationObj source = (LocationObj)waypoints.elementAt(i);
                //String point = "['"+source.getLabel()+"',"+source.getLatitude()+","+ source.getLongitude()+","+i+"],";
                String point = "['"+name[i]+"',"+lt[i]+","+ lon[i]+","+i+"],";
                //System.out.println("Point is"+point);
                html.append(point);
            }
            html.append(second);
            centerPoint = "  center: new google.maps.LatLng("+lt[0]+","+lon[0]+"),";    
            html.append(centerPoint);
            html.append(finalpart);
            //System.out.println("Plot is"+html.toString());
            BrowserFieldConfig _bfConfig = new BrowserFieldConfig();        
          _bfConfig.setProperty(BrowserFieldConfig.NAVIGATION_MODE,BrowserFieldConfig.NAVIGATION_MODE_POINTER);
          _bfConfig.setProperty( BrowserFieldConfig.JAVASCRIPT_ENABLED, Boolean.TRUE );
         _bfConfig.setProperty(BrowserFieldConfig.USER_AGENT, "MyApplication 1.0");

          BrowserField myBrowserField = new BrowserField(_bfConfig);

          myBrowserField.displayContent(html.toString(), "http://localhost");
          HorizontalFieldManager horf=new HorizontalFieldManager(HORIZONTAL_SCROLL);
          horf.add(myBrowserField);
          add(horf);
        }
    }

然后我会这样 -

enter image description here

Answer 1

自定义地图标记

如果您想使用BlackBerry的MapField，可以start by reading this查看如何在MapField上使用自定义标记（图钉）。

该解决方案基本上覆盖了内置paint()类的子类中的MapField方法。在paint()内，它会将您想要标记（a.k.a.图钉或图标）的点的纬度和经度坐标转换为MapField的 x，y 坐标。然后，它使用Graphics.drawBitmap()手动绘制标记。

现在，为了绘制您在上面显示的特定标记......听起来您的自定义图像应该由两部分组成：

您为每个用户重复使用的背景标记。这是您在问题中显示的底部有一个点的蓝色圆圈。在绘图程序中自己绘制标记，将其保存为.png文件，并将其作为位图资源添加到项目中。
第二部分是每个用户的动态图像。您必须自己下载这些图像（您没有真正指定这些图像的来源）。但是，我确信你可以找到从web服务器下载图像的stackoverflow的例子。

要制作完整标记，您将使用shown in the first link I provided技术。但是，不是为地图上的每个位置绘制一个图像，而是绘制两个。首先，绘制每个用户相同的蓝色背景标记。然后，最重要的是，您将绘制用户个人资料图像。如果您只需使用用户图片在后绘制蓝色标记背景时调用drawBitmap()，则用户图片将位于顶部。

你需要做的最后一招是获取用户个人资料图片，这些图片几乎肯定是作为方形图像提供给你的，并将它们裁剪成圆形圆圈。为此，您可以使用solution in this other stackoverflow question。在该解决方案中，Rupak定义了一个cropImage()方法，可以满足您的需求。他挣扎成一个圆圈。在该方法中，注意他对变量myImage所做的工作。在您的情况下，myImage将作为方形用户个人资料照片开始。裁剪后，myImage现在是一个带有裁剪边缘的Bitmap对象，您应该可以将其传递给您为地图上的每个位置进行的第二次Graphics.drawBitmap()调用。

处理用户触摸/点击

您的另一个问题是关于用户选择标记时的处理方式。由于这些“标记”只是直接在MapField的顶部绘制，为了处理它们的触摸/点击，您可能必须在MapField子类中覆盖这些方法：

protected boolean touchEvent(TouchEvent message);

protected boolean navigationClick(int status, int time);
protected boolean navigationMovement(int dx, int dy, int status, int time);

在这些方法中，您可以确定用户触摸/点击的字段（x，y）位置，然后在您的位置中循环以确定触摸是否在某个之内（ x，y）标记的距离。您可以在场坐标（x，y）或地图/世界坐标（纬度，经度）中执行此操作。 MapField有转换方法：

void convertFieldToWorld(XYPoint fieldIn, Coordinates worldOut);
void convertWorldToField(Coordinates worldIn, XYPoint fieldOut);

帮助解决这个问题。

您还应该在JDE安装中查看 MapFieldDemo that's under the samples directory。它有一个DemoMapField类，可以帮助您获取点击的位置（如果您不在触摸屏设备上）：

protected boolean navigationMovement(int dx, int dy, int status, int time) 
{
    // The map is shifted in relation to the current zoom level.
    int zoom = getZoom();
    int latitude = getLatitude() - ((dy << 3) << zoom);     // << 3 is equivalent to multiplication by 8.
    int longitude = getLongitude() + ((dx << 3) << zoom);                  

    moveTo(latitude, longitude);       

    return true;        
}

黑莓地图将用户定义的图像作为引脚和点击事件

1 个答案:

自定义地图标记

处理用户触摸/点击