我从 json 获取纬度和经度，我想在地图上显示它们。我已经使用正常的方式完成了它，比如使用 googleMap 和 Overlays。但实际上我希望它像下图一样。
我已经搜索并得到了一些提示，例如在 webView 中显示地图和使用 Javascript。但找不到任何教程或示例代码。
它是静态图像，不会放大或缩小。只是我想在图像上放置位置坐标。
所以我的问题是，是否可以将图像作为 gooleMap？
提前致谢。
问问题
424 次
5 回答
3
如果您愿意离开 Google 地图，我建议您尝试使用 jVector Map，这是一个使用 jQuery 的基于 JavaScript 的地图解决方案。
下面是代码示例，显示了美国的失业率：
以下源代码将帮助您获得此输出：
$(function(){
$.getJSON('/data/us-unemployment.json', function(data){
var val = 2009;
statesValues = jvm.values.apply({}, jvm.values(data.states)),
metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)),
metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment));
$('#world-map-gdp').vectorMap({
map: 'us_aea_en',
markers: data.metro.coords,
series: {
markers: [{
attribute: 'fill',
scale: ['#FEE5D9', '#A50F15'],
values: data.metro.unemployment[val],
min: jvm.min(metroUnemplValues),
max: jvm.max(metroUnemplValues)
},{
attribute: 'r',
scale: [5, 20],
values: data.metro.population[val],
min: jvm.min(metroPopValues),
max: jvm.max(metroPopValues)
}],
regions: [{
scale: ['#DEEBF7', '#08519C'],
attribute: 'fill',
values: data.states[val],
min: jvm.min(statesValues),
max: jvm.max(statesValues)
}]
},
onMarkerLabelShow: function(event, label, index){
label.html(
''+data.metro.names[index]+''+
'Population: '+data.metro.population[val][index]+''+
'Unemployment rate: '+data.metro.unemployment[val][index]+'%'
);
},
onRegionLabelShow: function(event, label, code){
label.html(
''+label.html()+''+
'Unemployment rate: '+data.states[val][code]+'%'
);
}
});
var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject');
$("#slider").slider({
value: val,
min: 2005,
max: 2009,
step: 1,
slide: function( event, ui ) {
val = ui.value;
mapObject.series.regions[0].setValues(data.states[ui.value]);
mapObject.series.markers[0].setValues(data.metro.unemployment[ui.value]);
mapObject.series.markers[1].setValues(data.metro.population[ui.value]);
}
});
});
});
上面的代码将呈现如下地图：
于 2013-02-27T14:11:51.963 回答
3
我建议您覆盖 ImageView#onDraw() 并在图像顶部绘制位置点。主要任务是将坐标从地理空间转换到 ImageView 空间。因此，您需要了解地图图像在地理空间中的边界。
我在谷歌地图上截取了美国的截图。使用Right click -> What is here?菜单我找到了我的截图的地理范围。我还选择了国家边界周围的一些测试点。
这是一个简单的例子。自定义图像视图：
public class MapImageView extends ImageView {
private float latitudeTop, latitudeBottom, longitudeRight, longitudeLeft;
private List<Float> points = new ArrayList<Float>();
private Paint pointPaint;
private Matrix pointMatrix = new Matrix();
public MapImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
pointPaint = new Paint();
pointPaint.setAntiAlias(true);
pointPaint.setStrokeCap(Cap.ROUND);
pointPaint.setColor(Color.RED);
pointPaint.setStrokeWidth(8.0f);
}
public void setBounds(float latitudeTop, float latitudeBottom, float longitudeLeft, float longitudeRight) {
this.latitudeTop = latitudeTop;
this.latitudeBottom = latitudeBottom;
this.longitudeLeft = longitudeLeft;
this.longitudeRight = longitudeRight;
}
public void addPoint(float latitude, float longitude) {
points.add(longitude);
points.add(latitude);
invalidate();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
pointMatrix.reset();
pointMatrix.postTranslate(-longitudeLeft, -latitudeTop);
pointMatrix.postScale(
getMeasuredWidth()/(longitudeRight-longitudeLeft),
getMeasuredHeight()/(latitudeBottom-latitudeTop));
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPoints(mapPoints(), pointPaint);
}
private float[] mapPoints() {
float[] pts = new float[points.size()];
for (int i = 0; i < points.size(); i++) {
pts[i] = points.get(i);
}
pointMatrix.mapPoints(pts);
return pts;
}
}
在您的布局中：
<com.example.stackoverflow.MapImageView
android:id="@+id/img_map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/map"
android:scaleType="fitXY" />
请注意，这scaleType="fitXY"很重要，因为坐标映射到 ImageView 边界，而不是地图图片。
在您的活动中：
MapImageView mapView = (MapImageView)findViewById(R.id.img_map);
mapView.setBounds(52.734778f, 19.979026f, -130.78125f, -62.402344f);
mapView.addPoint(42.163403f,-70.839844f);
mapView.addPoint(42.163403f,-70.839844f);
结果：
于 2013-02-28T08:53:22.013 回答
1
这不只是一个缩放问题吗？
放入平面图像，然后按照通常的方式绘制点，但按比例绘制。
IE。
h_scale=(real_america_width/image_america_width)
v_scale=(real_america_height/image_america_height)
lat = lat_from_json*h_scale)
lon = lon_from_json*v_scale)
然后只需敲打标记。
抱歉，这不是真正的代码，但我不知道你想要它使用什么语言。一天结束，这是一个相当简单的方法。
于 2013-02-28T05:26:03.297 回答
0
请按照以下步骤操作：
首先复制要用作图像映射的图像并为每个部分着色。不用说，每个部分都有不同的颜色：D。然后在您的布局中创建两个 ImageView。将第一个的背景设置为要在屏幕上显示的图像，将第二个的背景设置为一个彩色。
然后将第二个 ImageView 的可见性设置为不可见。如果此时运行该程序，您应该会看到要显示的图像。然后使用 OnTouch 侦听器并获取您触摸的像素的颜色。颜色将对应于彩色图像的颜色。
下面的 getColour 方法需要传递触摸事件的 x 和 y 坐标。R.id.img2 是不可见的图像。
private int getColour( int x, int y)
{
ImageView img = (ImageView) findViewById(R.id.img2);
img.setDrawingCacheEnabled(true);
Bitmap hotspots=Bitmap.createBitmap(img.getDrawingCache());
img.setDrawingCacheEnabled(false);
return hotspots.getPixel(x, y);
}
希望这对您有所帮助:)。
于 2013-02-14T08:18:40.747 回答
0
android google map api 的替代方案是 google Static Maps API ( https://developers.google.com/maps/documentation/staticmaps/ )。只需获取具有您坐标的地图图像并相对指向其他坐标。
于 2013-02-28T07:53:14.760 回答