CSS的定位与地图

布布-flex

于 2023-06-19 20:30:17 发布

阅读量461

点赞数 2

分类专栏： CSS 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/luckyyulun/article/details/131294622

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 地理位置定位 Geolocation

Geolocation 接口是一个用来获取设备地理位置的可编程的对象，它可以让Web内容访问到设备的地理位置，这将允许Web应用基于用户的地理位置提供定制的信息。简单来说：Geolocation 就是用来获取到当前设备的 经纬度(位置)

1.1 如何获取地理定位

我们可以通过 navigator 获取到 geolocation 位置对象

var Geolocation = navigator.geolocation;
console.log(Geolocation);//得到一个位置对象 Geolocation {}

Geolocation 对象本身不包含任何属性和方法。所以我们看到的是一个空对象，但在他的原型上包含了下列三个方法，通过这三个方法我们可以获取当前所在的经纬度，监听当前设备的移动，以及移出监听

Geolocation.getCurrentPosition()
Geolocation.watchPosition()
Geolocation.clearWatch()

注意：这三个方法只在https协议下有效，浏览器不允许不被信任的网站调用涉及用户隐私信息的api。

1.2 获取设备当前所在的经纬度

我们可以通过调用 Geolocation 对象的 getCurrentPosition 方法来获取当前设备所在的经纬度,该方法需要三个参数:

success 成功得到位置信息时的回调函数，使用Position 对象作为唯一的参数。
error 可选参数获取位置信息失败时的回调函数，使用 PositionError 对象作为唯一的参数。
options 可选参数一个可选的PositionOptions 对象。（稍后会解释这个对象的用处）

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('你当前的位置在:');
  console.log('经度 :' + crd.longitude);
  console.log('纬度 :' + crd.latitude);
};

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

navigator.geolocation.getCurrentPosition(success, error, options);

1.2.1 成功回调

success 方法使用Position 对象作为唯一的参数。它包含了两个属性 coords 和 timestamp

coords 表示地理状态，我们所需要的经纬度就从它里边获取，还包含其他的位置信息，感兴趣的自行摸索
timestamp 表示获取到位置信息的时间戳

1.2.2 失败回调

error 方法接收一个 Error 参数作为错误信息说明。它包含了两个属性 code 和 message

code 返回错误码。可能拥有下列值：

- PERMISSION_DENIED 该页面没有获取地理位置信息的权限。
- PERMISSION_UNAVAILABLE 至少有一个内部位置源返回一个内部错误（可以理解为由于设备的问题获取位置失败）。
- TIMEOUT 获取地理位置超时

message 返回错误描述信息

1.2.3 PositionOptions 对象

该对象是获取位置信息的一些参数设置，如，是否采取高精度模式，是否设置超时时间等，它包含了三个参数

enableHighAccuracy （Boolean值）true 表示返回设备能获取到的最精确的位置，默认为false
timeout （数值型，单位是毫秒）获取位置信息的超时时间，默认是 Infinity ，即一直等待直到获取到位置信息位置
maximumAge（数值型，单位是毫秒）是否允许返回单位时间内的缓存地址信息，默认是 0 ，即不适用缓存，获取实时位置信息

1.3 监听设备位置改变

watchPosition 用来创建一个监听设备位置信息改变的事件。该方法会返回一个 Id

该方法的参数等同于 getCurrentPosition

var id, options;

function success(pos) {
  var crd = pos.coords;
	console.log('位置移动了，你当前的位置在:');
  console.log('经度 :' + crd.longitude);
  console.log('纬度 :' + crd.latitude);
}
function error(err) {
  console.warn('错误信息(' + err.code + '): ' + err.message);
}

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0
};

id = navigator.geolocation.watchPosition(success, error, options);

1.4 取消位置监听

clearWatch 方法用来取消位置监听 , watchPosition 方法返回的 Id 就是在这里使用;

// ...
id = navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch(id);
// ...

2. 引入第三方地图

以百度地图为例，演示如何引入第三方地图

2.1 创建应用及秘钥获取

登陆百度地图开发平台后打开控制台

选择应用管理分类下的我的应用

在 我的应用 中选择创建应用

然后按下图步骤填写相关信息即可创建一个地图应用，应用名称自己起名，类型分为服务端，小程序端，安卓，ios和浏览器端，这里根据需求选择浏览器端，然后填写允许访问的网址白名单，* 代表允许所有来源的网站访问，最后点提交就可以了

应用创建完成之后就自动生成了密钥，我们可以复制该密钥用于后续的使用

2.2 引入文件地图插件

在创建好应用之后就可以引入百度地图的文件，上一步获取到的密钥就是在这里使用

2.2.1 地图插件版本

百度地图 web端api 有两个大的版本，普通版和GL版，GL版比普通版多了3D展示效果

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=上一步获取到的密钥"></script> // 引入普通版地图
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=上一步获取到的密钥"></script>引入带有3D效果的地图

2.3 创建地图

地图插件会导出一个地图对象 BMapGl (3d版本的地图,2d导出的为BMap),我们所有的操作都是基于这个对象实现的

2.3.1 地图初始化

使用 BMapGL 的 Map 方法初始化地图，该方法需要一个元素id作为参数，并在该元素里创建地图

2.3.2 创建坐标点

使用 BMapGL 的 Point 方法创建一个地图的坐标点，接收两个参数（经度，纬度）

2.3.4 设置地图中心及放缩等级

使用 地图实例对象 的 centerAndZoom 方法设置地图的中心应该显示什么位置

该方法接收两个参数:

Point (Point 对象) 该点为地图要显示的中心店
zoom （number）设置地图的放缩等级

var map = new BMapGL.Map("container");          // 使用 Map 方法创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 使用 Pont 方法创建点坐标,通常该点应该获取当前所在的位置,这里设置的为天安门的位置
map.centerAndZoom(point, 15); // 使用 centerAndZoom 把point设置为地图的中心并且设置地图的放缩等级为15

2.4 坐标系转换类 Convertor

百度对外接口的坐标系并不是GPS采集的真实经纬度，在使用百度地图JavaScript API服务前，需先将非百度坐标通过坐标转换接口转换成百度坐标。

通过Convertor 类将GPS坐标转换为百度地图坐标

该类包含一个 translate 方法用来实现坐标转换

2.4.1 Convertor.translate

translate 方法需要四个参数, points, from, to, callback

points [Array] 表示需要转换的坐标点的集合，
from [number] 表示需要转换的坐标点所属的坐标系，1 表示WGS84坐标系，即通过GPS获取到的坐标
to [number] 表示需要转换之后所属的坐标系， 5 表示百度地图坐标系
callback 表示转换完成之后的回调函数，包含了两个参数 status 和 points

- status [number]状态码，0 表示转换成功
- points [Array] 转换之后的坐标点的集合

var x = 113.537764;
var y = 34.803291;
var ggPoint = new BMapGL.Point(x,y);// 以河南省电子商务产业园的坐标点为例

//地图初始化
var bm = new BMapGL.Map("allmap");
bm.centerAndZoom(ggPoint, 15);
bm.addControl(new BMapGL.NavigationControl());

//添加gps marker和label 覆盖物和文本提示后边会讲到
var markergg = new BMapGL.Marker(ggPoint);
bm.addOverlay(markergg); //添加GPS marker
var labelgg = new BMapGL.Label("未转换的GPS坐标（错误）",{offset:new BMapGL.Size(20,-10)});
markergg.setLabel(labelgg); //添加GPS label

//坐标转换完之后的回调函数
translateCallback = function (data){
  if(data.status === 0) {
    var marker = new BMapGL.Marker(data.points[0]);
    bm.addOverlay(marker);
    var label = new BMapGL.Label("转换后的百度坐标（正确）",{offset:new BMapGL.Size(20,-10)});
    marker.setLabel(label); //添加百度label
    bm.setCenter(data.points[0]);
  }
}

setTimeout(function(){
  var convertor = new BMapGL.Convertor();
  var pointArr = [];
  pointArr.push(ggPoint);
  convertor.translate(pointArr, 1, 5, translateCallback)
}, 1000);
</script>

效果图如下：

2.5 地图控件

百度地图提供了控件来实现地图中一些常用的功能

2.5.1 控件类别

控件名	控件作用
ScaleControl	放缩控件
ZoomControl	比例尺控件
NavigationControl3D	3D控件
LocationControl	定位控件
CityListControl	城市控件

2.5.2 创建及添加控件

通过 addControl 把控件添加到地图中

// ...
var ScaleControl = new BMapGL.ScaleControl();// 创建 放缩控件
var ZoomControl = new BMapGL.ZoomControl();// 创建 比例尺控件
var NavigationControl3D = new BMapGL.NavigationControl3D();// 创建 3D控件
var LocationControl = new BMapGL.LocationControl();// 创建 定位控件
var ScaleControl = new BMapGL.CityListControl();// 创建 城市控件
bm.addControl(ScaleControl);// 把放缩控件添加到地图里
bm.addControl(ZoomControl);// 把比例尺控件添加到地图里
bm.addControl(NavigationControl3D);// 把3D控件添加到地图里
bm.addControl(LocationControl);// 把定位控件添加到地图里
bm.addControl(CityListControl);// 把城市控件添加到地图里
// ...

2.6 地图覆盖物

如果想要在地图上划出一片区域可以向其添加覆盖物

2.6.1 覆盖物分类

下表列举一些基础覆盖物

覆盖物名	覆盖物用处
Label	文本标注
Marker	图像标注
Polyline	折线叠加层
Polygon	多边形覆盖物
Circle	圆形覆盖物

2.6.2 创建及添加覆盖物

通过 地图实例对象 的 addOverlay 方法添加覆盖物

// 以Label为例
var opts = {
    position: new BMapGL.Point(116.2787, 40.0492), // 指定文本标注所在的地理位置
    offset: new BMapGL.Size(30, -30) // 设置文本偏移量
};
// 创建文本标注对象
var label = new BMapGL.Label('欢迎使用百度地图JSAPI GL版本', opts);
// 自定义文本标注样式
label.setStyle({
    color: 'blue',
    borderRadius: '5px',
    borderColor: '#ccc',
    padding: '10px',
    fontSize: '16px',
    height: '30px',
    lineHeight: '30px',
    fontFamily: '微软雅黑'
});
bm.addOverlay(label);

2.6.3 删除覆盖物

通过 地图实例对象 的 clearOverlays 方法删除覆盖物

bm.clearOverlays();

2.7 定位

百度地图开发平台提供了 浏览器定位 等方式

2.7.1 浏览器定位 Geolocation类

服务类中的 Geolocation类 会返回用户当前的位置，如果用户拒绝授权定位，则无法返回任何定位结果。

2.7.2 Geolocation.getCurrentPosition

Geolocation类 的 getCurrentPosition 方法用于获取当前的位置,它有两个参数 callback 和 options

callback 是定位完成之后（包括成功、失败、超时等情况）的回调函数，定位结果 result 作为参数传入callback，result 包含了三个参数

- point 适用于百度地图的坐标点
- accuracy 定位精度，单位米
- address 根据定位坐标点解析出的地址信息，可能为空（3.0新增）

options 是定位时设置的参数，可以设置enableHighAccuracy是否采取高精度定位和 timeout 定位超时时间等参数。

var geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function (r) {
  if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    var mk = new BMapGL.Marker(r.point);
    bm.addOverlay(mk);
    bm.panTo(r.point);// 将地图的中心点设置为 point
    alert('您的位置：' + r.point.lng + ',' + r.point.lat);
  }
  else {
    alert('failed' + this.getStatus());
  }
});

2.8 关键字搜索

百度地图api 提供了LocalSearch类 用于位置检索、周边检索和范围检索。

2.8.1 创建搜索类

LocalSearch类 创建实例化对象需要两个参数location 和 options

location (Map实例 | Point 点坐标 | String 城市名) 表示检索区域,检索位置由当前地图中心点确定，并支持调整地图视野层级；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行,搜索结果的标注将自动加载到地图上
options 可选参数,设置搜索内容如何显示，及检索完成后的回调函数，详情参考百度地图LocalSearchOptions类

var local = new BMapGL.LocalSearch(bm, {
  renderOptions:{map: bm}
});

2.8.2 周边检索

searchNearby 方法可以根据范围和检索词发起范围检索，接收下列参数：

keywords 要搜索的关键字
center （string 城市名 | Point 坐标点）检索的中心位置，写城市名时检索半径将被忽略
radius (number) 检索半径

在河南省电子商务产业园附近300m范围内搜索 "超市";

var mPoint = new BMapGL.Point(113.549724,34.80868);  
var circle = new BMapGL.Circle(mPoint,300,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
bm.addOverlay(circle);
var local =  new BMapGL.LocalSearch(bm, {renderOptions: {map: bm, autoViewport: false}});  
local.searchNearby('超市',mPoint,300);

效果如下：

2.8.3 矩形范围内搜索

searchNearby 方法可以根据范围和检索词发起范围检索，接收下列参数：

keywords 要搜索的关键字
bounds（Bounds 对象）表示搜索范围的矩形区域（创建矩形区域参考百度地图创建矩形区域 ;

在河南省电子商务产业园园区内搜索 "超市";

var pStart = new BMapGL.Point(113.547613,34.807553);
var pEnd = new BMapGL.Point(113.552769,34.809243);
var bs = new BMapGL.Bounds(pStart, pEnd);   //自己规定范围

var local =  new BMapGL.LocalSearch(bm, {renderOptions: {map: bm, autoViewport: false}});  
local.searchInBounds("超市", bs);

var polygon = new BMapGL.Polygon([
  new BMapGL.Point(pStart.lng, pStart.lat),
  new BMapGL.Point(pEnd.lng, pStart.lat),
  new BMapGL.Point(pEnd.lng, pEnd.lat),
  new BMapGL.Point(pStart.lng, pEnd.lat)
], {strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5,fillColor:"blue",fillOpacity:0.1});
bm.addOverlay(polygon);

效果如下：

布布-flex

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS的定位与地图

CSS的定位与地图Geolocation接口是一个用来获取设备地理位置的可编程的对象，它可以让Web内容访问到设备的地理位置，这将允许Web应用基于用户的地理位置提供定制的信息。简单来说：Geolocation就是用来获取到当前设备的经纬度(位置)
复制链接

扫一扫

专栏目录