
- 最近更新时间
- 2020年03月05日
- 覆盖范围
- 全球209个国家和地区
- 运营公司
- 北京百度网讯科技有限公司
- 品牌愿景
- 科技让出行更简单
- 类 型
- 服务性软件
- 软件类型
- 出行类应用软件
- 推出时间
- 2005年
- 中文名
- 百度地图 [1]
- 外文名
- Baidu Maps
- 软件大小
- 94.8M
- 运营平台
- Web,PC,Android,iOS
- 最新版本
- 10.23.0.965
- 特色功能
- 智能语音,AR步导,智能驾车导航
-
2020-07-29 23:26:11
Flutter百度地图-重构项目
一、实现效果如下图
qq交流群:群号:730772561
1、地图中任意踩点进行杆塔和设备的新建,对与点和线进行关联
2、对于点和线进行各种操作。
3、自定义区域下载离线地图。
4…热烈线
5…自定义瓦片地图
6…热力地图等…地图动画等…多边形转换动画等
…很多慢慢来
如上图项目中有点线,
1.我们实现点和线。
2.对点和线进行连接。
3.设置点和线文字等。
…
到项目的我完成。二、开始写项目
1、项目项目添加依赖。
.yaml下面添加
flutter_bmfmap: ^1.0.1
flutter_bmfutils: ^1.0.12、获取然后设置清单文件的AK百度官方文档等。
3、可能很多的小伙伴会遇到如下错位置并且奔溃 “android/platform_view_android_jni.cc”
//Flutter运行出现下面提示 android/platform_view_android_jni.cc //原生环境运行出现下面。 SDKInitializer.initialize(getApplicationContext())......
这里我们需要初始化MyApplication并且继承BmfMapApplication看了分装源码的就会知道。 在BmfMapApplication里面进行了SDK的初始化init操作。在集成过程中遇到的问题。 在原生Android main下面进行继承
class MyApplication : BmfMapApplication() { }
且在AndroidMmanifest.xml下面配置如下代码解决问题
<application android:name=".MyApplication"///这里去引用MyApplication进行初始化SDK android:label="flutterosm" android:icon="@mipmap/ic_launcher">
4、打开官方文档我们进行新App的开发旅程。
1.我们首先看看如何加载地图的
地图Flutter Widget构造,BMFMapWidget是地图Flutter插件封装的一个支持AndroidView和UiKitView的Widget。官方文档如下。
Container( height: screenSize.height, width: screenSize.width, child: BMFMapWidget( onBMFMapCreated: (controller) { }, mapOptions: mapOptions, ), );
2、BMFMapOptions构造,BMFMapOptions包含了创建地图所需要的各种状态参数[显示样式,限制地图的显示范围,当前地图的中心点,地图的自定义最大最小比例尺级别…看官方文档
BMFMapOptions mapOptions = BMFMapOptions( center: BMFCoordinate(39.917215, 116.380341), zoomLevel: 12, mapPadding: BMFEdgeInsets(left: 30, top: 0, right: 30, bottom: 0));
我们直接上代码
import 'dart:io' show Platform; import 'package:flutter/material.dart'; import 'package:flutter_bmfbase/BaiduMap/bmfmap_base.dart' show BMFMapSDK, BMF_COORD_TYPE; import 'package:flutter_bmfbase/BaiduMap/bmfmap_base.dart'; import 'package:flutter_bmfmap/BaiduMap/bmfmap_map.dart'; void main() { WidgetsFlutterBinding.ensureInitialized(); // 百度地图sdk初始化鉴权 if (Platform.isIOS) { BMFMapSDK.setApiKeyAndCoordType( '请在此输入您在开放平台上申请的API_KEY', BMF_COORD_TYPE.BD09LL); } else if (Platform.isAndroid) { // Android 目前不支持接口设置Apikey, // 请在主工程的Manifest文件里设置,详细配置方法请参考官网(https://lbsyun.baidu.com/)demo BMFMapSDK.setCoordType(BMF_COORD_TYPE.BD09LL); } runApp(new MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { BMFMapOptions mapOptions; @override void initState() { super.initState(); mapOptions = BMFMapOptions( center: BMFCoordinate(39.917215, 116.380341), zoomLevel: 12, mapPadding: BMFEdgeInsets(left: 30, top: 0, right: 30, bottom: 0)); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar:AppBar( title:Text('百度地图flutter插件Demo'), ), body: BMFMapWidget( onBMFMapCreated: (controller) { }, mapOptions: mapOptions, ), ), ); } }
效果如下图
接下来我们进行基本的按钮和界面一样。
5、百度定位和百度地图以及其他插件直接的冲突和bug
1、可能出现 BaiduLBS_Android.jar 的冲突。
“find libs BaiduLBS_Android.jar and jetb_BaiduLBS_Android.jar” 去每一个依赖了的builde.gradle里面只能有且一个api其他的都需要compileOnly
compileOnly files('libs/BaiduLBS_Android.jar')
2、出现 …path ‘lib/arm64-v8a/libindoor.so’…
- What went wrong:
Execution failed for task ‘:app:transformNativeLibsWithMergeJniLibsForDebug’. More than one file was found with OS independent path ‘lib/arm64-v8a/libindoor.so’
* What went wrong: Execution failed for task ':app:transformNativeLibsWithMergeJniLibsForDebug'. > More than one file was found with OS independent path 'lib/arm64-v8a/libindoor.so'
在下面的Flutter plugins下面寻找库里面libs下面重复的so库然后在下面的build下面进行移除或者唯一
packagingOptions{ pickFirst 'lib/arm64-v8a/libindoor.so' pickFirst 'lib/x86/libindoor.so' pickFirst 'lib/x86_64/libindoor.so' pickFirst 'lib/armeabi-v7a/libindoor.so' pickFirst 'lib/x86_64/liblocSDK8a.so' pickFirst 'lib/arm64-v8a/liblocSDK8a.so' pickFirst 'lib/x86/liblocSDK8a.so' pickFirst 'lib/armeabi-v7a/liblocSDK8a.so' }
3、出现BMFMapWidget create失败…register
运行之后出FlutterBmfmapPlugin…没有register
我们去Flutter plugin下面找到flutter_bmfmap_1.0.1下面的src.main.FlutterBmmapPlugin/** * FlutterBmfmapPlugin */ package com.baidu.flutter_bmfmap; import android.os.Build; import android.util.Log; import androidx.annotation.NonNull; import com.baidu.flutter_bmfmap.map.OfflineHandler; import com.baidu.flutter_bmfmap.utils.Constants; import com.baidu.flutter_bmfmap.utils.Env; import io.flutter.embedding.engine.FlutterEngine; import io.flutter.embedding.engine.plugins.FlutterPlugin; import io.flutter.embedding.engine.plugins.activity.ActivityAware; import io.flutter.embedding.engine.plugins.activity.ActivityPluginBinding; import io.flutter.embedding.engine.plugins.shim.ShimPluginRegistry; import io.flutter.plugin.common.BinaryMessenger; import io.flutter.plugin.common.MethodCall; import io.flutter.plugin.common.MethodChannel.MethodCallHandler; import io.flutter.plugin.common.MethodChannel.Result; import io.flutter.plugin.common.PluginRegistry; import io.flutter.plugin.common.PluginRegistry.Registrar; import io.flutter.plugin.platform.PlatformViewRegistry; /** * FlutterBmfmapPlugin */ public class FlutterBmfmapPlugin implements FlutterPlugin, ActivityAware, MethodCallHandler { private static final String TAG = FlutterBmfmapPlugin.class.getSimpleName(); private OfflineHandler mOfflineHandler; //魔改百度地图插件 全局变量01 private FlutterPluginBinding flutterPluginBinding; //魔改百度地图插件 全局变量02 private PlatformViewRegistry mRegistrar; //魔改百度地图插件 方法01 @Override public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) { mOfflineHandler = new OfflineHandler(); mOfflineHandler.init(flutterPluginBinding.getBinaryMessenger()); this.flutterPluginBinding = flutterPluginBinding; //BMKMapView this.mRegistrar = flutterPluginBinding.getPlatformViewRegistry(); Log.e(TAG, "onAttachedToEngine: "+"注册了" ); //注释百度他们自己的东西 /*ShimPluginRegistry shimPluginRegistry = new ShimPluginRegistry(flutterEngine); String key = FlutterBmfmapPlugin.class.getSimpleName(); if(shimPluginRegistry.hasPlugin(key)){ if(Env.DEBUG){ Log.d(TAG, "hasPlugin"); } return; } mRegistrar = shimPluginRegistry.registrarFor(key);*/ } // This static function is optional and equivalent to onAttachedToEngine. It supports the old // pre-Flutter-1.12 Android projects. You are encouraged to continue supporting // plugin registration via this function while apps migrate to use the new Android APIs // post-flutter-1.12 via https://flutter.dev/go/android-project-migration. // // It is encouraged to share logic between onAttachedToEngine and registerWith to keep // them functionally equivalent. Only one of onAttachedToEngine or registerWith will be called // depending on the user's project. onAttachedToEngine or registerWith must both be defined // in the same class. public static void registerWith(Registrar registrar) { OfflineHandler offlineHandler = new OfflineHandler(); offlineHandler.init(registrar.messenger()); registrar.platformViewRegistry().registerViewFactory( Constants.ViewType.sMapView, new MapViewFactory(registrar.activity() , registrar.messenger() , Constants.ViewType.sMapView)); registrar.platformViewRegistry().registerViewFactory( Constants.ViewType.sTextureMapView, new TextureMapViewFactory(registrar.activity() , registrar.messenger() , Constants.ViewType.sTextureMapView)); } @Override public void onMethodCall(@NonNull MethodCall call, @NonNull Result result) { if (call.method.equals("getPlatformVersion")) { result.success("Android " + android.os.Build.VERSION.RELEASE); } else { } } @Override public void onDetachedFromEngine(@NonNull FlutterPluginBinding binding) { if (null == binding) { return; } BinaryMessenger binaryMessenger = binding.getBinaryMessenger(); if (null == binaryMessenger) { return; } mOfflineHandler.unInit(binding.getBinaryMessenger()); } //魔改百度地图插件 方法02 @Override public void onAttachedToActivity(ActivityPluginBinding binding) { Log.e(TAG, "onAttachedToActivity: "+"绑定了" ); if (null == binding || null == mRegistrar) { return; } //删除百度下面的。然后复制这几行 mRegistrar.registerViewFactory( Constants.ViewType.sMapView, new MapViewFactory(binding.getActivity() , flutterPluginBinding.getBinaryMessenger() , Constants.ViewType.sMapView)); mRegistrar.registerViewFactory( Constants.ViewType.sTextureMapView, new TextureMapViewFactory(binding.getActivity() , flutterPluginBinding.getBinaryMessenger() , Constants.ViewType.sTextureMapView)); } @Override public void onDetachedFromActivityForConfigChanges() { Log.d(TAG, "onDetachedFromActivityForConfigChanges"); } @Override public void onReattachedToActivityForConfigChanges(ActivityPluginBinding binding) { Log.d(TAG, "onReattachedToActivityForConfigChanges"); } @Override public void onDetachedFromActivity() { Log.d(TAG, "onDetachedFromActivity"); } }
要是大家觉得很麻烦:
5里的东西不用管了用下面的吧。已经上传githttps://gitee.com/xskill/flutter_bmfmap 群里的小哥直接放到git了。我当时打算推到dar库没成功就算了。
运行结果:完成定位和地图同时展示
慢慢来待续
视频教学同步走更多相关内容 - What went wrong:
-
百度地图api离线开发包
2015-11-02 15:10:19本离线开发包,支持百度地图离线开发。用于无网络环境下的百度地图二次开发。 包含以下文件: 1,基础API:apiv1.3.min.js ,有注释可参考; 2,基础CSS: bmap.css ; 3,依赖文件:map,oppc,tile,control,marker; 4... -
百度地图瓦片下载——无水印
2017-08-05 14:49:34百度地图瓦片下载程序 -
echarts离线百度地图+demo(演示)+步骤文档(超详细)
2018-05-04 09:19:34环境在内网,又需要echarts结合百度地图,请参考本资源。里面有echarts+离线百度地图+demo+步骤文档(超详细)。百分百能用,用过麻烦好评,谢谢。 -
百度地图定位开发图标大全
2015-06-27 21:32:58里面是百度地图开发所用的很全的图标,从百度地图SDK的sample中获取,我从网上找了很久都没找到,很给力的说~ -
C++调用百度地图API
2015-05-11 09:16:17通过C++代码调用百度地图API,一个简单实用的百度地图操作实例,希望能给大家带来帮助。 -
android 百度地图显示搜索城市和POI搜索(源代码)
2014-12-24 02:48:19该资源主要参考博客http://blog.csdn.net/eastmount/article/details/42115735完成,它是android使用V2_4_1版本显示百度地图,同时搜索城市定位到该城市地图,输入关键字能显示POI感兴趣的内容,并添加覆盖物标注... -
百度地图所有城市对应的citycode
2015-05-16 09:03:17百度地图所有城市对应的citycode,oracle数据库可立即执行的sql语句 -
百度地图 轨迹绘制
2014-12-16 14:25:25百度地图 轨迹绘制 路线规划,优化了上个版本中的一些问题 -
android 百度地图定位当前位置及POI搜索(源码)
2015-01-11 01:59:25它是android使用V2_4_1版本显示百度地图,同时搜索城市定位到该城市地图,输入关键字能显示POI感兴趣的内容,并添加覆盖物标注出来,如KTV或北京的大学。同时包括定位当前位置,通过LocSDK中函数实现,免费资源希望... -
android百度地图SDK标记物Marker不随地图的移动而移动(仿滴滴打车)
2015-08-30 20:14:20基于百度地图SDK ,实现仿滴滴打车对地图的操作,即标记物Marker(覆盖物)不随地图的移动而移动。包括两部分功能:(1)传入地址比如北京市海淀区五道口地铁站,会在地图上地位,(2)监测到地图移动完成之后,显示... -
百度地图infoBox例子
2015-06-03 18:33:10百度地图infoBox小例子,就是百度地图infobox的小例子,还需要介绍别的吗 -
百度地图瓦片工具(JAVA完整工程)
2015-12-08 19:36:29百度地图瓦片工具(JAVA完整工程),亲试可行。 -
百度地图api-基本用法总结
2022-02-11 08:36:57百度地图api的一些常用方法以下内容已录制
点击观看视频
百度地图api 一些常用的用法总结(笔记)
参考百度地图官方api:百度地图官方api
百度地图提供的拾取坐标: 百度地图提供的拾取坐标
注:百度地图api文档是真详细加载地图前提:
- 申请百度地图账号
- 申请开发者填写开发者信息
- 申请AK 点击查看申请步骤
一、 加载地图
加载地图步骤
- 新建一个html页面
- 引入js
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=申请的AK"></script>
- 写下样式
<style> html, body, #container { width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0 } </style>
- 创建地图容器元素
<div id="container"></div>
- 开始写js 初始化地图
//1.创建地图实例 var map = new BMapGL.Map("container"); //2.设置中心经纬度 这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,其中120.872845表示经度,32.021089表示纬度。(为南通濠河风景区坐标) var point = new BMapGL.Point(120.872845, 32.021089); //3.在创建地图实例后,我们需要对其进行初始化,BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作 值一般是3-19 map.centerAndZoom(point, 15);
map.centerAndZoom(point, 15);的最终效果
值越大 地图越大
map.centerAndZoom(point, 10);的最终效果
值越小 地图越小
二、 添加控件
var map = new BMapGL.Map("container");//创建地图实例 var point = new BMapGL.Point(120.872845, 32.021089);//设置中心经纬度 map.centerAndZoom(point, 15);//初始化地图 map.enableScrollWheelZoom(true); //开启鼠标滚轮 地图可以进行放大 缩小 map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件 左下角显示 map.addControl(new BMapGL.ZoomControl());// 添加缩放控件 右下角显示 map.addControl(new BMapGL.CityListControl()); // 添加城市列表控件 左上角 map.addControl(new BMapGL.MapTypeControl());// 地图类型 右上角显示
2.1 开启鼠标滚轮
map.enableScrollWheelZoom(true); //开启鼠标滚轮 地图可以进行放大 缩小
2.2 添加比例尺控件
map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件 左下角显示
2.3 添加缩放控件
map.addControl(new BMapGL.ZoomControl());// 添加缩放控件 右下角显示
2.4 添加城市列表控件
map.addControl(new BMapGL.CityListControl()); // 添加城市列表控件 左上角
2.5 添加地图类型
map.addControl(new BMapGL.MapTypeControl());// 地图类型 右上角显示
可切换3D地球模式
三、 文本标注
3.1添加默认的文本标注
//向地图添加了一个文本标注,并使用默认的标注样式: var content = "hello world"; var label = new BMapGL.Label(content, { // 创建文本标注 position: point, // 设置标注的地理位置 offset: new BMapGL.Size(10, 20) // 设置标注的偏移量 }) map.addOverlay(label); // 将标注添加到地图中
3.2添加自定义样式的文本标注
//地图添加大号 文本标注 var content = 'hello world'; var label = new BMapGL.Label(content, { // 创建文本标注 position: point, offset: new BMapGL.Size(10, 20) }) map.addOverlay(label); // 将标注添加到地图中 label.setStyle({ // 设置label的样式 color: '#000', fontSize: '50px', border: '2px solid blue' })
3.3添加文本标注监听
//监听标注事件 label.addEventListener("click", function () { alert("您点击了文本标注"); });
四、 地图添加标注点
4.1 添加默认标注
添加成功后 会有一个默认的红色的定位图标显示在地图中
//Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。 //API提供了默认图标样式,您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions(可选)。 //注意:当您使用自定义图标时,标注的地理坐标点将位于标注所用图标的中心位置,您可通过Icon的offset属性修改标定位置。 var point = new BMapGL.Point(120.872845, 32.021089); var marker = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中
4.2 添加自定义图片 标注(应用较多)
//定义标注图标 通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置,您也可以 //marker.setIcon()方法。 var myIcon = new BMapGL.Icon("../images/love.png", new BMapGL.Size(23, 25), { // 指定定位位置。 // 当标注显示在地图上时,其所指向的地理位置距离图标左上 // 角各偏移10像素和25像素。您可以看到在本例中该位置即是 // 图标中央下端的尖角位置。 anchor: new BMapGL.Size(10, 25), // 设置图片偏移。 // 当您需要从一幅较大的图片中截取某部分作为标注图标时,您 // 需要指定大图的偏移位置,此做法与css sprites技术类似。 //imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移 }); //创建标注对象并添加到地图 var marker = new BMapGL.Marker(point, { icon: myIcon }); map.addOverlay(marker);
4.3 设置图标可拖拽
enableDragging: true//设置图标可拖拽
var marker = new BMapGL.Marker(point, { icon: myIcon, enableDragging: true//设置图标可拖拽 });
4.4 添加地图标注监听
点击标注 出发点击事件
marker.addEventListener("click", function () { alert("您点击了自定义标注"); });
五、信息窗口
5.1 添加信息窗口
var point = new BMapGL.Point(120.872845, 32.021089); var opts = { width: 250, // 信息窗口宽度 height: 100, // 信息窗口高度 title: "Hello World" // 信息窗口标题 } let content = `<table><tr><td>1</td><td>2</td><td>3</td></tr></table>`; var infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, point); // 打开信息窗口 //同时监听标注的点击事件 marker.addEventListener("click", function () { map.openInfoWindow(infoWindow, point); // 打开信息窗口 });
六、 设置地图3D视觉+设置天空颜色
//设置地图3D视觉 map.setHeading(64.5);//旋转角度 map.setTilt(73);//地图倾斜 //设置天空颜色 map.setDisplayOptions({ skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)']//天空颜色 })
七、 交通流量图层
查看交通拥堵状况 红色为拥堵
var map = new BMapGL.Map("container"); // 创建地图实例 var point = new BMapGL.Point(121.441661, 31.173661); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 map.setTrafficOn(); // 添加交通流量图层
八、出行路线规划
8.1 驾车路线规划
传入起点和终点的两个ip地址,
可计算出驾车的距离和通行时间var map = new BMapGL.Map("container"); map.centerAndZoom(new BMapGL.Point(121.187484, 31.869261), 12); var output = '驾车需要:'; var start = new BMapGL.Point(121.187484, 31.869261); var end = new BMapGL.Point(121.189752, 31.86958); var driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true }, onSearchComplete: function (results) { if (driving.getStatus() != BMAP_STATUS_SUCCESS) { return; } var plan = results.getPlan(0); output += '总时长:' + plan.getDuration(true); //获取时间 output += '总路程:' + plan.getDistance(true); //获取距离 $('#result').css('display', 'block'); $('#result').html(output); }, }); driving.search(start, end);
8.2 公交路线规划
传入起点和终点的两个ip地址,
可计算出公交行驶的距离和通行时间var map = new BMapGL.Map('container'); map.centerAndZoom(new BMapGL.Point(121.171548, 31.884098), 12); var output = '坐公交车需要:'; var transit = new BMapGL.TransitRoute(map, { renderOptions: { map: map }, onSearchComplete: function (results) { if (transit.getStatus() != BMAP_STATUS_SUCCESS) { return; } var plan = results.getPlan(0); output += '总时长:' + plan.getDuration(true); //获取时间 output += '总路程:' + plan.getDistance(true); //获取距离 $('#result').css('display', 'block'); $('#result').html(output); }, }); var start = new BMapGL.Point(121.171548, 31.884098); var end = new BMapGL.Point(121.193466, 31.873612); transit.search(start, end);
8.3 步行路线规划
传入起点和终点的两个ip地址,
可计算出步行的距离和通行时间var map = new BMapGL.Map("container"); map.enableScrollWheelZoom(); map.centerAndZoom(new BMapGL.Point(121.187484, 31.869261), 12); var output = '步行需要:'; var walking = new BMapGL.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true }, onSearchComplete: function (results) { if (walking.getStatus() != BMAP_STATUS_SUCCESS) { return; } var plan = results.getPlan(0); output += '总时长:' + plan.getDuration(true); //获取时间 output += '总路程:' + plan.getDistance(true); //获取距离 $('#result').css('display', 'block'); $('#result').html(output); },
8.4 骑行路线规划
传入起点和终点的两个ip地址,
可计算出骑行的距离和通行时间var map = new BMapGL.Map("container"); map.centerAndZoom(new BMapGL.Point(121.187484, 31.869261), 12); var output = '骑行需要:'; var riding = new BMapGL.RidingRoute(map, { renderOptions: { map: map, autoViewport: true }, onSearchComplete: function (results) { if (riding.getStatus() != BMAP_STATUS_SUCCESS) { return; } var plan = results.getPlan(0); output += '总时长:' + plan.getDuration(true); //获取时间 output += '总路程:' + plan.getDistance(true); //获取距离 $('#result').css('display', 'block'); $('#result').html(output); }, }); var start = new BMapGL.Point(121.187484, 31.869261); var end = new BMapGL.Point(121.189752, 31.86958);
九、 个性化地图
效果
登录 百度地图api官网
点击开发文档->个性化地图编辑器
开始使用
点击新建
选一个免费的模板 点击使用
点击编辑JSON 复制所有json代码
将复制的json对象赋值给styleJson 对象
map.setMapStyleV2({ styleJson: styleJson });即可渲染地图 -
百度地图API调用_实现百度地图动态搜索、静态地图动态插入
2011-07-17 15:14:10百度map,百度map API,百度地图 实现百度地图动态搜索、静态地图动态插入 mygw@163.com js 内容如下: /** 加载地图的主控类 */ var MapControl={ staticWith : 512,//链接静态图宽度 staticHeight : 320,/... -
百度地图离线API 2.0(含示例,可完全断网访问)
2015-02-05 14:25:04由于公司需求,自己修改的离线地图API.该压缩包具有如下功能: 1.支持使用google地图瓦片(不建议使用,效率不高,缩放级别较高时拖动有些卡顿,建议注释该代码块:overlayTileLayer.getTilesUrl,使用google转baidu的jar... -
Qt操作百度地图
2014-01-16 15:20:46Qt5.2实现了: (1)根据Qt中指定的中心点加载一副百度地图; (2)单击目标点进行画圆; (3)手动制定圆的半径进行画圆; (4)获取目标点的经度和纬度,返回给Qt -
百度地图api 全国所有省市县坐标sql表
2014-10-28 12:21:13百度地图api 全国所有省市县坐标sql表,sql文件 -
Android集成百度地图接口,实现定位+路径规划。
2014-09-06 21:58:08Android集成百度地图接口,实现定位+路径规划。 博客地址http://blog.csdn.net/dqksky/article/details/38848475 -
百度地图中所有城市对应的cityCode
2014-01-22 16:14:56通过百度地图在使用GPS定位时,可以通过城市的cityCode来确定具体的是定位的城市,附件中列出的城市是我自己又重新修改了部分,把其中的逗号去掉并换行 -
百度地图个人开发demo 源码程序
2015-03-05 00:32:36本资源是百度地图开发demo, 包括地图图层展示,覆盖物添加,地理编码+反地理编码,地图控制+定位,poi检索,公交路线查询+路线规划。 详见blog: http://blog.csdn.net/crazy1235/article/details/44069267 ... -
调用百度地图API显示虚线运动轨迹
2013-11-21 14:14:28调用百度地图API显示虚线运动轨迹,自己写的一个例子,附带注释,适合初次接触百度地图API的 -
Winform调用百度地图接口
2013-04-27 16:40:02一个HTML文件调用了百度地图接口,一个Winform程序调用了该网页,显示地图 -
百度地图DEMO ~ 百度地图DEMO
2015-02-24 12:23:55该资源是本人根据基础地图3.2.0SDK版本和定位5.0SDK版本进行开发。 详见blog: http://blog.csdn.net/crazy1235/article/details/42614603 http://blog.csdn.net/crazy1235/article/details/43377545 ... -
最新百度地图API V2.0 离线版本
2016-08-22 21:36:512016年8月的最新百度地图API V2.0 离线版本。 完全脱离百度在线地图,支持绝大多数api功能。 地图功能模块有44个,按需本地加载。 完善的使用示例Demo,和官网类似。 默认带有全国8级地图。 -
Vue+百度地图api
2020-12-30 13:57:07Vue中使用百度地图api文章目录
一、百度地图开放平台是什么?
百度地图开放平台是面向广大政府、企业、互联网等开发者开放地图服务的平台。百度地图开放平台。若想使用高德地图,请查看文章Vue+高德地图api。
二、创建百度地图
1.创建vue项目
推荐使用vue-element-admin作为模板,这一步骤就不多阐述。
2.引入百度地图API文件
在index.html中引入。
要注意版本,不同版本的方法会有所不同,这里使用v3.0。<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的秘钥"></script>
config.js配置webpack,此操作是为了优化打包,减少体积。在externals中添加百度地图即可
3.创建容器
创建一个新的组件
<template> <div> <!-- 必须要设置div的高度 --> <div id="map" style="height: 810px;" /> </div> </template> <script> // 引入百度地图 import BMap from 'BMap' export default { name: '', data() { return { map: '', mapZoom: 14 } }, created() { this.$nextTick(() => { this.initMap() }) }, methods: { // 初始化 initMap() { // 创建Map实例 this.map = new BMap.Map('map') // 初始化地图,设置中心点坐标和地图级别 this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom) // 设置地图显示的城市 此项是必须设置的 this.map.setCurrentCity('成都') // 启用滚轮放大缩小,默认禁用 this.map.enableScrollWheelZoom(true) // 启用地图惯性拖拽,默认禁用 this.map.enableContinuousZoom(true) } } </script> <style> // 这个样式可以去除地图底部logo .anchorBL{ display:none; } </style>
这样简单的百度地图示例已经完成。
三、使用百度地图
1、基础操作
按照上述步骤已经对百度地图进行初始化,并把实例赋值给map,然后就可以使用this.map来调用百度地图的方法。
(1)事件
①点击事件
在初始化的方法中,加入事件即可。
this.map.addEventListener('click', (data) => { // point包含了经纬度 console.log(data.point) })
②地图缩放结束事件
this.map.addEventListener("zoomend", (type) => {})
(2)创建覆盖物(点、线、面)
// 创建一个自定义图片的点覆盖物 addMarker() { // 添加图片 var myIcon = new BMap.Icon("图片地址", new BMap.Size(50, 50)) // 创建点 var ponit = new BMap.Point(104.072242, 30.663711) // 创建标记 var marker = new BMap.Marker(ponit, {icon: myIcon}) // 在地图上添加点标记 this.map.addOverlay(marker) }
// 创建线覆盖物 addPolygon() { const point = [ new BMap.Point(116.387112, 39.920977), new BMap.Point(116.385243, 39.913063), new BMap.Point(116.394226, 39.917988), new BMap.Point(116.401772, 39.921364), new BMap.Point(116.41248, 39.927893) ] var polyline = new BMap.Polyline(point, { // 颜色 strokeColor: "blue", // 宽度 strokeWeight: 2, // 透明度 strokeOpacity: 0.5, }); }
效果图
(3)添加信息窗口
添加完点标记后,可以再设置一个信息窗口
// 接着上面代码 marker.addEventListener('click', () => { var opts = { width: 200, height: 150, title: '基本信息' } var html = `<div> <p>单位名称:${item.name}</p> <p>联系电话${item.contactInformation}</p> <p>单位地址:${item.enterpriseAddressDetails}</p> </div>` var infoWindow = new BMap.InfoWindow(html, opts) this.map.openInfoWindow(infoWindow, ponit) })
(4)清除覆盖物
①清除所有
removeOverlay() { this.map.clearOverlays() }
②清除指定
1.创建一个点,然后清除。removeOverlay方法的参数是一个覆盖物对象,想要清除多个时,需要用把覆盖物放在数组里,然后循环清除。注意new BMap.Marker()方法相当于每次创建了一个新的对象,所以并不能通过同一个坐标新建一个marker来删除之前的。
// 创建一个标记 var ponit = new BMap.Point(104.072242, 30.663711) var marker = new BMap.Marker(ponit) this.map.addOverlay(marker) // 清除一个标记 this.map.removeOverlay(marker)
其他覆盖物同理,比如创建一个圆,然后清除
var circle = new BMap.Circle(point, 2000, { fillColor: "blue", strokeWeight: 1, fillOpacity: 0.2, strokeOpacity: 0.3, }) this.map.addOverlay(circle) this.map.removeOverlay(circle)
2.发现有一些覆盖物用上述方法并不能删除,如路书中的icon。
const moveMarker = new BMap.Icon( img, { widht: 30, height: 36 }, { anchor: new BMap.Size(15, 36) } ); // 创建路书 const lushu = new BMapLib.LuShu(this.centerMap, point, { defaultContent: "标题", icon: moveMarker, // 米/秒 speed: 300, // 是否自动调整视野 autoView: false, // 是否开启走路旋转 enableRotation: false, landmarkPois: [], });
使用
this.map.addOverlay(moveMarker)
发现没有删除。我们可以通过自己加一些自定义属性来删除。const moveMarker = new BMap.Icon( img, { widht: 30, height: 36 }, { anchor: new BMap.Size(15, 36) } ); // 加入一个自定id并赋值 moveMarker.id = "123456"; // 创建路书 const lushu = new BMapLib.LuShu(this.centerMap, point, { defaultContent: "标题", icon: moveMarker, // 米/秒 speed: 300, // 是否自动调整视野 autoView: false, // 是否开启走路旋转 enableRotation: false, landmarkPois: [], }); // 获取当前地图上所有的覆盖物 const overlays = this.map.getOverlays(); overlays.forEach((item) => { // 循环寻找上面添加的指定id(属性较多,而且可能不一定是K这个变量,需要仔细找一下) if (item.K && item.K.Be && item.K.Be.id === "123456") { this.map.removeOverlay(item); } });
(5)地址逆解析
const geoc = new BMap.Geocoder() const ponit = new BMap.Point(104.072242, 30.663711) geoc.getLocation(ponit, (res) => { console.log(res.address) })
2、控件
(1)城市控件
通过搜索城市名称,然后定位所选城市
// 创建城市选择控件 const cityControl = new BMap.CityListControl({ /* 控件的停靠位置(可选,默认左上角) BMAP_ANCHOR_TOP_RIGHT 右上角 BMAP_ANCHOR_BOTTOM_LEFT 左下角 BMAP_ANCHOR_BOTTOM_RIGHT 右下角 */ anchor: BMAP_ANCHOR_TOP_LEFT, // 控件基于停靠位置的偏移量(可选) offset: new BMap.Size(10, 5) }) // 将控件添加到地图上 this.map.addControl(cityControl)
效果如图
(2)地址检索
在地图初始化的时候添加一个地址检索
<!-- 地图容器 --> <div id="caseMap" style="width: 100%; height: 370px" /> <!-- 检索地址容器 --> <div id="r-result" style="float: left; margin-top: -370px"> <el-input style="width: 350px" size="mini" type="text" id="suggestId" v-model="city" > <template slot="prepend">请输入:</template> </el-input> </div>
initMap() { const self = this // 创建Map实例 this.map = new BMap.Map('map') // 初始化地图,设置中心点坐标和地图级别 this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom) // 设置地图显示的城市 此项是必须设置的 this.map.setCurrentCity('成都') // 启用滚轮放大缩小,默认禁用 this.map.enableScrollWheelZoom(true) // 启用地图惯性拖拽,默认禁用 this.map.enableContinuousZoom(true) //建立一个自动完成的对象 var ac = new BMap.Autocomplete({ // 输入框的id input: "suggestId", location: this.map, }) ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件 }) ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; // 拼装的地址信息 var myValue = _value.province + _value.city + _value.district + _value.street + _value.business; self.setPlace(myValue); }) } setPlace(e) { const self = this; this.map.clearOverlays(); //清除地图上所有覆盖物 // 创建一个检索对象 var local = new BMap.LocalSearch(self.map, { //智能搜索 onSearchComplete: function () { var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 // 获取的经纬度根据自己业务赋值 // self.dataForm.address = e; // self.dataForm.longitude = pp.lng; // self.dataForm.latitude = pp.lat; self.map.centerAndZoom(pp, 18); self.map.addOverlay(new BMap.Marker(pp)); //添加标注 }, }); local.search(e); },
效果图
Tip如果是在<el-dialog />
组件中使用搜索时,需要注意搜索提示会没有,这是因为被挡住了。我们通过F12是可以看到的。这时候就需要把提示框的z-index设置大一些就行了。
.tangram-suggestion-main { z-index: 9999; }
3、线路规划
(1)步行线路规划
<!-- 放搜索结果 --> <div id="r-result" style="position: fixed; top: 100px; right: 5px"></div>
var walking = new BMap.WalkingRoute(this.centerMap, { renderOptions: { map: this.centerMap, /* * 这里是百度地图的检索路线结果面板,在html中写一个div用于展示,panel的值为div的id。 * 有些时候我们可能不需要过多的信息,这时可以用onSearchComplete方法自定义一个面板。 */ panel: "r-result", // 是否选择第一个检索结果 selectFirstResult: true, // 检索结束后是否自动调整地图视野 autoViewport: true }, // 检索完成后回调 onSearchComplete: function(results){ if (walking.getStatus() != BMAP_STATUS_SUCCESS){ return } // 获取第一个路线 var plan = results.getPlan(0) // 获取时间 plan.getDuration(true) // 获取距离 plan.getDistance(true) } }) var start = new BMap.Point(116.310791, 40.003419) var end = new BMap.Point(116.326419, 40.003519) walking.search(start, end)
效果图
(2)驾车路线规划
代码跟步行类似,只需把new BMap.WalkingRoute()换成new BMap.DrivingRoute()即可。
4、覆盖物
(1)轨迹运动——路书
1.首先在index.html页面引入路书js文件
<script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
2.创建路书
// 假设points是从后端请求的经纬度数据 const points = [ {lng: 116.387112, lat: 39.920977}, {lng: 116.385243, lat: 39.913063}, ..... ] const point = [] points.forEach(item => { point.push(new BMap.Point(item.lng, item.lat)) } // 添加线覆盖物当做路线 var polyline = new BMap.Polyline(point, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, }); this.centerMap.addOverlay(polyline); // this.centerMap 创建的地图实例 // point 坐标数组,必须是用new BMap.Point()创建的坐标数组 // opts 自定义设置 var lushu = new BMapLib.LuShu(this.centerMap, point, { // 标题 defaultContent: "运动轨迹", // 图标 icon: "", // 速度,单位米/秒 speed: 300, // 是否自动调整视野 autoView: true, // 是否开启走路旋转 enableRotation: true, // 特殊点信息。如果没有特殊点直接放个空数组也可以,不设置参数貌似会报错 landmarkPois: [], }); lushu.start();
3.方法
// 启动运动 lushu.start(); // 暂停运动 lushu.pause(); // 结束运动 lushu.stop();
效果图
5、工具库
(1)点聚合
①添加
当点的数量过多时,会造成浏览器卡顿,使用点聚合可以有效解决该问题。点聚合的使用也很简单,首先在index页面引入点聚合工具开源库的文件
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
使用
// 模拟一些点 const markers = [ new BMap.Marker(new BMap.Point(116.387112, 39.920977)), new BMap.Marker(new BMap.Point(116.385243, 39.913063)), new BMap.Marker(new BMap.Point(116.394226, 39.917988)), new BMap.Marker(new BMap.Point(116.401772, 39.921364)), new BMap.Marker(new BMap.Point(116.41248, 39.927893)), ] // markerClusterer是点聚合工具的对象,全局使用。this.map是地图对象 this.markerClusterer = new BMapLib.MarkerClusterer(this.map, { markers: markers, });
效果
放大后可展示具体点位
②清除
// 清除所有 this.markerClusterer.clearMarkers() // 清除一个marker this.markerClusterer.removeMarker(marker) // 清除多个,这时候参数为marker数组 this.markerClusterer.removeMarkers(markers)
(2)热力图
①引入js
<script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
②使用
this.heatmapOverlay = new BMapLib.HeatmapOverlay({ radius: 20, }); this.map.addOverlay(this.heatmapOverlay); // point数据格式,lat纬度,lng经度,count热力值,就算为1好像页面上也会自动显示热力层级 // 假设从后端取回数据result result.forEach(item => { point.push({ lat: item.latitude, lng: item.longitude, count: 1, }); }) this.heatmapOverlay.setDataSet({ // 热力值的最大值 max: 5, // 热力图的详细数据 data: point, }); this.heatmapOverlay.show(); // 隐藏 this.heatmapOverlay.hiden(); // 删除 this.map.removeOverlay.(this.heatmapOverlay);
四、其他
(1)坐标转换
(1)使用百度地图自带的方法进行转换坐标转换文档
var x = 116.32715863448607 var y = 39.990912172420714 var convertor = new BMap.Convertor() var pointArr = [] var ggPoint = new BMap.Point(x,y) pointArr.push(ggPoint) convertor.translate(pointArr, 3, 5, function(data) { if(data.status === 0) { // 业务代码 } })
translate方法的第一个参数为Point类型的数组,第二个参数是源坐标类型,第三个参数是目标坐标类型,第四个是回调函数(坐标类型在文档中有详细说明)。
需要注意的是方法在批量转换坐标时是有上限的,这里推荐使用coordtransform模块,用法很简单。
先用npm安装npm install coordtransform,创建一个js工具类,引入coordtransform就可以使用了。import coordtransform from 'coordtransform' // 火星坐标转百度经纬度坐标 export function gcj02tobd09(x, y) { return coordtransform.gcj02tobd09(x, y) }
-
winform C# 实现百度地图
2013-07-03 09:51:50用winfor的webBrowser空件,利用js与Winform之间互相调用方法的技术,来实现。 -
百度地图,定位自己+地图显示(在地图上显示自己当前位置,并覆盖自己的位置)
2014-04-13 15:54:32找了很久都没找到现成的简单的例子 就想把自己的位置显示在百度地图上连个DEMO都木有 好吧自己来 -
百度地图-个性化地图用法
2022-02-11 15:58:34 -
echarts 引入百度地图
2022-03-15 14:33:10echarts 引入百度地图 在写大数据相关的大屏中,会遇到需自定义定点图标的问题,这样就必须运用到echarts series的custom属性。 echarts百度地图 custom 属性的运用: 首先上效果图: 这样一个效果的地图,需要运用...