Android MapBox使用之自定义Marker(一)

使用mapbox开发地图的感想

  1. api简洁,在官网看API能实现基础的功能,实现需求时不够用,这时你可以看看官方GitHub上的Demo,可以启发你。
  2. API兼容性,s d k的修改只能是向上兼容,但也带来一些问题,有些代码照着API写出来不一定管用,原因是你调用的是SDK私有Api,只有点进原码才会发现有注释说明是私有API请不要调用鄙视

向地图上添加marker可以移动

    1.x m l布局文件中

<com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:mapbox_cameraTargetLat="39"
        app:mapbox_cameraTargetLng="116"
        app:mapbox_cameraZoom="12"
        app:mapbox_styleUrl="@string/mapbox_style_mapbox_streets" />
    2.添加测试移动marker
package com.example.sunday.mapboxdemo;

import android.animation.ObjectAnimator;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.mapbox.mapboxsdk.annotations.Marker;
import com.mapbox.mapboxsdk.annotations.MarkerOptions;
import com.mapbox.mapboxsdk.camera.CameraPosition;
import com.mapbox.mapboxsdk.camera.CameraUpdateFactory;
import com.mapbox.mapboxsdk.geometry.LatLng;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.MapboxMap;
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;

public class MainActivity extends AppCompatActivity {

    private MapView mapView;
    private MapboxMap mBoxMap;
    private Marker testMarker;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mapView = (MapView) findViewById(R.id.mapView);
        mapView.onCreate(savedInstanceState);
        mapView.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(MapboxMap mapboxMap) {
                mBoxMap=mapboxMap;
                testMarker=mapboxMap.addMarker(new MarkerOptions()
                        .position(new LatLng(39.13863, 116.57603))
                        .title("title")
                        .snippet("snippet"));

            }
        });
        moveMarker(testMarker,new LatLng(39.100, 116.500));
    }

    private void moveMarker(Marker testMarker,LatLng latLng) {
        if (testMarker!=null){
            //1.api实现
            CameraPosition position = new CameraPosition.Builder()
                    .target(latLng) // Sets the new camera position
                    .zoom(17) // Sets the zoom
                    .build(); // Creates a CameraPosition from the builder

            mBoxMap.animateCamera(CameraUpdateFactory
                    .newCameraPosition(position), 2000);
            //2.参考官方的动画移动marker实现
            animalMarker(testMarker,latLng);
        }
    }

    @Override
    public void onResume() {
        super.onResume();
        mapView.onResume();
    }

    @Override
    protected void onStart() {
        super.onStart();
        mapView.onStart();
    }

    @Override
    protected void onStop() {
        super.onStop();
        mapView.onStop();
    }

    @Override
    public void onPause() {
        super.onPause();
        mapView.onPause();
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mapView.onSaveInstanceState(outState);
    }

    @Override
    public void onLowMemory() {
        super.onLowMemory();
        mapView.onLowMemory();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }
    /**
     * 动画移动marker
     *
     * @param marker
     * @param point
     */
    public  void animalMarker(Marker marker, LatLng point) {
        if (marker != null) {
            ValueAnimator markerAnimator = ObjectAnimator.ofObject(marker, "position",
                    new LatLngEvaluator(), marker.getPosition(), point);
            markerAnimator.setDuration(2000);
            markerAnimator.start();
        }
    }

    /**
     * 移动marker的position动画
     */
    private  class LatLngEvaluator implements TypeEvaluator<LatLng> {
        // Method is used to interpolate the marker animation.

        private LatLng latLng = new LatLng();

        @Override
        public LatLng evaluate(float fraction, LatLng startValue, LatLng endValue) {
            latLng.setLatitude(startValue.getLatitude()
                    + ((endValue.getLatitude() - startValue.getLatitude()) * fraction));
            latLng.setLongitude(startValue.getLongitude()
                    + ((endValue.getLongitude() - startValue.getLongitude()) * fraction));
            return latLng;
        }
    }
}

moveMarker(Marker testMarker,LatLng latLng)方法中1,2方法都能达到移动marker的效果,使用其中一个即可看具体需求

点击地图上添加marker可以放大 缩小

  1. 首先想的是放大缩小动画实现,可是实现后不短的放大缩小会产出图像素丢失的现象
  2. 使用API方式实现点击后方法缩小
       private void moveMarker(Marker testMarker,boolean isBig) {
            if (testMarker!=null){
                Icon iconBig=IconFactory.getInstance(this).fromResource(R.drawable.ic_launcher_foreground);
                Icon iconnormal=IconFactory.getInstance(this).fromResource(R.drawable.ic_launcher_background);
                if (isBig){
                    testMarker.setIcon(iconBig);
                }else {
                    testMarker.setIcon(iconnormal);
                }
            }
        }
    发现2方法也不理想,功能虽然实现,但是调用麻烦需要获取marker对象才能使用,有没有可以自己控制放大缩小方法呢,在翻看了官方demo与API后我发现了
    mBoxMap.selectMarker(testMarker);//设置marker被选中状态
    mBoxMap.deselectMarker(testMarker);//设置marker非选中状态
    可以利用这个方法配合自定义的marker实现点击marker放大缩小自由,具体实现在下一篇章给出。

猜你喜欢

转载自blog.csdn.net/Mr_theSun/article/details/79688804