HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(下)

本文涉及的产品
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
简介: HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)

HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(上):https://developer.aliyun.com/article/1420270


百度地图_改变控件位置



控制控件位置


初始化控件时,可提供一个可选参数,是一个json对象,里面有 个属性 anchor 表示控件的停靠位置,即控件停靠在地图的哪个角。当地图尺寸发生变化时,控件会根据停靠位置的不同来调整自己的位置 。

var scaleCtrl= new BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT})
//实例化控件的时候可以传递一个可选参数,为一个json
map.addControl(scaleCtrl)


控件位置偏移


除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。 通过 offset 设置。

var scaleCtrl= new BMapGL.ScaleControl({
           anchor:BMAP_ANCHOR_TOP_RIGHT,
           //offset为一个Size的实例,接受的俩个参数分别代表水平方向距离跟垂直方向距离
           offset:new BMapGL.Size(10,10)
       })
map.addControl(scaleCtrl)//添加比例尺控件


百度地图_添加覆盖物



所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。


添加覆盖物map.addOverlay(覆盖物实例)


添加点(标注点)


       使用的类: Marker

var point = new BMapGL.Point(116.404,39.915);  
var marker = new BMapGL.Marker(point);
// 创建标注点  
map.addOverlay(marker);// 将标注添加到地图中


添加多边形


       使用的类: Polygon

var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
   ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
 map.addOverlay(polygon);


删除覆盖物map.removeOverlay(具体覆盖物实例) 或者 map.clearOverlays()

var overlays = map.getOverlays()//获取地图的所有覆盖物
map.removeOverlay(overlays[0])//删除对应的覆盖物
//map.clearOverlays()//删除地图上所有的覆盖物


监听覆盖物事件


overlay.addEventListener('事件名称',callback)

marker.addEventListener("click",
function(e){  
    console.log(e)
});


百度地图_自定义标注图标



1、定义标注图标


Icon(url: String, size: Size , opts: IconOptions)

url :指定图标要使用的图片路径

size :指定放置图标的区域大小

opts :指定关于图标的位置的一些参数

var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(50, 50), //指定放置图标区域的大小
 {  
   //指定地理点跟图标左上角的相对偏移量
    anchor: new BMapGL.Size(10, 25),    
});


2、使用自定义的标注图标创建标注点

// 创建标注对象并添加到地图  
var marker = new BMapGL.Marker(point, { icon: myIcon });
map.addOverlay(marker);


百度地图_添加文本标注



添加文本标注


使用的类: Label

var point = new BMapGL.Point(116.404,39.915);
var content = "label";
var label = new BMapGL.Label(content, { //创建文本标注
    position: point,      // 设置标注的地理位置
    offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
 })  
    map.addOverlay(label);


修改文本标注的样式

label.setStyle({        // 设置label的样式
    color: '#000',
    fontSize: '30px',
    border: '2px solid #1E90FF'
})


百度地图_正/逆地址解析



1 、获取地址解析器


new BMapGL.Geocoder()


2 使用地址解析器


地址解析:根据地址描述获得该位置的地理经纬度坐标


Geocoder.getPoint(具体地址,callback)

// 创建地址解析器实例
var geocoder = new BMapGL.Geocoder()
//通过具体地址获得该地址对应的地理位置的经纬度坐标,并进行使用
geocoder.getPoint('北京市清华大学',function(p){
     console.log(p)
     map.centerAndZoom(p,15)
     var marker=new BMapGL.Marker(p)
     map.addOverlay(marker)        
},'北京市')


在调用 Geocoder.getPoint() 方法时您需要提供地址解析所在的城市。


逆地址解析:根据经纬度坐标点获得该地点的地址描述


Geocoder.getLocation(Point,callback)

map.addEventListener('click',function(e){
            console.log(e)
     //根据地理经纬度坐标获取具体地址信息
          geocoder.getLocation(e.latlng,function( result){
                console.log(result)
           })
       })


百度地图_信息窗口



使用的类: InfoWindow

        map.addEventListener('click', function (e) {
            geocoder.getLocation(e.latlng, function (result) {
           var str='当前地址为:'+result.address
           //实例化信息窗口
           var infowindow = new BMapGL.InfoWindow(str, {
              width: 100,//信息窗口宽度
              height: 50,//信息窗口高度
              title: '提示'//信息窗口标题
           })
            // 在地图上打开信息窗口
            map.openInfoWindow(infowindow, e.latlng)
           })
 })


同一时刻只能有一个信息窗口在地图上打开


百度地图_规划驾车路线



1 创建驾车导航实例


DrivingRoute(location,options)


2 使用实例发起检索


DrivingRoute.search(start,end)

      // 创建驾车导航的实例
        var driving = new BMapGL.DrivingRoute(map,
           {   //设置结果呈现
                renderOptions: { map: map, autoViewport: true },
                //检索完成后的回调函数
                onSearchComplete: function (result) {
                    console.log(result)
               }
           })
        //获取地址解析器
        var geocoder = new BMapGL.Geocoder()
        var startPoint, endPoint;
       document.querySelector('#start').onblur = function (e) {
            // 获取起点的坐标
           geocoder.getPoint(e.target.value, function (p) {
                startPoint = p
           })
       }
       document.querySelector('#end').onblur =  function (e) {
            //获取终点的坐标
        geocoder.getPoint(e.target.value, function (p) {
                endPoint = p
           })
       }
      document.querySelector('#search').onclick = function () {
            //发起检索
            driving.search(startPoint, endPoint)
       }
目录
打赏
0
0
0
0
56
分享
相关文章
HTML5标签的类型
HTML5标签的类型。
103 5
Twaver-HTML5基础学习(15)形状连线(ShapeLink)四种类型(直线、正交、二次贝塞尔、三次贝塞尔)
本文介绍了Twaver HTML5中的形状连线(ShapeLink),包括如何使用它以及如何添加控制点。文章详细解释了ShapeLink支持的四种连线类型:直线(lineto)、正交(orthogonalto)、二次贝塞尔曲线(quadto)和三次贝塞尔曲线(cubicto),并通过示例代码展示了如何在React组件中创建和配置ShapeLink。
77 3
|
3月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
67 1
利用html2canvas插件自定义生成名片信息并保存图片
HTML5 新的 Input 类型6
`<input type="url">` 用于需要输入 URL 的表单字段,浏览器会自动验证输入是否为有效网址
HTML5 新的 Input 类型5
HTML5 引入了多种新的输入类型,以增强用户体验和数据验证。`<input type="tel">` 用于输入电话号码;`<input type="time">` 允许用户选择时间(不带时区);`<input type="url">` 用于输入网址,支持自动验证。这些输入类型在不同浏览器中的支持情况有所不同,但大多数现代浏览器均能良好支持。例如,在 iPhone 的 Safari 浏览器中,使用 `url` 类型时,键盘会特别显示 `.com` 按钮以方便输入。
HTML5 新的 Input 类型2
`<input>` 标签提供多种类型以满足不同需求:`datetime` 类型用于选择 UTC 时间的日期和时间;`datetime-local` 类型用于选择不带时区的日期和时间;`email` 类型则确保输入的是有效的电子邮件地址,适用于需要收集用户邮箱信息的场景。
HTML5 新的 Input 类型3
`<input type="month">` 允许用户选择一个月份,适用于需要指定月份和年的场景。示例:生日 (月和年)。 `<input type="number">` 用于需要数值输入的场合,可设置数值范围等限制。示例:数量 (1 到 5 之间)。支持 `disabled`, `max`, `min` 等属性以增强功能。
HTML5 新的 Input 类型1
HTML5引入了多种新的输入类型,如color、date、email等,增强了表单的输入控制与验证功能。尽管并非所有浏览器都完全支持,但这些新类型仍可在主流浏览器中使用,不支持时会退化为普通文本输入。例如,`<input type="color">`允许用户通过颜色选择器选取颜色,而`<input type="date">`则提供了一个日期选择器来方便用户选择日期。
HTML5 新的 Input 类型4
`range` 类型的输入域用于需要在一定范围内选择数值的情况,通常以滑动条形式展示。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等