MapBox 的简单使用

最近接触了美国地图 MapBox ,觉得这个地图功能挺多、而且很详细,就学习了一下,在这里简单讲解一下基本地图、定位使用:

一、首先登陆官方网站 https://account.mapbox.com/ 注册账号,这里需要注意一点,和国内地图不同,MapBox不需要注册秘钥,当你注册账号成功,网站会自动给你一个默认 token,这个token就是使用地图的秘钥(token可以自己创建),然后选择地图 SDK 类型(建议英语差的小伙伴选择谷歌浏览器一键翻译)。:

二、对 Android Studio 进行配置,导入SDK,并配置权限;

1、在 build.gradle 里面:

repositories {

mavenCentral()

}

dependencies {

implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:7.1.2'

}

2、在 AndroidManifest.xml 添加权限:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />

三、简单使用

1、布局里面调用 MapView:

<com.mapbox.mapboxsdk.maps.MapView
    android:id="@+id/mapView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

2、代码中调用,首先实现  OnMapReadyCallback,PermissionsListener 两个接口,并定义地图实例、设置地图初始展示级别,设置权限申请。

public class ShowUserAdressActivity extends AppCompatActivity implements OnMapReadyCallback,PermissionsListener {

    private PermissionsManager manager;
    private MapboxMap map;
    private MapView mapView;
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show_user_adress);

        mapView = findViewById(R.id.mapView);
        mapView.onCreate(savedInstanceState);
        mapView.getMapAsync(this);

    }

    @Override
    public void onMapReady(@NonNull MapboxMap mapboxMap) {

        map = mapboxMap;
        
        // 设置地图 Style 样式
        map.setStyle(Style.SATELLITE,
                new Style.OnStyleLoaded() {
                    @Override
                    public void onStyleLoaded(@NonNull Style style) {
                            enableLocation(style);
                    }
                });

        // 初始化地图展示级别
        map.animateCamera(CameraUpdateFactory.zoomBy(13));

    }

    @Override
    public void onExplanationNeeded(List<String> permissionsToExplain) {
        Toast.makeText(this,"请打开权限",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPermissionResult(boolean granted) {
        if (granted){
            map.getStyle(new Style.OnStyleLoaded() {
                @Override
                public void onStyleLoaded(@NonNull Style style) {
                    enableLocation(style);
                }
            });
        }else {
                Toast.makeText(this,"未授予权限",Toast.LENGTH_SHORT).show();
                finish();
        }
    }

    // 获取定位组件详情
    @SuppressLint("MissingPermission")
    private void enableLocation(Style style){
        if (PermissionsManager.areLocationPermissionsGranted(this)){
            LocationComponent component = map.getLocationComponent();
            component.activateLocationComponent(this,style);

            // 打开定位
            component.setLocationComponentEnabled(true);

            // 设置相机模式
            component.setCameraMode(CameraMode.TRACKING);
            // 设置渲染模式
            component.setRenderMode(RenderMode.NORMAL);

        }else {
            manager = new PermissionsManager(this);
            manager.requestLocationPermissions(this);
        }
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
        manager.onRequestPermissionsResult(requestCode,permissions,grantResults);
    }

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

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

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

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

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

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

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

}

如果文章对你有用,请点个赞!

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Mapbox,你需要按照以下步骤进行入门使用: 1. 首先,你需要构建一个Vue或者React工程,并在项目中安装Mapbox-GL库。你可以使用npm命令来安装Mapbox-GL,运行以下命令: ```npm i mapbox-gl``` 2. 在你的代码中,使用import语句导入Mapbox模块。在你的Vue或者React组件中,可以像这样导入Mapbox-GL: ```import mapboxgl from "mapbox-gl";``` 3. 在你的代码中,你可以使用Mapbox-GL来创建一个地图实例并显示在你的页面上。你可以使用以下代码作为一个简单的示例: ```html <template> <div id="map"></div> </template> <script> import mapboxgl from "mapbox-gl"; export default { name: "HelloWorld", mounted() { mapboxgl.accessToken = "你的token"; // 替换为你的Mapbox token const map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v11", center: [-74.5, 40], zoom: 9, projection: "globe", }); map.on("style.load", () => { map.setFog({}); // 设置默认的大气层样式 }); }, }; </script> <style scoped> #map { width: 100vw; height: 97vh; margin: 0; padding: 0; } </style> ``` 在以上示例代码中,你需要将"你的token"替换为你在Mapbox官网上注册并获取的API访问令牌。此外,你可以根据自己的需求调整地图的样式、中心位置、缩放等参数。 这样,你就可以在你的Vue或者React应用中使用Mapbox-GL库来显示地图了。希望对你有所帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [MapBox入门教程一:token申请与环境搭建](https://blog.csdn.net/lz5211314121/article/details/126758209)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值