解决：腾讯地图API跨域问题，地图选点，搜索

最新推荐文章于 2024-06-07 09:42:42 发布
最新推荐文章于 2024-06-07 09:42:42 发布
阅读量6.6k 收藏 9
点赞数 2
文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tutouXiaoGe/article/details/117464438
版权

用jsonp，解决跨域，请求url后面要加上 output=jsonp，直接复制代码，换上自己的key可用，先上效果图

$.ajax({
	      type: 'get',
	      url: 'https://apis.map.qq.com/ws/place/v1/suggestion?output=jsonp',
	      async: false,
	      data: params,
	      dataType: 'jsonp',
	      headers: {
	          'Access-Control-Allow-Origin': '*',
	          'Access-Control-Allow-Methods': 'GET,POST',
	      },
	      success: function (result) {
	          reslove(result)
	      },
	      error: function (xhr, errorType, error) {
	          console.log('xhr', xhr)
	          console.log('errorType', errorType)
	          console.log('error', error)
	          reject(xhr)
	      },
	      complete: function () { },
	  })

<style>
* {
    margin: 0;
    padding: 0;
}

#container {
    position: fixed;
    top: 50px;
    width: 100vw;
    bottom: 0;
}

.search_part {
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    line-height: 50px;
    background: #ff8080;
}

#place_list {
    position: fixed;
    top: 50px;
    width: 100vw;
    bottom: 0;
    z-index: 2;
    overflow-y: scroll;
    padding: 0 20px;
    box-sizing: border-box;
    background: #fff;
    display: none;
}

#cancel_btn{
    display: none;
}

.back {
    width: 20px;
}

.search_wrap {
    flex: 1;
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
    line-height: 30px;
    margin: 0 20px;
    overflow: hidden;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.4);
}

.search_wrap input {
    border: none;
    height: 100%;
    outline: none;
    flex: 1;
    color: #fff;
    margin-left: 10px;
    background: transparent;
}

.icon_search {
    width: 18px;
    height: 18px;
    margin-left: 20px;
}

.no_place {
    text-align: center;
    margin-top: 100px;
    color: #aaa;
}

.placeItem{
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.place_title{
    color: #333;
    font-size: 14px;
}
.sub_place{
    color: #aaa;
    margin-top: 10px;
    font-size: 12px;
}
.no_more{
    font-size: 14px;
    padding: 20px 0;
    text-align: center;
    color: #aaa;
}

.loader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    z-index: 9;
    background: rgba(255, 255, 255, 0.6);
    /* Delay both the second and third circle at the start */
  }
  .loader .circle {
    background-color: #ff8080;
    margin-right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: loadingcircle 1s infinite;
    animation-iteration-count: infinite;
  }
  .loader .circle:last-child {
    margin-right: 0px;
  }
  .loader .circle:nth-child(2) {
    animation-delay: 0.1s;
  }
  .loader .circle:nth-child(3) {
    animation-delay: 0.2s;
  }
  
  @keyframes loadingcircle {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  
</style>
<body>
    <div class="search_part">
        <div class="search_wrap">
            <img class="icon_search" src="./static/search.png" alt="" />
            <input id="keyword" type="text" />
        </div>
        <div id="search_btn">搜索</div>
        <div id="cancel_btn">取消</div>
    </div>
    <div id="place_list">
        <div class="no_place">
            <img src="./static/no_address.png" alt="" />
        </div>
    </div>
    <!-- 定义地图显示容器 -->
    <div id="container"></div>
</body>

<script src="https://map.qq.com/api/gljs?v=1.exp&key=腾讯地图key"></script>
<script src="./js/jquery-3.5.1.js"></script>
<script src="./js/lodash.js"></script>
<script>
    $(function () {
        let placeList = []
        let map = null
        let pager = {
            page_index: 1,
            page_size: 20
        }
        let keyword = ''//关键词
        let more = true
        
        // 地图初始化
        initMap()

        $('#keyword').focus(function () {
            $('#place_list').show()
        })

        $('#cancel_btn').click(function () {
            $('#place_list').hide()
            $(this).hide()
            $('#search_btn').show()
        })

        $('#search_btn').click(function () {
            $(this).hide()
            $('#cancel_btn').show()
            $('#keyword').focus()
        })
        
        $('#keyword').focus(function () {
            $('#cancel_btn').show()
            $('#search_btn').hide()
        })

        // 地址搜索
        $('#keyword').on(
            'input propertychange',
            _.debounce(function () {
                keyword = $(this).val()
                if (keyword != '') {
                    getSearchResult()
                }
            }, 500)
        )

        

        // 触底加载
        $('#place_list').on('scroll', function (res) {
            let scrollHeight = $(this)[0].scrollHeight
            let scrollTop = $(this).scrollTop()
            let height = $(this).height()
            if ((scrollTop + height >= scrollHeight) && more) {
                console.log('触底了')
                pager.page_index++
                getSearchResult()
            }
        })

        // 地点选择
        $(document).delegate('.placeItem', 'click', function () {
            let lat = $(this).attr('lat')
            let lng = $(this).attr('lng')
            console.log()
            $('#place_list').hide()
            map.panTo([Number(lat), Number(lng)])
            // map.setCenter(new TMap.LatLng(lat, lng))
        })


        function getSearchResult() {
            let data = {
                ...pager, keyword
            }
            showLoading()
            placeSearch(data).then(res => {
                let html = ''
                let result = res.data
                console.log(res.data)
                for (let index in result) {
                    let item = result[index]
                    html += `<div class="placeItem" lat="${item.location.lat}" lng="${item.location.lng}">
                                <div class="place_title">${item.address}</div>
                                <div class="sub_place">${item.address}</div>
                            </div>`
                }
                if (result.length == 0 && data.page_index == 1) {
                    more = false
                    html = `<div class="no_place">
                                <img src="./static/no_address.png" alt="" />
                            </div>`
                } else if ((data.page_index > 1 && data.page_size > result.length) || (data.page_index == 1 && data.page_size > result.length)) {
                    // 加载完全部
                    more = false
                    html += '<div class="no_more">没有更多啦～</div>'
                }
                if (data.page_index == 1) {
                    placeList = result
                    $('#place_list').html(html)
                } else {
                    placeList.concat(result)
                    $('#place_list').append(html)
                }
                $('.loader').remove()
            })
        }

        function placeSearch(data = {}) {
            return new Promise((reslove, reject) => {
                let params = {
                    key: 'OLBBZ-APHKX-AQD4Y-TX3NS-SU6Q5-BHBTH',
                    ...data
                }
                $.ajax({
                    type: 'get',
                    url: 'https://apis.map.qq.com/ws/place/v1/suggestion?output=jsonp',
                    async: false,
                    data: params,
                    dataType: 'jsonp',
                    headers: {
                        'Access-Control-Allow-Origin': '*',
                        'Access-Control-Allow-Methods': 'GET,POST',
                    },
                    success: function (result) {
                        reslove(result)
                    },
                    error: function (xhr, errorType, error) {
                        console.log('xhr', xhr)
                        console.log('errorType', errorType)
                        console.log('error', error)
                        reject(xhr)
                    },
                    complete: function () { },
                })
            })
        }
        //地图初始化函数，本例取名为init，开发者可根据实际情况定义
        function initMap() {
            //定义地图中心点坐标
            var center = new TMap.LatLng(39.98412, 116.307484)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            map = new TMap.Map(document.getElementById('container'), {
                center: center, //设置地图中心点坐标
                zoom: 16, //设置地图缩放级别
                pitch: 0, //设置俯仰角
                rotation: 45, //设置地图旋转角度
            })
            var marker = marker = new TMap.MultiMarker({
                id: 'marker-layer',
                map: map,
                styles: {
                    "marker": new TMap.MarkerStyle({
                        "width": 35,
                        "height": 35,
                        "src": './static/location.png'
                    })
                },
                geometries: [{
                    "styleId": 'marker',
                    "position": new TMap.LatLng(39.98412, 116.307484),
                    "properties": {
                        "title": "marker"
                    }
                }]
            });

            map.on("click", function (evt) {
                let lat = evt.latLng.getLat().toFixed(6);
                let lng = evt.latLng.getLng().toFixed(6);

                if (marker) {
                    marker.setMap(null);
                    marker = null;
                }
                marker = new TMap.MultiMarker({
                    id: 'marker-layer',
                    map: map,
                    styles: {
                        "marker": new TMap.MarkerStyle({
                            "width": 35,
                            "height": 35,
                            "src": './static/location.png'
                        })
                    },
                    geometries: [{
                        "styleId": 'marker',
                        "position": new TMap.LatLng(lat, lng),
                        "properties": {
                            "title": "marker"
                        }
                    }]
                });
                map.panTo([lat, lng])
            })
        }


    })


</script>```
tomatoAndXihongshi
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
WebApi 跨域问题解决方案：CORS
07-23
同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaScript或Cookie只能访问同域下的内容。 正是由于这个原因，我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景：WebApi作为数据服务层，它是一个单独的项目，我们的MVC项目作为Web的显示层，这个时候我们的MVC里面就需要调用WebApi里面的接口取数据展现在页面上。因为我们的WebApi和MVC是两个不同的项目，所以运行起来之后就存在上面说的跨域的问题。
解决腾讯地图地址解析跨域问题
weixin_42738504的博客
08-15 1593
腾讯地图，地址解析，解决跨域
vue 在对接腾讯地图api跨域
最新发布
AZP的博客
06-07 285
使用vue时有个场景需要调用腾讯地图api，报了跨域问题。
uniapp 引入腾讯地图解决H5端接口跨域
记录本人工作中遇到的问题、经验总结以及分享。
06-29 2244
4、配置文件填写地图key。
vue3 引入腾讯地图解决请求接口https://apis.map.qq.com/ws/place/v1/suggestion跨域问题
galaxyJING的博客
12-27 862
重写 jsonp，就不用在项目中安装 jsonp 了。
腾讯地图——逆地址解析以及解决跨域问题
weixin_46824709的博客
07-01 9683
详细api参数请查看 官方文档 作者也是在使用的时候遇到了几个问题，我在这给大家避下坑：在本地使用接口的使用我们会遇到No ‘Access-Control-Allow-Origin’ header is present on the requested resource’跨域错误，所以就需要我们在vue.config.js配置代理 vue.fonfig.js 文件： 之后我们就必须改变一下腾讯地图给我们的api接口： 注意这里我加了tx这个标识，改成本地的localhost。当我们调用接口时有报错时可以查看
vue调用腾讯地图API报错跨域问题解决Access to XMLHttpRequest at‘httplocalhost
weixin_49045461的博客
10-30 1442
1.下载vue-jsonp解决跨域问题。2.在main.js中引用。3.调用腾讯地图API。
【uniapp】使用腾讯地图H5报跨域如何解决？
kikikiuu的博客
11-11 4501
我在用腾讯地图的api去通过地址编译出经纬度，再去定位位置，但是在调用腾讯api的时候，报跨域了，以下是报跨域问题的解决方案
vue3 引入腾讯地图解决请求接口跨域问题
forever__fish的博客
04-04 1196
上一篇文章中写到使用 uniapp 如何解决跨域问题，那么在使用 Vue3 时，又该如何去处理呢？
腾讯位置服务 web获取当前地址及跨域问题
qq_35003310的博客
04-28 1959
1. 腾讯位置服务 - 立足生态，连接未来 注册账号, 并创建一个key 2.直接请求 .then(() => { request({ type: 'get', url: 'http://apis.map.qq.com/ws/location/v1/ip', data: { key: '把你的key复制到这里', }, dataType: 'jsonp',
正确面对跨域，别慌
weixin_34025051的博客
12-12 570
前端开发中，跨域使我们经常遇到的一个问题，也是面试中经常被问到的一些问题，所以，这里，我们做个总结。小小问题，不足担心 原文地址：YOU-SHOULD-KNOW-JS 什么是跨域 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。 同源策略限制了一下行为： Cookie、LocalStorage 和 IndexDB 无法读取 ...
关于 qiankun 微前端 本地跨域问题
qq_53439433的博客
07-31 1430
需要修改 vue.config.js配置。
H5使用jsonp解决调用腾讯地图Api跨域问题
weixin_45219465的博客
01-17 844
的时候，一般情况下我们直接使用都会出现跨域的情况出现，我们可以使用vue-jsonp解决我们的跨域问题；2.在自己需要进行解决跨域的页面引入vue-jsonp;以下是我在项目中对经纬度进行地址逆向解析的例子。1.首先在自己的项目中使用npm安装vue-jsonp；
jquery 腾讯地图如何调用接口，处理跨域问题
PrimaryColor
11-30 1168
代码： $.ajax({ url: 'https://apis.map.qq.com/ws/geocoder/v1/', type: 'GET', data:{ key:'NUMBZ-QW4RF-CLQJI-J5A77-XIRM3-26BWY', //腾讯key（我的测试key） output:'jsonp', locat
uniapp解决H5引入腾讯地图跨域问题
weixin_45518336的博客
08-07 508
manifest.json--web配置--腾讯地图填写key。
vue pc端使用腾讯地图进行搜索和选点
qq_39822531的博客
10-26 2724
vuepc端使用腾讯地图进行搜索选点
uniapp 使用腾讯地图 H5端跨域解决方法（手写jsonp）
哈米西的博客
07-20 3022
uniapp 使用腾讯地图 H5端跨域解决方法 文章大致架构参考此博客 问题 项目中使用腾讯地图sdk或者webService api h5端出现跨域问题 解决方法 实现一个jsonp函数 原理：动态生成一个JavaScript标签，其src由接口url、请求参数、callback函数名拼接而成，利用js标签没有跨域限制的特性实现跨域请求。 const jsonp = function(url, data) { return new Promise((resolve, reject) =&
地图选点（基于腾讯地图实现）
weixin_45181611的博客
03-28 4090
地图选点定位（基于腾讯地图实现）
地图选点（百度地图web端）
Manong
10-21 2898
百度地图web端的地图选点组件，即调即用
fastapi解决跨域问题
11-30
解决fastapi跨域问题的方法是使用fastapi.middleware.cors库。该库提供了一个CORSMiddleware类，可以轻松地添加CORS（跨源资源共享）支持。以下是解决fastapi跨域问题的步骤： 1. 安装fastapi.middleware.cors库 ```shell pip install fastapi.middleware.cors ``` 2. 导入CORSMiddleware类 ```python from fastapi.middleware.cors import CORSMiddleware ``` 3. 创建一个中间件实例 ```python app = FastAPI() origins = [ "http://localhost", "http://localhost:8080", ] app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) ``` 在上面的代码中，我们创建了一个名为app的FastAPI实例，并定义了一个名为origins的列表，其中包含允许的来源。然后，我们创建了一个CORSMiddleware实例，并将其添加到应用程序中。在这个例子中，我们允许来自origins列表中的任何来源，允许凭据，允许任何方法和任何标头。 4. 运行应用程序并测试跨域请求 ```python if __name__ == "__main__": uvicorn.run(app, host="0.0.0.0", port=8000) ``` 在上面的代码中，我们使用uvicorn运行应用程序，并将其绑定到0.0.0.0:8000。现在，我们可以使用任何跨域请求测试我们的应用程序。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值