黑莓地图用户自定义图像作为销钉，然后单击事件 [英] Blackberry map with user defined images as pin and click events
问题描述
我想在与用户的个人资料图片作为标记应用程序来显示地图（无论是谷歌地图或Blackberry MapField）。此外，我想点击的引脚，那么它会显示一个警告框。如何做？先谢谢了。
I want to display map(either google map or Blackberry MapField) in my application with the user profile picture as markers. Also i want to click the pins, then it will show an alert box. How its done ?. Thanks in advance.
我想这样的 -
我想这code -
I tried this code -
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);
}
}
然后我得到这样的 -
Then i get like this -
推荐答案
如果你想使用黑莓的 MapField ，可以通过阅读这篇启动，看看如何在 MapField 使用自定义标记（针）。
Custom Map Markers
If you want to use BlackBerry's MapField, you might start by reading this, to see how to use custom markers (pins) on a MapField.
该解决方案基本上覆盖子类内置 MapField 类的类的的paint（）方法。在的paint（），将其转换你想要一个标记（又名针或图标），以一个点的纬度和经度坐标在 X，Y 在 MapField 的坐标。然后，手工绘制的标记与 Graphics.drawBitmap（）。
That solution basically overrides the paint() method in a class that subclasses the built-in MapField class. Inside paint(), it converts latitude and longitude coordinates of a point where you want a marker (a.k.a. pin or icon) to the x,y coordinates of the MapField. Then, it manually draws the marker with Graphics.drawBitmap().
现在，为了吸引你上面显示的具体指标......这听起来像你的自定义图像应该由两部分组成：
Now, in order to draw the specific marker you show above ... it sounds like your custom image should be made of two parts:
-
这是你重用为每个用户后台标记。这是蓝色圆圈在底部的一个点，你在你的问题显示出来。画出标记自己在绘图程序，将它保存为PNG文件，并将其添加到您的项目作为一个位图资源。
A background marker that you reuse for every user. This is the blue circle with a point at the bottom, that you show in your question. Draw that marker yourself in a drawing program, save it as a .png file, and add it to your project as a bitmap resource.
的第二部分是每个用户的动态图像。你必须自己下载这些图像（你真的不指定这些图片来自）。但是，我敢肯定，你可以找到从Web服务器下载图像的计算器例子。
The second part is the dynamic image of each user. You'll have to download those images yourself (you didn't really specify where those images come from). But, I'm sure you can find examples on stackoverflow of downloading an image from a web server.
要做出完整的标记，你将使用我公司提供的第一个链接显示的技术。然而，不是绘画的有一个图片在地图上的每个位置，你会得出的两个即可。首先，画出蓝色背景标记物对每个用户是相同的。然后，最重要的是，你会得出用户的个人资料图片。如果你简单地调用 drawBitmap（）与用户的图像在绘制蓝色标记的背景下，用户图像的顶部
To make the complete marker, you will use the technique shown in the first link I provided. However, instead of drawing one image for each location on the map, you will draw two. First, draw the blue background marker that is the same for every user. Then, on top of that, you will draw the user profile image. If you simply call drawBitmap() with the user image after drawing the blue marker background, the user image will be on top.
您需要做这项工作的最后一个技巧就是把用户个人资料图片，这几乎肯定是给你们方形的图像，并把它们裁剪成一个圆圈。要做到这一点，你可以用这个计算器其它问题</A>的解决方案。在该解决方案，Rupak定义了一个 cropImage（）方法，做你需要的东西。他裁剪成圆形。里面的那个方法，注意他确实给变量 MYIMAGE 的东西。 MYIMAGE 在您的案件将开始为方形用户个人资料照片。裁剪后， MYIMAGE 现与裁剪边缘的位图对象，你应该能够进入第二个呼叫到 Graphics.drawBitmap（）您进行了地图上的每个位置。
The final trick you need to make this work is to take the user profile images, which almost certainly are given to you as square images, and crop them into a round circle. To do that, you can use the solution in this other stackoverflow question. In that solution, Rupak defines a cropImage() method that does what you need to. He crops into a circle. Inside that method, pay attention to what he does to the variable myImage. myImage in your case will start off as the square user profile photo. After cropping it, myImage is now a Bitmap object with cropped edges that you should be able to pass into the second call to Graphics.drawBitmap() that you make for each location on the map.
您的另一个问题是关于当用户选择一个标记处理。由于这些标志只是直接在上面绘制的 MapField ，以处理触摸/对他们的点击，你可能在你的<$ C重写这些方法$ C> MapField 子类：
Your other question was about handling when the user selects a marker. Since these "markers" are simply drawn directly on top of the MapField, in order to handle touches/clicks on them, you might have to override these methods in your MapField subclass:
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 有转换方法：
In those methods, you determine the field (x,y) location of the user's touch/click, and then cycle through your locations to determine if the touch was within a certain (x,y) distance of a marker. You could do this either in field coordinates (x,y) or in map/world coordinates (latitude, longitude). MapField has methods for converting:
void convertFieldToWorld(XYPoint fieldIn, Coordinates worldOut);
void convertWorldToField(Coordinates worldIn, XYPoint fieldOut);
为了解决这个问题。
to help with this.
您也应该看看在 MapFieldDemo 的这是在样品目录在JDE安装下。它有一个 DemoMapField 类，可以用得到一个点击的位置帮助（如果你不是一个触摸屏设备上）：
You should also look at the MapFieldDemo that's under the samples directory in your JDE installation. It has a DemoMapField class that may help with getting the location of a click (if you're not on a touchscreen device):
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;
}
祝你好运！
这篇关于黑莓地图用户自定义图像作为销钉，然后单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
