google-maps - 黑莓地图，用户定义的图像作为 pin 和 click 事件

Question

我想在我的应用程序中显示地图（谷歌地图或黑莓地图），并将用户个人资料图片作为标记。我也想点击别针，然后它会显示一个警告框。它是如何完成的？提前致谢。

我想要这样-

在此处输入图像描述

我试过这段代码 -

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);
        }
    }

然后我得到这样 -

在此处输入图像描述

score 1 · Accepted Answer

自定义地图标记

如果您想使用 BlackBerry 的MapField，您可以从阅读本文开始，了解如何在MapField.

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

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

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

要制作完整的标记，您将使用我提供的第一个链接中显示的技术。但是，您不会为地图上的每个位置绘制一个图像，而是绘制两个. 首先，为每个用户绘制相同的蓝色背景标记。然后，最重要的是，您将绘制用户个人资料图像。如果您在绘制蓝色标记背景后drawBitmap()简单地调用用户图像，则用户图像将位于顶部。

完成这项工作所需的最后一个技巧是获取用户个人资料图像，几乎可以肯定这些图像是作为方形图像提供给您的，并将它们裁剪成圆形。为此，您可以使用其他 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 。 它有一个类可以帮助获取点击的位置（如果您不在触摸屏设备上）：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;        
}

祝你好运！

google-maps - 黑莓地图，用户定义的图像作为 pin 和 click 事件

1 回答 1

自定义地图标记

处理用户触摸/点击

Related

Reference