文章作者：激萌の小宅

促销：￥0

价格：￥0

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

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

0 天

有效期
0

总销量
0

累计评价

详细说明

<h1 style="font-size: 32px; font-weight: bold; border-bottom: 2px solid rgb(204, 204, 204); padding: 0px 4px 0px 0px; text-align: left; margin: 0px 0px 10px;">添加百度地图页面</h1><p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; list-style: none; border: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0.85); text-wrap-mode: wrap; ">参考视频如下，视频来源《<a href="http://www.bilibili996.com/Course?id=3289325000272" target="_blank" title="GPS定位系统-MVC-添加百度地图页面">GPS定位系统-MVC-添加百度地图页面</a>》<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; list-style: none; border: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0.85); text-wrap-mode: wrap; ">备注：视频中的部分操作可能会因为Visual Studio的版本差异有所不一样，总体操作流程都是一样的，请自行尝试。视频中采用的是安信可的A9G模块，和当前系列使用的EC-01G模块在AT指令上可能存在差异，这里以博客内容为主，视频主要是讲操作流程。<embed src="//player.bilibili.com/player.html?isOutside=true&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"/> <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; list-style: none; border: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0.85); text-wrap-mode: wrap; ">工程源码下载：<a href="http://www.bilibili996.com/Course?id=facc343faec44bf3963108cf286f784b" target="_blank" title="GPS定位EC-01G模块系列教程源码下载页（物联网）" style="margin: 0px; padding: 0px; list-style: none; border: 0px; color: rgb(0, 102, 0); transition-duration: 0.2s; transition-property: opacity; outline: none;">GPS定位EC-01G模块系列教程源码下载页（物联网）</a><p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; list-style: none; border: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 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: rgba(0, 0, 0, 0.85); text-wrap-mode: wrap; ">IDE环境：Visual Studio 2022 百度地图定位网页可以参考C#系列博客：<a href="http://www.bilibili996.com/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); text-wrap-mode: wrap; ">前端页面演示<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); text-wrap-mode: wrap; ">        地图页面的添加方式和登录页面的添加方式一样的，需要先调试好一个能够正常访问的百度地图程序，我这里使用的是《百度地图上显示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); text-wrap-mode: wrap; "><img src="http://www.bilibili996.com/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); text-wrap-mode: wrap; ">运行效果如下：<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); text-wrap-mode: wrap; "><img src="http://www.bilibili996.com/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); text-wrap-mode: wrap; "> ASP.NET CORE中嵌入地图页面    嵌入方法和嵌入登录页面的方法是一样的，我这样就不再重复演示了。地图的css、js、jpg图片全部扔到对应的文件夹下，和登录页面的文件放在一起。同时我们再添加一个名为“Home”的目录用于放置我们的地图文件，对应的控制器也要加上，最终目录结构如下： <img src="http://www.bilibili996.com/upload/image/6379875523067856271626547.jpg" title="QQ截图20220914122649.jpg" alt="QQ截图20220914122649.jpg"/> 然后再次启动我们的程序。手动填写访问地址：http://localhost:5223/home（在当前的地址后面加上“/home”），我们就能正常访问我们刚刚新增的地图页面了。<img src="http://www.bilibili996.com/upload/image/6379875530818347128908941.jpg" title="QQ截图20220914122821.jpg" alt="QQ截图20220914122821.jpg"/> 到这里，我们主要用到的两个页面就添加完成了。