Gausst松鼠会

这个屌丝很懒，什么也没留下！

热门标签

热门文章

当前位置: article > 正文

百度地图鼠标滚轮失去中心点，采用iframe标签渲染_嵌入地图</h1></div><div class="article_info"><div class="article_c_info"> 作者：Gausst松鼠会 | 2024-03-04 19:39:45</div><div class="article_click" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div class="article_intro"><iframe>嵌入地图</div><div class="article_content article_contentheight"> <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"> <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-044f2cf1dc.css"> <div id="content_views" class="htmledit_views"> <p><em>哈喽，大家好呀！小韵携原创博文给大家请安啦！</em></p> <blockquote> <p><strong>前言</strong>：<a href="https://so.csdn.net/so/search?q=%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"百度地图\"}"}" data-tit="百度地图" data-pretit="百度地图">百度地图</a>官方<em>JavaScript Api</em>会提供组件<em>baidu-map</em>，在开启鼠标滚轮放缩时，其中心是根据body定位的，因此可能会出现中心偏移的问题。博文提供了一个百度地图渲染和含有点击方法、查询方法的完整<em>html</em>，利用<em><iframe></em>标签，嵌入到页面中，就完美解决了问题。</p> <p><strong>介绍</strong>：采用<em><iframe></em>标签，将自主渲染的百度地图和封装的点击、搜索方法的<em>html</em>内联至指定页面位置。</p> </blockquote> <p id="main-toc"><strong>目录</strong></p> <p id="" style="margin: 0px 0px 2px; padding-left: 24px;"><a href="#%E4%B8%80%E3%80%81%E9%97%AE%E9%A2%98%E5%A4%8D%E7%8E%B0%E4%B8%8E%E5%8E%9F%E5%9B%A0" rel="nofollow" target="_self">一、问题复现与原因</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t1" rel="nofollow" target="_self">原因：</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t2" rel="nofollow" target="_self">借鉴：</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t3" rel="nofollow" target="_self">思路：</a></p> <p id="" style="margin: 0px 0px 2px; padding-left: 24px;"><a href="#t4" rel="nofollow" target="_self">二、地图组件html</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t5" rel="nofollow" target="_self">代码</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t6" rel="nofollow" target="_self">页面样式</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t7" rel="nofollow" target="_self">ak</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t8" rel="nofollow" target="_self"> 解析器</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t9" rel="nofollow" target="_self"> 封装方法介绍</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t10" rel="nofollow" target="_self">文件位置</a></p> <p id="" style="margin: 0px 0px 2px; padding-left: 24px;"><a href="#t11" rel="nofollow" target="_self">三、父组件iframe内联地图组件html</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t12" rel="nofollow" target="_self">div嵌入iframe</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t13" rel="nofollow" target="_self">mounted生命周期中加载监听</a></p> <p id="" style="margin: 0px 0px 2px 96px; padding-left: 24px;"><a href="#t14" rel="nofollow" target="_self">methods</a></p> <p id="" style="margin: 0px 0px 2px; padding-left: 24px;"><a href="#t15" rel="nofollow" target="_self">四、总结</a></p> <hr id="hr-toc"> <h2><a name="t0"></a>一、问题复现与原因</h2> <p>下图采用官方组件<em>baidu-map</em>，直接在页面中引入该组件。诚如上面看到的，在使用鼠标滚动控制百度地图大小时，发现中心偏移，并没有以鼠标点为中心放缩，造成了非常不理想的情况。</p> <p class="img-center"><img alt="" src="https://img-blog.csdnimg.cn/2d116b659fcf449d816fd566eb62ab94.gif"></p> <h4 id="%E5%8E%9F%E5%9B%A0%EF%BC%9A"><a name="t1"></a>原因：</h4> <p>百度地图的放缩是以<em>body</em>层为参照的，如果渲染页面含有滚动条，并且不在最顶端，这个位置插入的百度地图，就会判断中心错误，并非按照鼠标的中心。而博主的页面正是在长长的需要滚动的弹出层中放置的百度地图，你说巧了嘛这不是，符合条件，问题出现。</p> <h4 id="%E5%80%9F%E9%89%B4%EF%BC%9A"><a name="t2"></a>借鉴：</h4> <p>并非只有洒家处于这样的情况，遇事不会，官方管对。查阅百度地图介绍时，发现了这种在页面中嵌入的情况（<a href="https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/event" rel="nofollow" title="jspopularGL | 百度地图API SDK">jspopularGL | 百度地图API SDK</a>），扒扒它的源码，很清晰的发现它使用了<em><iframe></em>标签，将以<em>body</em>为基地的百度地图包裹了起来，妙哉！</p> <p><img alt="" height="475" src="https://img-blog.csdnimg.cn/3f01247269b34852881a855961535ec2.png" width="1200"></p> <h4 id="%E6%80%9D%E8%B7%AF%EF%BC%9A"><a name="t3"></a>思路：</h4> <p><em>iframe </em>元素会创建包含另外一个文档的内联框架（即行内框架），并且支持所有的浏览器，可以创建一个html，自主渲染出百度地图，里面设置需要的方法，再在目标文件中引入该<em>html</em>，同时也可以调用其中方法。说来，其实是把<em>vue</em>的父子组件，换成了<em>html</em>的<em>iframe</em>标签，不同之处就在于：<em>vue</em>组件的模式是将<em>html</em>文件分模块处理，无论加多少嵌套的组件，总归都是在一个大的<em>html</em>中，毕竟<em>vue</em>组件是挂载到<em>html</em>中元素中的。这样思路就很明确了，下一节。</p> <h2 id="%E4%BA%8C%E3%80%81%E5%9C%B0%E5%9B%BE%E7%BB%84%E4%BB%B6html"><a name="t4"></a>二、地图组件<em>html</em></h2> <h4 id="%E4%BB%A3%E7%A0%81"><a name="t5"></a>代码</h4> <pre data-index="0" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln hundred" style="width:1242px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"zh-CN"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>地图单击拾取经纬度<span class="hljs-tag"></<span class="hljs-name">title</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"Content-Type"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"text/html; charset=utf-8"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"initial-scale=1.0, user-scalable=no"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"IE=Edge"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-tag">body</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-tag">html</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-id">#container</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">overflow</span>: hidden;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">/ font-family: "微软雅黑"; /</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-class">.anchorBL</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">display</span>: none;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">visibility</span>: hidden;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-class">.anchorTR</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">display</span>: none;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">visibility</span>: hidden;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-class">.BMap_zlHolder</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">display</span>: none;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">visibility</span>: hidden;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">style</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//api.map.baidu.com/api?type=webgl&v=1.0&ak=''"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"container"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">var</span> map = <span class="hljs-keyword">new</span> <span class="hljs-title class_">BMapGL</span>.<span class="hljs-title class_">Map</span>(<span class="hljs-string">'container'</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// 初始化</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="42"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">map.<span class="hljs-title function_">centerAndZoom</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">BMapGL</span>.<span class="hljs-title class_">Point</span>(<span class="hljs-string">''</span>,<span class="hljs-string">''</span>), <span class="hljs-number">15</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="43"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">map.<span class="hljs-title function_">enableScrollWheelZoom</span>(<span class="hljs-literal">true</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="44"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// 地图初始化事件</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="45"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">function</span> <span class="hljs-title function_">initMap</span>(<span class="hljs-params">point</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="46"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="47"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(point,<span class="hljs-string">'iframe-initMap'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="48"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 这里一定要加延时器，避免了地图未完全渲染出来从而导致的中心偏移问题</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="49"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> map.<span class="hljs-title function_">centerAndZoom</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">BMapGL</span>.<span class="hljs-title class_">Point</span>(point.<span class="hljs-property">lng</span>, point.<span class="hljs-property">lat</span>), <span class="hljs-number">15</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="50"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 地图标点</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="51"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> map.<span class="hljs-title function_">clearOverlays</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="52"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> marker = <span class="hljs-keyword">new</span> <span class="hljs-title class_">BMapGL</span>.<span class="hljs-title class_">Marker</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">BMapGL</span>.<span class="hljs-title class_">Point</span>(point.<span class="hljs-property">lng</span>, point.<span class="hljs-property">lat</span>));</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="53"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> marker.<span class="hljs-property">type</span> = <span class="hljs-string">"click"</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="54"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> map.<span class="hljs-title function_">addOverlay</span>(marker);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="55"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }, <span class="hljs-number">300</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="56"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="57"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="58"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// 发送解析地址信息</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="59"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">function</span> <span class="hljs-title function_">iframeClickMap</span>(<span class="hljs-params">addrInfo</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="60"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(addrInfo,<span class="hljs-string">'iframeSendMsg'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="61"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">window</span>.<span class="hljs-property">parent</span>.<span class="hljs-title function_">postMessage</span>({ </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="62"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">cmd</span>:<span class="hljs-string">'getMap'</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="63"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> params : {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="64"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">LNG</span>:addrInfo.<span class="hljs-property">longitude</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="65"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">LAT</span>:addrInfo.<span class="hljs-property">latitude</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="66"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">CONNECTADDR</span>:addrInfo.<span class="hljs-property">connectAddr</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="67"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="68"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },<span class="hljs-string">''</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="69"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">};</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="70"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// 发送搜索结果list</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="71"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">function</span> <span class="hljs-title function_">iframeSearchMap</span>(<span class="hljs-params">searList</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="72"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(searList,<span class="hljs-string">'searList'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="73"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">window</span>.<span class="hljs-property">parent</span>.<span class="hljs-title function_">postMessage</span>({ </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="74"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">cmd</span>:<span class="hljs-string">'getSearch'</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="75"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> params : {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="76"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> searList</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="77"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="78"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },<span class="hljs-string">''</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="79"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">};</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="80"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// 点击地图事件</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="81"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">map.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="82"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 获取到经纬度</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="83"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e,<span class="hljs-string">'mapHTML-Click'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="84"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 地图标点</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="85"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> map.<span class="hljs-title function_">clearOverlays</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="86"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> marker = <span class="hljs-keyword">new</span> <span class="hljs-title class_">BMapGL</span>.<span class="hljs-title class_">Marker</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">BMapGL</span>.<span class="hljs-title class_">Point</span>(e.<span class="hljs-property">latlng</span>.<span class="hljs-property">lng</span>, e.<span class="hljs-property">latlng</span>.<span class="hljs-property">lat</span>));</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="87"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> marker.<span class="hljs-property">type</span> = <span class="hljs-string">"click"</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="88"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> map.<span class="hljs-title function_">addOverlay</span>(marker);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="89"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// // 获取到解析位置并发送</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="90"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> latlng = {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="91"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">lng</span>:e.<span class="hljs-property">latlng</span>.<span class="hljs-property">lng</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="92"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">lat</span>:e.<span class="hljs-property">latlng</span>.<span class="hljs-property">lat</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="93"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="94"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">getAddressApi</span>(latlng).<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">rs</span>=></span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="95"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(rs,<span class="hljs-string">'mapHTML-getLocation'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="96"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> addrInfo = {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="97"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> connectAddr : rs.<span class="hljs-property">result</span>.<span class="hljs-property">formatted_address_poi</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="98"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> longitude : rs.<span class="hljs-property">result</span>.<span class="hljs-property">location</span>.<span class="hljs-property">lng</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="99"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> latitude : rs.<span class="hljs-property">result</span>.<span class="hljs-property">location</span>.<span class="hljs-property">lat</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="100"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="101"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">iframeClickMap</span>(addrInfo)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="102"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> })</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="103"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// BMapGL添加参数extensions_poi失效</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="104"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// var geocoder = new BMapGL.Geocoder({extensions_poi:1}); //创建地址解析器的实例</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="105"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// geocoder.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), (rs) => {</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="106"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// console.log(rs,'mapHTML-getLocation')</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="107"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// var addrInfo = {</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="108"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// connectAddr : rs.address,</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="109"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// longitude : rs.point.lng,</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="110"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// latitude : rs.point.lat</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="111"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// }</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="112"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// // iframeClickMap(addrInfo)</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="113"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// });</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="114"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">});</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="115"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// 关键字搜索</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="116"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">"message"</span>, getAddrLocation);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="117"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">function</span> <span class="hljs-title function_">getAddrLocation</span>(<span class="hljs-params">event</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="118"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">const</span> mapInfo = event.<span class="hljs-property">data</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="119"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event,<span class="hljs-string">'getAddrLocation'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="120"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span>(mapInfo.<span class="hljs-property">cmd</span> == <span class="hljs-string">'searMap'</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="121"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">const</span> addrInfo = mapInfo.<span class="hljs-property">params</span>.<span class="hljs-property">addrInfo</span> || <span class="hljs-string">''</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="122"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 地址搜索不为空，则搜索选定地址</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="123"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span> (addrInfo !== <span class="hljs-string">''</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="124"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="125"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 方案3：采用另一个接口，只返回一个经纬度</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="126"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">searchApi</span>(addrInfo).<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">rs</span>=></span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="127"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> map.<span class="hljs-title function_">centerAndZoom</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">BMapGL</span>.<span class="hljs-title class_">Point</span>(rs.<span class="hljs-property">result</span>.<span class="hljs-property">location</span>.<span class="hljs-property">lng</span>, rs.<span class="hljs-property">result</span>.<span class="hljs-property">location</span>.<span class="hljs-property">lat</span>), <span class="hljs-number">15</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="128"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 为搜索结果标记点位但解析器不太准确，不能搜索出小地方。</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="129"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> map.<span class="hljs-title function_">clearOverlays</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="130"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> marker = <span class="hljs-keyword">new</span> <span class="hljs-title class_">BMapGL</span>.<span class="hljs-title class_">Marker</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">BMapGL</span>.<span class="hljs-title class_">Point</span>(rs.<span class="hljs-property">result</span>.<span class="hljs-property">location</span>.<span class="hljs-property">lng</span>, rs.<span class="hljs-property">result</span>.<span class="hljs-property">location</span>.<span class="hljs-property">lat</span>));</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="131"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> marker.<span class="hljs-property">type</span> = <span class="hljs-string">"click"</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="132"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">let</span> searGeo = <span class="hljs-keyword">new</span> <span class="hljs-title class_">BMapGL</span>.<span class="hljs-title class_">Geocoder</span>(); <span class="hljs-comment">//创建地址解析器的实例</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="133"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> map.<span class="hljs-title function_">addOverlay</span>(marker);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="134"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(rs.<span class="hljs-property">result</span>.<span class="hljs-property">location</span>,<span class="hljs-string">'rs.result.location'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="135"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">getAddressApi</span>(rs.<span class="hljs-property">result</span>.<span class="hljs-property">location</span>).<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">rg</span>=></span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="136"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(rg,<span class="hljs-string">'getAddrLocation-getLocation'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="137"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> addrInfo = {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="138"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> connectAddr : rg.<span class="hljs-property">result</span>.<span class="hljs-property">formatted_address_poi</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="139"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> longitude : rg.<span class="hljs-property">result</span>.<span class="hljs-property">location</span>.<span class="hljs-property">lng</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="140"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> latitude : rg.<span class="hljs-property">result</span>.<span class="hljs-property">location</span>.<span class="hljs-property">lat</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="141"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="142"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">iframeClickMap</span>(addrInfo)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="143"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> });</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="144"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> })</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="145"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="146"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 方案2：list供用户选择，但接口有配额限制，需要掏钱</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="147"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// searchApi(addrInfo).then(rs=>{</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="148"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// // 搜索结果是一个list，直接让用户选择吧</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="149"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// console.log(rs,'searchApi')</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="150"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// iframeSearchMap(rs.result)</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="151"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// })</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="152"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="153"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 方案1：搜索不精确---原始方案,采用jsApi，但是这个问题比较多</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="154"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// searGeo.getPoint(addr, (rs) => {</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="155"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// console.log(rs,'getPoint-getPoint')</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="156"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// map.centerAndZoom(new BMapGL.Point(rs.lng, rs.lat), 15);</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="157"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// // 为搜索结果标记点位但解析器不太准确，不能搜索出小地方。</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="158"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// map.clearOverlays();</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="159"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// var marker = new BMapGL.Marker(new BMapGL.Point(rs.lng, rs.lat));</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="160"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// marker.type = "click"</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="161"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// map.addOverlay(marker);</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="162"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// // 为搜索结果解析位置并发送</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="163"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// searGeo.getLocation(rs, (rg) => {</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="164"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// console.log(rg,'getAddrLocation-getLocation')</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="165"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// var addrInfo = {</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="166"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// connectAddr : rg.address,</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="167"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// longitude : rg.point.lng,</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="168"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// latitude : rg.point.lat</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="169"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// }</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="170"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// iframeClickMap(addrInfo)</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="171"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// });</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="172"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// });</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="173"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="174"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="175"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> };</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="176"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// 经纬度获取为地址-api</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="177"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">function</span> <span class="hljs-title function_">getAddressApi</span>(<span class="hljs-params">latlng</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="178"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">return</span> <span class="hljs-title function_">jsonp</span>( <span class="hljs-string">`https://api.map.baidu.com/reverse_geocoding/v3/?output=json&ak=''&extensions_poi=1&location=<span class="hljs-subst">${latlng.lat}</span>,<span class="hljs-subst">${latlng.lng}</span>`</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="179"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="180"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// 经纬度获取为地址-api</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="181"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">function</span> <span class="hljs-title function_">searchApi</span>(<span class="hljs-params">addrInfo</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="182"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 这个接口有配额限制</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="183"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// return jsonp( `https://api.map.baidu.com/place/v2/suggestion?query=${addrInfo.keyword}&region=${addrInfo.area}&city_limit=true&output=json&ak=''`)</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="184"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 这个接口只返回经纬度</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="185"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">return</span> <span class="hljs-title function_">jsonp</span>( <span class="hljs-string">`https://api.map.baidu.com/geocoding/v3/?address=<span class="hljs-subst">${addrInfo.addr}</span>&output=json&ak=''`</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="186"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="187"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// 定义jsonp</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="188"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">const</span> jsonp = <span class="hljs-keyword">function</span> (<span class="hljs-params">url, data</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="189"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="190"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 初始化url</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="191"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">let</span> dataString = url.<span class="hljs-title function_">indexOf</span>(<span class="hljs-string">'?'</span>) === -<span class="hljs-number">1</span> ? <span class="hljs-string">'?'</span> : <span class="hljs-string">'&'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="192"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">let</span> callbackName = <span class="hljs-string">`jsonpCB_<span class="hljs-subst">${<span class="hljs-built_in">Date</span>.now()}</span>`</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="193"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> url += <span class="hljs-string">`<span class="hljs-subst">${dataString}</span>callback=<span class="hljs-subst">${callbackName}</span>`</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="194"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span> (data) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="195"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 有请求参数，依次添加到url</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="196"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> k <span class="hljs-keyword">in</span> data) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="197"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> url += <span class="hljs-string">`&<span class="hljs-subst">${k}</span>=<span class="hljs-subst">${data[k]}</span>`</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="198"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="199"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="200"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">let</span> jsNode = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'script'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="201"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> jsNode.<span class="hljs-property">src</span> = url</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="202"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 触发callback，触发后删除js标签和绑定在window上的callback</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="203"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">window</span>[callbackName] = <span class="hljs-function"><span class="hljs-params">result</span> =></span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="204"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">delete</span> <span class="hljs-variable language_">window</span>[callbackName]</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="205"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">removeChild</span>(jsNode)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="206"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span> (result) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="207"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">resolve</span>(result)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="208"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> } <span class="hljs-keyword">else</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="209"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">reject</span>(<span class="hljs-string">'没有返回数据'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="210"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="211"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="212"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// js加载异常的情况</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="213"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> jsNode.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'error'</span>, <span class="hljs-function">() =></span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="214"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">delete</span> <span class="hljs-variable language_">window</span>[callbackName]</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="215"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">removeChild</span>(jsNode)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="216"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">reject</span>(<span class="hljs-string">'JavaScript资源加载失败'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="217"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }, <span class="hljs-literal">false</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="218"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 添加js节点到document上时，开始请求</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="219"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">appendChild</span>(jsNode)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="220"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> })</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="221"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="222"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="223"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="224"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="225"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>很有必要做出如下解释：</p> <h4 id="%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F"><a name="t6"></a>页面样式</h4> <p><em>style</em>中的类已经取出了百度地图的版权字样等，是一个干净清爽的页面哈</p> <p><img alt="" height="338" src="https://img-blog.csdnimg.cn/57ab2e1e9f3b46a18153b882fa020c87.png" width="572"></p> <h4 id="ak"><a name="t7"></a>ak</h4> <p>其实不是很明确服务端的ak是否允许在前端直接访问，至少在本地成功了。</p> <p>渲染页面的<em>ak</em>要使用浏览器端的<em>ak</em>，使用服务端ak会报“<em>APP服务被禁用</em>”;</p> <p>访问解析接口的<em>ak</em>要使用服务端的<em>ak</em>，使用浏览器端<em>ak</em>会报“<em>跨源读取阻止(CORB)功能阻止了 MIME 类型为 application/json 的跨源响应</em>”</p> <h4 id="%C2%A0%E8%A7%A3%E6%9E%90%E5%99%A8"><a name="t8"></a> 解析器</h4> <p>无非是<em>BMap.Geocoder()</em>的<em>getLocation()</em>和<em>getPoint()</em>两种方法，即正/逆地址解析。</p> <p class="img-center"><img alt="" height="68" src="https://img-blog.csdnimg.cn/ed92450e71de40f384ed47927a160c40.png" width="299"></p> <p>但是这两个方法却有很大的毛病，<em>getLocation()</em>逆地址解析出的地址信息，不明确，文档上所谓的<em>{extensions_poi:1}</em>字段没有效果，工单反馈问题，解决方案是直接采用合适的<em>api</em>。</p> <p></p> <p class="img-center"><img alt="" height="201" src="https://img-blog.csdnimg.cn/20ca256e1c284ff49f14d6525806b85b.png" width="301"></p> <p>因此，使用<em>getAddressApi</em>和<em>searchApi</em>两个方法替换解析器。也因此代码中会出现不同的方案，供大家参考选择。注：采用<em>jsonp</em>格式请求，在此不再介绍。</p> <p>在<em>searchApi</em>中我写了两个接口，文中采用第二个接口，需要传结构化地址信息，意思是你要传“奥体中心”，你传“奥体”就搜不出来了。第一个接口，检索功能强大，其实就是我们平常用的提示词，但确实分页返回满足检索词的所有地址，大概率在小范围内重复好多个，我认为可以递归筛选来返回更多有效的地址，一定是因为我没有资本所以才不做，这个接口额度是100次每天，单价是30元1万次，还好。</p> <p><img alt="" height="111" src="https://img-blog.csdnimg.cn/77ff0a1219cf45aba6d3259a6048a22a.png" width="586"></p> <p class="img-center"><img alt="" height="220" src="https://img-blog.csdnimg.cn/54c266302a55422183668531ea638293.png" width="209"></p> <p></p> <h4 id="%C2%A0%E5%B0%81%E8%A3%85%E6%96%B9%E6%B3%95%E4%BB%8B%E7%BB%8D"><a name="t9"></a> 封装方法介绍</h4> <pre data-index="1" class="set-code-show" name="code">initMap：初始化地图事件，父组件使用，参数为经纬度，地图显示对应点位。</pre> <pre data-index="2" class="set-code-show" name="code">iframeClickMap：传递函数，子组件使用，参数为经纬度和地址，向父组件发送"getMap"带参指令。</pre> <pre data-index="3" class="set-code-show" name="code">map.addEventListener('click',function (e) {})：监听地图点击事件，解析点位经纬度和地址信息，通过iframeClickMap发送</pre> <pre data-index="4" class="set-code-show" name="code">window.addEventListener("message", getAddrLocation)及getAddrLocation：创建指令监听，用于获取父组件搜索事件的后续处理,其中有采用JavaScript Api官方解析器，普通api请求解析器、付费api请求解析器，根据搜索地址获取经纬度和地址并通过iframeClickMap或iframeSearchMap发送至父组件。</pre> <h4 id="%E6%96%87%E4%BB%B6%E4%BD%8D%E7%BD%AE"><a name="t10"></a>文件位置</h4> <p>（<em>Vue</em>项目）如果我没有记错的话，文件必须放在<em>public</em>/<em>static</em>下面才能在使用时被<em>src</em>找到，貌似是其它位置的不会被打包，待求证哦~</p> <p></p> <h2 id="%E4%B8%89%E3%80%81%E7%88%B6%E7%BB%84%E4%BB%B6iframe%E5%86%85%E8%81%94%E5%9C%B0%E5%9B%BE%E7%BB%84%E4%BB%B6html"><a name="t11"></a>三、父组件<em>iframe</em>内联地图组件<em>html</em></h2> <h4 id="div%E5%B5%8C%E5%85%A5iframe"><a name="t12"></a><strong><em>div</em>嵌入<em>iframe</em></strong></h4> <pre data-index="5" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/static/map.html"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"mapIframe"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"baidu-map"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h4 id="mounted%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E4%B8%AD%E5%8A%A0%E8%BD%BD%E7%9B%91%E5%90%AC"><a name="t13"></a><em>mounted</em>生命周期中加载监听</h4> <pre data-index="6" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">mounted</span>(<span class="hljs-params"></span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'message'</span>,<span class="hljs-variable language_">this</span>.<span class="hljs-property">getIframeMessage</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h4 id="methods"><a name="t14"></a><em>methods</em></h4> <pre data-index="7" class="set-code-show" name="code">init():初始化地图，调用子组件initMap，参数为初始化地图中心。 </pre> <pre data-index="8" class="set-code-show" name="code">getIframeMessage():获取子组件消息，获取cmd为getMap的消息的信息，即经纬度和地址信息。</pre> <pre data-index="9" class="set-code-show" name="code">searchLocation():地址检索，向子组件发送searMap的带检索关键词的消息。</pre> <pre data-index="10" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// 地图初始化</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-title function_">init</span>(<span class="hljs-params">e</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-property">$refs</span>.<span class="hljs-property">mapIframe</span>.<span class="hljs-property">contentWindow</span>.<span class="hljs-title function_">initMap</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">initLocation</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// getMap接收参数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-title function_">getIframeMessage</span>(<span class="hljs-params">event</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">const</span> info = event.<span class="hljs-property">data</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(info,<span class="hljs-string">'getIframeMessage'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 点击结果 --- 方案3</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span>(info.<span class="hljs-property">cmd</span> == <span class="hljs-string">'getMap'</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// console.log(info,'getIframeMessage')</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 为表单赋值</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-property">form</span>.<span class="hljs-property">connectAddr</span> = info.<span class="hljs-property">params</span>.<span class="hljs-property">CONNECTADDR</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-property">form</span>.<span class="hljs-property">longitude</span> = info.<span class="hljs-property">params</span>.<span class="hljs-property">LNG</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-property">form</span>.<span class="hljs-property">latitude</span> = info.<span class="hljs-property">params</span>.<span class="hljs-property">LAT</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-property">mapPoint</span>.<span class="hljs-property">lng</span> = info.<span class="hljs-property">params</span>.<span class="hljs-property">LNG</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-property">mapPoint</span>.<span class="hljs-property">lat</span> = info.<span class="hljs-property">params</span>.<span class="hljs-property">LAT</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 搜索结果 --- 方案2</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span>(info.<span class="hljs-property">cmd</span> == <span class="hljs-string">'getSearch'</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// console.log(info,'getSearch')</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 搜索结果</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-property">searList</span> = info.<span class="hljs-property">params</span>.<span class="hljs-property">searList</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">searList</span>,<span class="hljs-string">'getSearch'</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">// 传递搜索参数</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-title function_">searchLocation</span>(<span class="hljs-params"></span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">const</span> iframeWindow = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$refs</span>.<span class="hljs-property">mapIframe</span>.<span class="hljs-property">contentWindow</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> iframeWindow.<span class="hljs-title function_">postMessage</span>({</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">cmd</span>:<span class="hljs-string">'searMap'</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> params : {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">addrInfo</span>:{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">area</span>:<span class="hljs-variable language_">this</span>.<span class="hljs-property">area</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">keyword</span>:<span class="hljs-variable language_">this</span>.<span class="hljs-property">keyword</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">addr</span>:<span class="hljs-variable language_">this</span>.<span class="hljs-property">area</span>+<span class="hljs-variable language_">this</span>.<span class="hljs-property">keyword</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },<span class="hljs-string">''</span>)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="42"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2 id="%E5%9B%9B%E3%80%81%E6%80%BB%E7%BB%93"><a name="t15"></a>四、总结</h2> <p>看到这里的小伙伴真的是看到了这里，感谢你们的认真阅读。</p> <p>首先感谢各位伙伴网上的资料。我在优化整个代码的过程中遇到最多的问题就是“<em>跨源读取阻止(CORB)</em>”的问题，N次尝试后，才知道要搞两个不同的ak，但是洒家也不知道这种是否被允许，还有采用服务端ak来访问官方接口在生产环境上是否允许（但我看到之前有腾讯地图也是直接访问的官方接口，应该没问题）。</p> <p>哦对了，竟然忘了展示最后结果，以下是成果，最后希望大家三键三连~</p> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/c4660eabc41b4e07a8bce3cc777f8b51.gif"></p> <p style="text-align:center;"><img alt="" height="122" src="https://img-blog.csdnimg.cn/613a267360434583a18d29e75a8c2595.png" width="122"></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div><div data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/qq_43638732/article/details/131411094","extend1":"pc","ab":"new"}"><div></div></div> <div><div><span>声明：</span>本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：<a href="https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/188464">https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/188464</a></div></div></div><div class="article_recommend"><div class="list_top">推荐阅读</div><div class="ListItems"><ul class="NewsList"><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="python爬取NBA数据_nba比赛数据下载 python iframe" href="/w/我家小花儿/article/detail/177780" target="_blank"><em>python</em>爬取NBA<em>数据</em>_<em>nba</em>比赛<em>数据</em>下载 <em>python</em> <em>iframe</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="python爬取NBA数据_nba比赛数据下载 python iframe" href="/w/我家小花儿/article/detail/177780" target="_blank">使用xpath爬取NBA球员的<em>数据</em>_<em>nba</em>比赛<em>数据</em>下载 <em>python</em> <em>iframe</em><em>nba</em>比赛<em>数据</em>下载 <em>python</em> if... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="基于 iframe 的微前端框架" href="/w/羊村懒王/article/detail/185690" target="_blank">基于 <em>iframe</em> 的微<em>前端</em><em>框架</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="基于 iframe 的微前端框架" href="/w/羊村懒王/article/detail/185690" target="_blank">用户进行多个子应用切换时，擎天<em>框架</em>监听浏览器url地址，如pathname从/New/变成/Web/，则将/New/... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Vue中对iframe实现keep alive（无刷新）_vue iframe 不刷新" href="/w/Gausst松鼠会/article/detail/188401" target="_blank"><em>Vue</em><em>中</em>对<em>iframe</em>实现<em>keep</em> <em>alive</em>（无<em>刷新</em>）_<em>vue</em> <em>iframe</em> 不<em>刷新</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Vue中对iframe实现keep alive（无刷新）_vue iframe 不刷新" href="/w/Gausst松鼠会/article/detail/188401" target="_blank">/ 只有在标签页列表里的页面才使用<em>keep</em>-<em>alive</em>，即关闭标签之后就不保存到内存<em>中</em>了。然后，再改Home.<em>vue</em>,在... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="vue iframe {keepAlive}设置不刷新_怎么阻止iframe刷新" href="/w/不正经/article/detail/188402" target="_blank"><em>vue</em> <em>iframe</em> {<em>keepAlive</em>}设置不<em>刷新</em><em>_</em><em>怎么</em>阻止<em>iframe</em><em>刷新</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="vue iframe {keepAlive}设置不刷新_怎么阻止iframe刷新" href="/w/不正经/article/detail/188402" target="_blank">【代码】<em>vue</em> <em>iframe</em> {<em>keepAlive</em>}设置不<em>刷新</em>。<em>_</em><em>怎么</em>阻止<em>iframe</em><em>刷新</em><em>怎么</em>阻止<em>iframe</em><em>刷新</em> ... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="iframe/window.open打开一个新窗口/子窗口中调用父窗口的方法_window.open" href="/w/Monodyee/article/detail/188422" target="_blank"><em>iframe</em>/<em>window</em>.<em>open</em><em>打开</em>一个新<em>窗口</em>/子<em>窗口</em>中调用父<em>窗口</em>的方法_<em>window</em>.<em>open</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="iframe/window.open打开一个新窗口/子窗口中调用父窗口的方法_window.open" href="/w/Monodyee/article/detail/188422" target="_blank"><em>window</em>.<em>open</em> 只<em>打开</em>一个<em>窗口</em>是将 oNewWindow = <em>window</em> . <em>open</em> ( sURL , s... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="iframe 在ie下面总是弹出新窗口解决方法_iframe为什么会在新标签页打开" href="/w/很楠不爱3/article/detail/188424" target="_blank"><em>iframe</em> <em>在</em><em>ie</em>下面总是弹出新窗口解决方法<em>_</em><em>iframe</em><em>为什么</em>会<em>在</em>新<em>标签</em>页打开...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="iframe 在ie下面总是弹出新窗口解决方法_iframe为什么会在新标签页打开" href="/w/很楠不爱3/article/detail/188424" target="_blank">form 提交表单到<em>iframe</em><em>iframe</em> <em>在</em>使用的时候，不仅要有id，还要有name，当没有name属性的时候，<em>在</em>火... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="iframe 禁止打开新窗口_打开新窗口的安全和性能问题" href="/w/你好赵伟/article/detail/188425" target="_blank"><em>iframe</em> 禁止<em>打开</em><em>新窗口</em>_<em>打开</em><em>新窗口</em><em>的</em>安全和性能<em>问题</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="iframe 禁止打开新窗口_打开新窗口的安全和性能问题" href="/w/你好赵伟/article/detail/188425" target="_blank">相信大部分同学都接到过"点击页面某个地方从<em>新窗口</em><em>打开</em>一个页面"<em>的</em>需求,一般这个需求都有一下两种处理方式来完成:1.a标签... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="iframe解决图片防盗链，并解决iframe对事件的拦截_react iframe 拦截" href="/w/Monodyee/article/detail/188446" target="_blank"><em>iframe</em><em>解决</em><em>图片</em><em>防盗链</em>，并<em>解决</em><em>iframe</em>对事件的<em>拦截</em>_<em>react</em> <em>iframe</em> <em>拦截</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="iframe解决图片防盗链，并解决iframe对事件的拦截_react iframe 拦截" href="/w/Monodyee/article/detail/188446" target="_blank"><em>iframe</em><em>解决</em><em>图片</em><em>防盗链</em>，并<em>解决</em><em>iframe</em>对事件的<em>拦截</em><em>图片</em>资源因<em>防盗链</em>而无法加载。思路：用<em>iframe</em>加载一个页面，... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li></ul><div class="list_tools_top">相关标签</div><div class="list_tools_box"><ul><li><a title="python" rel="nofollow" href="/s?w=python" target="_self">python</a></li><li><a title="前端框架" rel="nofollow" href="/s?w=前端框架" target="_self">前端框架</a></li><li><a title="javascript" rel="nofollow" href="/s?w=javascript" target="_self">javascript</a></li><li><a title="vue.js" rel="nofollow" href="/s?w=vue.js" target="_self">vue.js</a></li><li><a title="前端" rel="nofollow" href="/s?w=前端" target="_self">前端</a></li><li><a title="iframe" rel="nofollow" href="/s?w=iframe" target="_self">iframe</a></li><li><a title="ie" rel="nofollow" href="/s?w=ie" target="_self">ie</a></li><li><a title="浏览器" rel="nofollow" href="/s?w=浏览器" target="_self">浏览器</a></li><li><a title="iframe 禁止打开新窗口" rel="nofollow" href="/s?w=iframe 禁止打开新窗口" target="_self">iframe 禁止打开新窗口</a></li><li><a title="iframe禁止新窗口打开" rel="nofollow" href="/s?w=iframe禁止新窗口打开" target="_self">iframe禁止新窗口打开</a></li><li><a title="js 判断窗口是否已经打开了url" rel="nofollow" href="/s?w=js 判断窗口是否已经打开了url" target="_self">js 判断窗口是否已经打开了url</a></li><li><a title="js 打开新页面" rel="nofollow" href="/s?w=js 打开新页面" target="_self">js 打开新页面</a></li><li><a title="js关闭当前页面打开新的页面" rel="nofollow" href="/s?w=js关闭当前页面打开新的页面" target="_self">js关闭当前页面打开新的页面</a></li><li><a title="js打开新的窗口window" rel="nofollow" href="/s?w=js打开新的窗口window" target="_self">js打开新的窗口window</a></li><div style="clear: both;"></div></ul></div><div class="list_tools_top"></div></div></div></div><style type="text/css"></style><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/phone.css?v=17352890" type="text/css"><script type="text/javascript"></script></div></div></div></div></div></div><style type="text/css"> /* footer css / .index006-cover-page-foot { background-color: #F7F7F7; } </style><div class="cppui-row-1_100 cppui-row-view-1 row_1_100 ui-draggable" style="display: block;"><div class="cppui-column-1_100-0-1 column-view-com cppui-column-1_100-0-view-1 ui-sortable"><div class="drag-item-show-view-1 footermsg_view_pic ui-draggable" style="display: block;"><div class="index006-cover-page-foot drag-item-hide-view-1"><p class="copyright">Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。 </p><div style="background-color:#F7F7F7; text-align:center; height:20px;padding-top:5px;"><a target="_blank" href="https://beian.mps.gov.cn/#/query/webSearch" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdnimages.wpsshop.cn/57public/skin/index/default/ui/images/beian_ghs.png" style="float:left;">  <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">闽ICP备14008679号</p></a>  <a href="https://www.wpsshop.cn/xml/w/Gausst%E6%9D%BE%E9%BC%A0%E4%BC%9A/article/detail/188464.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a>   <a href="/xml/w/g007/article/detail/new.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a>   <a href="/site.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a></div></div></div></div></div><script type="text/javascript">var domain = document.domain;var hr=encodeURIComponent(window.location.href+'=='+document.referrer); document.write('<script src="https://ad.wpsshop.cn/admin.appflux?s=ad_flu_ind&fluxuserauto=yes&hr='+hr+'&p57weburl='+domain+'&p57usercode1='+domain+'&u=Vy1RJQhqAXUEMQNnAm0HaVVu&i='+p57ref("id")+'&r='+escape(document.referrer)+'" language="JavaScript"><\/script>');function p57ref(id){var reg=new RegExp("(^|&)"+id+"=([^&])(&|$)");var ref=window.location.search.substr(1).match(reg);if(ref!=null)return unescape(ref[2]);return null;} </script></body></html>