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

简介: 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)
       }
目录
相关文章
|
26天前
|
前端开发 开发者 容器
|
2月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
46 0
|
7天前
|
前端开发 JavaScript
HTML深度解析:更改文本颜色
【4月更文挑战第1天】
28 0
HTML深度解析:更改文本颜色
|
18天前
|
数据安全/隐私保护
HTML表单(Form)常用控件
HTML表单(Form)常用控件。
12 1
|
1月前
HTML文本内容标签
HTML文本内容标签
|
1月前
|
存储 移动开发 编解码
html5的新特性详解
HTML5是构建和呈现互联网内容的语言描述方式,HTML5在HTML4的基础上增加了许多新特性,使其更具语义化、更加标准化,同时也提高了用户体验和开发效率。以下是HTML5的部
|
1月前
|
Web App开发 iOS开发
编程笔记 html5&css&js 026 HTML输入类型(2/2)
编程笔记 html5&css&js 026 HTML输入类型(2/2)
|
1月前
|
移动开发 数据安全/隐私保护 HTML5
编程笔记 html5&css&js 025 HTML输入类型(1/2)
编程笔记 html5&css&js 025 HTML输入类型(1/2)
|
1月前
编程笔记 html5&css&js 007 HTML文本:段落和格式
编程笔记 html5&css&js 007 HTML文本:段落和格式
|
1月前
编程笔记 html5&css&js 006 HTML文本:标题
编程笔记 html5&css&js 006 HTML文本:标题