腾讯地图地图选点组件报错:Cannot read property formatted_addresses of undefined的解决

最新推荐文章于 2024-05-14 17:29:45 发布

ringlst

最新推荐文章于 2024-05-14 17:29:45 发布

阅读量6.9k

点赞数 5

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42405223/article/details/106302211

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

背景

新能源充电项目
后台需要搞个充电桩经纬度选取的基本功能…懒死,找现成先…
找找-----------------呃.地图选点组件
http://lbs.qq.com/webApi/component/componentGuide/componentPicker
好像能用… 用吧… 懒死我得了

问题

什么鬼… TXMAP前端快出来背锅
在这里插入图片描述

先给结论

如图: 腾讯位置服务逆地址解析接口并发配额默认为5, 申请企业开发者可提升到1000,既可直接忽视问题

在这里插入图片描述

过程

找过去
在这里插入图片描述
格式化下显示

看情况应该是这个地址解析接口返回的数据机构情况没在TX前端考虑的范畴

断个点看看

擦咧… 真是
在这里插入图片描述

解决方法

1. 老老实实去申请对应接口的配额

2. 不爽,我要挪移

2.1 扒拉主html

a.) 查看 https://3gimg.qq.com/lightmap/components/locationPicker2/index.html?search=1&type=1&key=you key&referer=myapp 源文件内容, 拷贝下来存到自己项目某个位置 locationPicker.html (我调本地文件还不行吗)
a.) 替换掉其中所有资源地址为原服务服务器地址对应地址
b.) 修改 seajs 的 base 为 ‘./location-picker/’ (逼它调本地文件)
c.) 下载 https://3gimg.qq.com/lightmap/components/locationPicker2/js/index-6781e3253a.js丢到 location-picker 目录下

目录结构和名字,文件名等看个人习惯了,我项目后台是VUE全家桶的,我丢这了
在这里插入图片描述
locationPicker.html 中需要具体需要修改:

<!DOCTYPE html>
<html>
    <head lang="zh-CN">
        <script type="text/javascript">
            var StatTimer = (window.StatTimer = {
                _s: new Date().getTime(),
                data: {},
                stub: function(name) {
                    this['data'][name] = (new Date().getTime() - this._s) / 1000;
                }
            });
        </script>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection" content="address=no" />
        <title>地图选点</title>
        <!-- 换掉地址 -->
        <!-- <link rel="stylesheet" type="text/css" href="./css/main-b92af55349.css"> -->
        <link
            rel="stylesheet"
            type="text/css"
            href="//3gimg.qq.com/lightmap/components/locationPicker2/css/main-b92af55349.css"
        />
    </head>
    <body>
        <!-- loading -->
        <div id="loading">
            <!-- 换掉地址 -->
            <!-- <img src="./image/loading.png" width="36" height="36" alt="loading" /> -->
            <img
                src="//3gimg.qq.com/lightmap/components/locationPicker2/image/loading.png"
                width="36"
                height="36"
                alt="loading"
            />
        </div>
        <div id="updating">
            <!-- 换掉地址 -->
            <!-- <img src="./image/loading.png" width="36" height="36" alt="updating" /> -->
            <img
                src="//3gimg.qq.com/lightmap/components/locationPicker2/image/loading.png"
                width="36"
                height="36"
                alt="updating"
            />
        </div>

        <script type="text/javascript">
            StatTimer.stub('geolocation_start');
        </script>
        <!-- 通过 iframe 嵌入前端定位组件 -->
        <iframe
            id="geoPage"
            style="display:none"
            width="0"
            height="0"
            frameborder="0"
            scrolling="no"
            src="https://apis.map.qq.com/tools/geolocation?key=you key&referer=locationPicker"
        >
        <!-- you key 是你的腾讯地图key -->
        </iframe>
        <!-- 定位失败页 -->
        <div id="geoFail" class="hide">
            <div class="error-msg">
                <!-- 换掉地址 -->
                <!-- <img src="./image/warn.png" width="30" height="30" alt="warn" /> -->
                <img
                    src="//3gimg.qq.com/lightmap/components/locationPicker2/image/warn.png"
                    width="30"
                    height="30"
                    alt="warn"
                />
                <span>定位失败，请稍后重试</span>
            </div>
            <a class="refresh-btn" href="javascript:;">重试</a>
        </div>

        <!-- 传递的经纬度不合法提示页 -->
        <div id="locationIllegal" class="hide">
            <div class="error-msg">
                <!-- 换掉地址 -->
                <!-- <img src="./image/warn.png" width="30" height="30" alt="warn" /> -->
                <img
                    src="//3gimg.qq.com/lightmap/components/locationPicker2/image/warn.png"
                    width="30"
                    height="30"
                    alt="warn"
                />
                <span>传递的经纬度不合法</span>
            </div>
        </div>
        <!-- 搜索区域 -->
        <a href="#" id="iosFix"></a>
        <div class="search-wrap init-status">
            <div class="search-bar">
                <form name="poi-search" id="poiSearch" onsubmit="return false;">
                    <input type="search" class="keyword" id="searchword" placeholder=" " />
                    <button type="reset" class="clear-input"></button>
                    <button type="submit" class="submit">搜索</button>
                </form>
                <a class="cancle">取消</a>
            </div>
        </div>
        <!-- 搜索提示区域 -->
        <div class="suggestion-wrap">
            <div id="suggestionScroller" class="suggestion-scroller">
                <div class="poi-list">
                    <ul>
                        <!-- 该区域不仅放搜索提示列表，还放点击搜索后的检索结果列表 -->
                    </ul>
                </div>
                <div class="load-wrap hide">
                    <div class="load-data">
                        <!-- 换掉地址 -->
                        <!-- <img width="24" height="24" src="./image/loadData.png" /> -->
                        <img
                            width="24"
                            height="24"
                            src="//3gimg.qq.com/lightmap/components/locationPicker2/image/loadData.png"
                        />
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="no-more-results hide">
                    <p>亲，没有更多了~</p>
                </div>
            </div>
        </div>

        <!-- 地图区域 -->
        <div class="map-wrap">
            <!-- map地图 -->
            <div id="container">
                <div class="marker">
                    <i></i>
                    <!-- 换掉地址 -->
                    <!-- <img width="26px" height="36px" src="./image/marker.png" /> -->
                    <img
                        width="26px"
                        height="36px"
                        src="//3gimg.qq.com/lightmap/components/locationPicker2/image/marker.png"
                    />
                </div>
                <!-- 返回当前位置 -->
                <div class="go-back-pos"><i></i></div>

                <div id="map-info">
                    <!-- 比例尺 -->
                    <div class="scale">200米</div>
                    <div class="qqmap-text-logo"></div>
                </div>

                <div class="to-right">
                    <!-- 缩放按钮 -->
                    <a class="cbutton" id="btn-zoom">
                        <i id="btn-zoom-in" class="icon-zoom-in" data-adtag="zoomin">+</i>
                        <i id="btn-zoom-out" class="icon-zoom-out" data-adtag="zoomout">-</i>
                    </a>
                </div>
            </div>
        </div>

        <!-- poi列表 -->
        <div class="list-wrap">
            <div id="scroller" class="poi-scroller">
                <div id="activePosition" class="active-pos">
                    <h2 class="poi-title"></h2>
                    <p class="poi-address initPos"></p>
                    <span class="poi-latlng"></span>
                    <span class="poi-city"></span>
                    <i class="active"></i>
                </div>
                <div class="poi-list">
                    <ul></ul>
                </div>
                <div class="load-wrap">
                    <div class="load-data">
                        <!-- 换掉地址 -->
                        <!-- <img width="24" height="24" src="/image/loadData.png" /> -->
                        <img
                            width="24"
                            height="24"
                            src="//3gimg.qq.com/lightmap/components/locationPicker2/image/loadData.png"
                        />
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="no-more-results">
                    <p>亲，没有更多了~</p>
                </div>
            </div>
        </div>

        <!-- 换掉地址 -->
        <!-- <script type="text/javascript" src="./js/main-99ae221f02.js"></script> -->
        <script
            type="text/javascript"
            src="//3gimg.qq.com/lightmap/components/locationPicker2/js/main-99ae221f02.js"
        ></script>
        <script src="https://apis.map.qq.com/api/js?v=2.exp&key=VFUBZ-JIR3D-Z2M4H-PPAGG-G5KVQ-S3F2S&callback="></script>
        <script>
            seajs.config({
                // 换自己的目录
                // base: './js/'
                base: './location-picker/'
            });
            seajs.use(['index-6781e3253a.js'], function(View) {
                new View();
            });
        </script>

        <!-- List template -->
        <script id="listTpl" type="text/x-template">
            {{#if list}}
                {{#each list}}
                    <li>
                        <h2 class="poi-title">{{title}}</h2>
                        <p class="poi-address">{{address}}</p>
                        <span class="poi-latlng">{{location.lat}},{{location.lng}}</span>
                        <span class="poi-city">{{ad_info.city}}</span>
                        <i class="active"></i>
                    </li>
                {{/each}}
            {{else}}
                <p class="no-results">o_O出错了~</p>
            {{/if}}
        </script>

        <!-- suggestion template -->
        <script id="sugTpl" type="text/x-template">
            {{#if list}}
                {{#each list}}
                    <li>
                        <p class="item">
                            <span class="poi-title">{{title}}</span>
                            <span class="poi-address">{{address}}</span>
                            <span class="poi-latlng">{{location.lat}},{{location.lng}}</span>
                            <span class="poi-city">{{ad_info.city}}</span>
                        </p>
                    </li>
                {{/each}}
            {{else}}
                {{#if suggestion}}
                    {{#each suggestion}}
                        <li data-lat="{{pointy}}" data-lng="{{pointx}}">
                            <p class="item">
                                <span class="poi-title">{{title}}</span>
                                <span class="poi-address">{{address}}</span>
                                <span class="poi-latlng">{{location.lat}},{{location.lng}}</span>
                                <span class="poi-city">{{city}}</span>
                            </p
                        </li>
                    {{/each}}
                {{/if}}
            {{/if}}
        </script>
        <!-- 统计代码?干掉 -->
        <!-- <script type="text/javascript" src="//pingjs.qq.com/h5/stats.js" name="MTAH5" sid="500153441"></script> -->
    </body>
</html>

d.) 最后的罪魁祸首,改它
在这里插入图片描述
搜索 “formatted_addresses”

var o=e.result.formatted_addresses.recommend

前面加上

if(!e.result) return;var o=e.result.formatted_addresses.recommend

搜索

./image/location.png

替换为

//3gimg.qq.com/lightmap/components/locationPicker2/image/location.png

2.2 使用

http://你web服务地址/locationPicker.html?search=1&type=1&key=you key&referer=myapp

嗯这下可以愉快的玩耍了…

ringlst

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
腾讯地图地图选点组件报错:Cannot read property formatted_addresses of undefined的解决

./css///3gimg.qq.com/lightmap/components/locationPicker2/css/背景新能源充电项目后台需要搞个充电桩经纬度选取的基本功能…懒死,找现成先…找找-----------------呃.地图选点组件http://lbs.qq.com/webApi/component/componentGuide/componentPicker好像能用… 用吧… 懒死我得了问题什么鬼… TXMAP前端快出来背锅先给结论如图: 腾讯位置服务逆地址解
复制链接

扫一扫