CSS的定位与地图

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 参数作为错误信息说明 。它包含了两个属性 codemessage

  • 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 方法用于获取当前的位置,它有两个参数 callbackoptions

  • 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类 创建实例化对象需要两个参数locationoptions

  • 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 方法可以根据范围和检索词发起范围检索,接收下列参数:

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

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);

效果如下:

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用 CSS 的 `shape-outside` 属性来绘制水滴状地图坐标。 首先,你需要创建一个水滴形状的 SVG 图像,然后将其作为背景图像应用于一个元素,并使用 `shape-outside` 属性来告诉浏览器如何调整文本的流动以适应这种形状。 例如,以下 CSS 代码展示了如何使用 `shape-outside` 属性将文本流动到一个水滴形状的背景图像中: ```css .drop { width: 200px; height: 200px; background-image: url('drop.svg'); shape-outside: url('drop.svg'); } ``` 注意,`shape-outside` 属性仅在部分浏览器中受支持,因此你可能需要使用浏览器前缀或提供不使用这个属性的替代方案。 ### 回答2: 要绘制水滴状地图坐标,可以使用CSS来实现。具体步骤如下: 1. 首先,在HTML中创建一个容器,可以使用`<div>`元素来作为容器,设置宽度和高度。 2. 使用CSS绘制水滴状的形状。可以通过`border-radius`属性设置一个大的圆角值来实现水滴的形状,示例代码如下: ``` div { border-radius: 50%; width: 100px; height: 120px; background-color: blue; } ``` 3. 接下来,需要添加定位属性以确定水滴在地图上的位置。可以使用`position`属性将水滴定位地图上的特定坐标点。 ``` div { position: absolute; top: 100px; left: 200px; } ``` 在上述代码中,通过设置`top`和`left`属性的值来确定水滴在地图上的具体位置。 4. 如果需要在水滴内显示文本或者图标,可以使用内嵌的HTML元素,例如`<span>`或`<i>`来实现。然后通过设置内嵌元素的位置来确定文本或图标的位置。 ``` <div> <span>1</span> </div> ``` ``` span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); // 将文本居中显示 } ``` 以上就是使用CSS绘制水滴状地图坐标的基本步骤。可以根据需要灵活调整属性值,适应不同的设计要求。 ### 回答3: 要使用CSS绘制水滴状的地图坐标,我们可以利用CSS的伪元素和一些基本的形状属性来实现。 首先,我们可以创建一个容器元素,例如一个div元素,并给它设置一个合适的宽度和高度。然后,使用CSS的border-radius属性将容器元素设置为一个圆形。 接下来,我们可以使用CSS的伪元素::before和::after来绘制水滴状的下半部分。对于::before伪元素,设置它的宽度为容器大小的一半,高度为容器高度的一半,并使用border-radius属性将其设置为一个半圆形。然后,将其定位到容器底部,并旋转180度,以使其成为水滴的下半部分。 对于::after伪元素,设置它的宽度和高度分别为容器大小的一半和一半减去边框的宽度,使用border-radius属性将其设为一个半圆形。然后,将其定位到容器顶部,使其成为水滴的上半部分。 最后,我们可以利用CSS的背景属性和颜色属性来设置水滴的颜色和样式。可以使用渐变颜色效果来增加水滴的真实感,并使用box-shadow属性添加阴影效果,使水滴看起来更加立体。 综上所述,通过使用CSS的基本形状属性、伪元素、背景属性和阴影效果,我们可以轻松地绘制出水滴状的地图坐标。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值