百度地图，拖动地图，定位marker固定在屏幕中心位置

最新推荐文章于 2023-07-13 14:50:50 发布
最新推荐文章于 2023-07-13 14:50:50 发布
阅读量4.8k 收藏 3
点赞数 1
文章标签： javascript 移动开发 java ViewUI
原文链接：https://segmentfault.com/a/1190000017984406
版权
本文介绍如何在百度地图中实现拖动地图时，marker始终保持在屏幕中心位置的效果，通过CSS定位实现，但需注意浏览器窗口尺寸变化时的适配问题。
摘要由CSDN通过智能技术生成

注：高德地图相同效果官方demo

以下为百度地图相关效果图：

注：该例子主要思路是将覆盖物（marker）通过css定位上去的，但是存在一个问题，当浏览器窗口宽度改变时，覆盖物会自动定位到地图中心位置，但是地图可能不会。

图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>map</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的api key"></script>
    <style type="text/css">
最低0.47元/天 解锁文章
weixin_33711641
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
动态设置高德地图中心点（坐标点），始终位于屏幕中心
u014050788的专栏
05-15 3万+
项目需求是做一个类似于滴滴的车辆救援，界面是地图上面再覆盖一部分表单。订单状态不同，表单里的信息不同，那么表单的高度就不同。因为界面都使用到了map，所以尽管订单有不同的状态，但是我都在一个界面做，通过状态变化来控制表单的显示状态。但是有一个问题是，不同的订单状态因为表单高度不同，导致地图的定位坐标点可能不在可视区域的中心。特别是我使用了bottomsheet来实现抽屉式表单，地图和表单肯定是有部...
百度地图jsApi，地图拖动，中心定位图标不动，准确获取拖动过后中心定位图标所在位置
zhoufenguang的博客
04-19 8224
其实没什么好讲的，主要是地图上的地址位置与像素位置的一个转换，还有就是搞清楚百度地图像素坐标是如何定义的（自己研究下），下面直接上代码。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=de
android 百度地图滑动获屏幕中心坐标和显示当前地址信息
01-19
android 百度地图滑动获屏幕中心坐标和显示当前地址信息
Android基于百度地图的拖拽定位（地图可以拖动,定位图标不动）
马腾蛟的博客
01-25 7584
1、要做的效果是： 类似滴滴打车中的效果，即移动地图，marker始终在地图中央。如下图demo所示： 好吧，一不小心就暴露了我所在的城市… 2、我的思路是： 滴滴打车这种形式的就不是marker了。百度地图的marker是跟随着地图的移动而移动的。所以你就不能用marker来实现了。 你可以直接在xml布局上面添加一个居中显示的ImageView，用来显示图标。 然后在通过监听地图状态变化，获...
Android百度地图默认位置中心点设置
热门推荐
win的小屋
06-18 5万+
//初始化地图     MapView mMapView = (MapView) findViewById(R.id.map); BaiduMap mBaidumap = mMapView.getMap(); //设定中心点坐标          LatLng cenpt = new LatLng(29.806651,121.606983);          //定义地
百度地图api 获取当前位置并设置为地图中心点
weixin_34292924的博客
03-23 2698
2019独角兽企业重金招聘Python工程师标准>>> ...
百度地图api之固定标记点(标记点自己设置样式)
叶少翔
11-04 1万+
一.首先引入所申请的ak密钥 二.简单样式处理一下body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;}三.html代码布局//下面的代码是用来显示地图的四.js代码如下// 百度地图API功能var map = new BMap.Map("allmap");//设置中心点坐标--固定的位置--7号线大郊亭--金海
android百度地图定位跳转中心点,百度地图，拖动地图，定位marker固定在屏幕中心位置...
weixin_42342882的博客
05-26 1339
以下为百度地图相关效果图：注：该例子主要思路是将覆盖物(marker)通过css定位上去的，但是存在一个问题，当浏览器窗口宽度改变时，覆盖物会自动定位到地图中心位置，但是地图可能不会。maphtml{height:100%}body{height:100%;margin:0px;padding:0px}#container{height:100%}.mapicon{position: fixed;...
百度地图SDK for android marker不随地图的移动而移动（仿滴滴打车）
u010477502的专栏
08-30 7009
这个功能是参照滴滴打车 如何实现呢？        LatLng latLng = baiduMap.getMapStatus().target; //获取地图中心点
Android — 之百度地图定位+添加Mark+InfoWindow
man_help的博客
03-10 1万+
前言：　　新手上路，这几天在弄百度地图SDK的使用（吐槽 : 官网上的开发指南简直就是实力坑爹，可能是开发人员太忙，维护不及时吧），我对本次学习的要求也不高：能正常显示地图，能定位，能添加mark(覆盖物)，点击mark时能提示当前位置信息就行，再深的东西，以后有时间再去研究吧，毕竟新手还是欠火候。
百度地图API 安卓项目 实时获取地图中心点经纬度
weixin_38256472的博客
11-08 5588
记录百度地图API哪些坑 项目可以实时获取当前位置并且计算和某固定位置的距离，并显示在屏幕上方。 做项目时遇到的难点： 如何把覆盖物固定在屏幕中间，不随着地图的移动而移动如何获取地图中间位置的坐标/经纬度如何把两点之间的距离在textView中显示出来 首先第一点折腾了比较久，思维太僵硬了，只想着把覆盖物固定在地图中间，其实换个角度想，只要把覆盖物固定在屏幕中心点，不就可以让覆盖物
uniapp小程序拖动地图，标记物固定地图中心不动，展示拖动后的位置信息
weixin_59803648的博客
02-27 2311
小程序拖动地图，标记物固定地图中心不动
百度地图拖拽地图。中心点定位js
qq_36393035的博客
11-11 1125
百度地图 未删除前一次拖拽生成坐标点
百度地图jsapi在手机站里实现中心标注不随地图移动的效果
淘特
11-11 2419
本例实现类似百度外卖手机站上的地图功能，地图中间有个标注点，拖动地图时中间点不随地图移动，效果可以查看此网址：http://www.totcms.com/map/marker.htm 下面说一下实现原理： 1、主要使用了百度的自定义控件方法，这里实现不难，主要难的在于控件的居中定位。因为通过查找百度的类说明中，其中提供的定位仅有 ControlAnchor 此常量表示控件的定位
百度地图（webapi）实现地图拖动定位的功能
baijz435的博客
01-22 4635
需求：拖动地图根据中心点定位，根据定位显示附近的信息，搜索提示 利用到的api： 当前定位——geolocation.getCurrentPosition() 根据城市搜索关键字——BMap.LocalSearch() 根据经纬度搜索附近的位置信息——http://api.map.baidu.com/geocoder/v2/?ak=你的秘钥&amp;output=json&amp;pois...
android 百度地图 点击选中到最上层 置顶
wchcom的专栏
09-07 2103
android 百度地图 点击选中到最上层 置顶 marker.setToTop()
uniapp 高德地图 JS API 拖动地图,标记点在地图正中间
weixin_43962877的博客
07-13 742
【代码】uniapp 高德地图 JS API 拖动地图,标记点在地图正中间。
百度地图flutter插件 将所有marker显示在屏幕内
最新发布
07-15
你可以使用百度地图Flutter插件来将所有的标记（marker）显示在屏幕内。首先，你需要在Flutter项目中引入百度地图插件，可以在`pubspec.yaml`文件中添加如下依赖： ``` dependencies: flutter_baidu_map: ^x.x.x ``` 然后运行`flutter packages get`命令来获取插件。接下来，你可以在需要显示地图的页面中使用`BaiduMap`组件。在此组件中，你可以设置地图的中心点和缩放级别。 为了将所有的标记显示在屏幕内，你需要先获取所有标记的经纬度坐标。然后，使用`BaiduMapController`提供的`setViewport`方法来调整地图的视野范围，使得所有标记都能显示在屏幕内。示例代码如下： ```dart import 'package:flutter_baidu_map/flutter_baidu_map.dart'; class MapScreen extends StatefulWidget { @override _MapScreenState createState() => _MapScreenState(); } class _MapScreenState extends State<MapScreen> { BaiduMapController _mapController; List<LatLng> _markerCoordinates = [ LatLng(39.909187, 116.397451), // 假设有多个标记 LatLng(39.908724, 116.397456), LatLng(39.907372, 116.397951), // ... ]; @override Widget build(BuildContext context) { return Scaffold( body: BaiduMap( onCreated: (controller) { _mapController = controller; _adjustViewport(); // 在地图创建后调整视野范围 }, ), ); } void _adjustViewport() { if (_mapController != null && _markerCoordinates.isNotEmpty) { double minLat = _markerCoordinates[0].latitude; double maxLat = _markerCoordinates[0].latitude; double minLng = _markerCoordinates[0].longitude; double maxLng = _markerCoordinates[0].longitude; // 计算标记的最小和最大经纬度 for (LatLng coordinate in _markerCoordinates) { minLat = min(minLat, coordinate.latitude); maxLat = max(maxLat, coordinate.latitude); minLng = min(minLng, coordinate.longitude); maxLng = max(maxLng, coordinate.longitude); } // 调整地图视野范围 LatLngBounds bounds = LatLngBounds( southwest: LatLng(minLat, minLng), northeast: LatLng(maxLat, maxLng), ); _mapController.setViewport(bounds); } } } ``` 这样，地图将会自动调整视野，使得所有的标记都能显示在屏幕内。你可以根据需要修改标记的经纬度坐标和其他地图的参数。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值