本周的学习记录

最新推荐文章于 2024-06-15 17:39:26 发布

我永远喜欢悉达凯隐

最新推荐文章于 2024-06-15 17:39:26 发布

阅读量71

点赞数

文章标签： angular

本文链接：https://blog.csdn.net/KaynSweety/article/details/124015867

版权

一、继续学习Angular Material

新建项目，cd到项目中，使用ng add@angular/material 安装material库
在这里插入图片描述
选项全部选择默认项，安装成功后即可使用
1.尝试导入一个简单的按钮

这是一个按钮相关的代码，color中选择对应颜色，可以在官网中查看不同颜色对应的英文代码，后面写按钮代表的文字，这里就简单的尝试了一下
而后在app.module.ts中引入
在这里插入图片描述
运行可以看到效果1
2.尝试导入简单的日期选择

运行效果：

项目用的实时数据，这个应该没什么用
新建组件
ng g component device

在根组件中直接调用

上方导航栏制作

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
...
imports: [
   ...
    MatToolbarModule,
    MatIconModule
]

在这里插入图片描述

（丑的很有特色）
这时就可以给导航栏添加跳转路径
为button添加组件路径

二、关于在项目中引入地图

最后在qige.io学习到了引入地图的方法


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML5地理位置定位</title>
    <!--引入Google或Sougo地图库-->
    <!--<script src="https://maps.google.com/maps/api/js?sensor=false"></script>-->
    <script src="https://api.go2map.com/maps/js/api_v2.5.1.js"></script>
    <script type="text/javascript">
        function loadMap(){
            if(navigator.geolocation){
                document.getElementById("status").innerHTML = "获取数据中...";
                navigator.geolocation.getCurrentPosition(onSuccess, onError, {timeout: 5000});
            }else{
                document.getElementById("status").innerHTML = "浏览器不支持！";
            }
        }
        //        执行成功的回调方法
        function onSuccess(position){
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
//            生成经纬度组合数据
//            var latlon=new google.maps.LatLng(latitude,longitude);
            var latlon = new sogou.maps.LatLng(latitude, longitude);
//            选择元素
            var mapholder=document.getElementById('mapholder');

            //选项：中心、放大、地图类型、控制按钮
            var myOptions={
                center:latlon,
                zoom:14,
//                mapTypeId:google.maps.MapTypeId.ROADMAP,
                mapTypeId:sogou.maps.MapTypeId.ROADMAP,
                mapTypeControl:true
            };
//            以选项在页面指定位置生成地图
//            var map=new google.maps.Map(mapholder,myOptions);
            var map = new sogou.maps.Map(mapholder,  myOptions);
            document.getElementById("status").innerHTML = "Sogou地图";
//            生成标注
//            var marker=new google.maps.Marker({position:latlon,map:map, title:"您在这儿"});
            var marker = new sogou.maps.Marker({position:latlon, map:map, title:"您在这儿"});
            //创建标注窗口
//            var infowindow = new google.maps.InfoWindow({
//                content:"您在这里<br/>纬度："+ latitude + "<br/>经度：" + longitude
//            });
            var infoWindow = new sogou.maps.InfoWindow({
                content:"您在这里<br/>纬度："+ latitude + "<br/>经度：" + longitude
            });
            //显示标注窗口
            infoWindow.open(map,marker);
        }
        //        失败时的回调方法
        function onError(error){
            var status = document.getElementById("status");
            switch(error.code){
                case error.PERMISSION_DENIED:
                    status.innerHTML = "用户不允许！"; break;
                case error.POSITION_UNAVAILABLE:
                    status.innerHTML = "地理信息数据不可用！使用我家的固定坐标数据。";
                    display();
                    break;
                case error.TIMEOUT:
                    status.innerHTML = "获取地理信息数据超时！使用我家的固定坐标数据。";
                    display();
                    break;
                default :
                    status.innerHTML = "发生未知错误！"; break;
            }
        }
        function display(){
            var myLatlng = new sogou.maps.LatLng(29.502782699999997,106.57155259999999);
            var myOptions = {
                zoom: 14,
                center: myLatlng,
                mapTypeId: sogou.maps.MapTypeId.ROADMAP
            };
            map = new sogou.maps.Map(document.getElementById("mapholder"), myOptions);
            marker = new sogou.maps.Marker({position:myLatlng, map:map, title:"我的家"});
        }
    </script>
</head>
<body onload="loadMap()">
    <h1>HTML5位置定位示例</h1>
    <p id="status"></p>
    <div id="mapholder" style="width:900px;height: 500px"></div>
</body>
</html>

在这里插入图片描述
虽然成功引入了地图，不过没有成功的放进地图组件中，后面还需要再改进。

后面继续学习了material其他的树状图菜单，可以应用于制作侧边的伸缩栏。

三、下周计划

学习组件的灵活嵌套和登陆界面的跳转

我永远喜欢悉达凯隐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本周的学习记录

一、继续学习Angular Material新建项目，cd到项目中，使用ng add@angular/material 安装material库选项全部选择默认项，安装成功后即可使用1.尝试导入一个简单的按钮这是一个按钮相关的代码，color中选择对应颜色，可以在官网中查看不同颜色对应的英文代码，后面写按钮代表的文字，这里就简单的尝试了一下而后在app.module.ts中引入运行可以看到效果12.尝试导入简单的日期选择运行效果：项目用的实时数据，这个应该没什么用新建组件ng
复制链接

扫一扫