文章作者：激萌の小宅

促销：￥0

价格：￥0

配送方式：购买后立即生效（如购买异常，请联系站长）

付款之后一定要等待自动跳转结束，否则购买可能会失败

0 天

有效期
0

总销量
0

累计评价

详细说明

<h1 style="white-space: normal; margin: 0px 0px 10px; padding: 0px; list-style: none; border: 0px; font-size: 2.1em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; line-height: 1.1; ">添加百度地图页面 - (第三讲)</h1> 视频讲解如下：<embed src="//player.bilibili.com/player.html?aid=689143647&bvid=BV1Nm4y1P7fK&cid=863885964&page=1&high_quality=1&danmaku=0" width="817" height="460" wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true"/> 工程源码下载：<a href="/Course?id=5631974000295" target="_blank" style="white-space: normal;">GPS定位系统系列教程源码下载</a> 百度地图定位网页可以参考C#系列博客：<a href="/Course?id=4594121000033" target="_blank">百度地图上显示GPS坐标</a> 我们最终要实现的功能是：当我们登录成功之后，能够跳转到地图页面，并且还能够退出系统，返回登录页面，当STM32 GPS设备上报GPS坐标时，地图能够实时显示坐标位置，实现最终的GPS定位。 <p style="margin-top: 0px; margin-bottom: 10px; padding: 0px; list-style: none; border: 0px; overflow-wrap: break-word; word-break: break-all; line-height: 1.5em; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgb(51, 51, 51); white-space: normal; ">1、前端页面演示<p style="margin-top: 0px; margin-bottom: 10px; padding: 0px; list-style: none; border: 0px; overflow-wrap: break-word; word-break: break-all; line-height: 1.5em; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgb(51, 51, 51); white-space: normal; ">        地图页面的添加方式和登录页面的添加方式一样的，需要先调试好一个能够正常访问的百度地图程序，我这里使用的是《百度地图上显示GPS坐标》章节的代码。对目录结构稍微调整了一下： <p style="margin-top: 0px; margin-bottom: 10px; padding: 0px; list-style: none; border: 0px; overflow-wrap: break-word; word-break: break-all; line-height: 1.5em; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgb(51, 51, 51); white-space: normal; "><img src="/upload/image/6379875459112459957736463.jpg" title="微信截图_20220914121152.jpg" alt="微信截图_20220914121152.jpg"/><p style="margin-top: 0px; margin-bottom: 10px; padding: 0px; list-style: none; border: 0px; overflow-wrap: break-word; word-break: break-all; line-height: 1.5em; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgb(51, 51, 51); white-space: normal; ">运行效果如下：<p style="margin-top: 0px; margin-bottom: 10px; padding: 0px; list-style: none; border: 0px; overflow-wrap: break-word; word-break: break-all; line-height: 1.5em; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgb(51, 51, 51); white-space: normal; "><img src="/upload/image/6379875460244216896839606.gif" title="map (1).gif" alt="map (1).gif"/><p style="margin-top: 0px; margin-bottom: 10px; padding: 0px; list-style: none; border: 0px; overflow-wrap: break-word; word-break: break-all; line-height: 1.5em; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgb(51, 51, 51); white-space: normal; "> 2、ASP.NET CORE中嵌入地图页面    嵌入方法和嵌入登录页面的方法是一样的，我这样就不再重复演示了。地图的css、js、jpg图片全部扔到对应的文件夹下，和登录页面的文件放在一起。同时我们再添加一个名为“Home”的目录用于放置我们的地图文件，对应的控制器也要加上，最终目录结构如下： <img src="/upload/image/6379875523067856271626547.jpg" title="QQ截图20220914122649.jpg" alt="QQ截图20220914122649.jpg"/> 然后再次启动我们的程序。手动填写访问地址：http://localhost:5223/home（在当前的地址后面加上“/home”），我们就能正常访问我们刚刚新增的地图页面了。<img src="/upload/image/6379875530818347128908941.jpg" title="QQ截图20220914122821.jpg" alt="QQ截图20220914122821.jpg"/> 到这里，我们主要用到的两个页面就添加完成了。