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

2024-04-27 18:32
文章标签 问题 搜索 解决 api 地图 腾讯 跨域 选点

本文主要是介绍解决：腾讯地图API跨域问题，地图选点，搜索，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

用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 = nulllet 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].scrollHeightlet 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.dataconsole.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 = falsehtml = `<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 = falsehtml += '<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>```

这篇关于解决：腾讯地图API跨域问题，地图选点，搜索的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/941226。

相关文章

Nginx 配置跨域的实现及常见问题解决

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享（CORS）2. Nginx 配置跨域的场景2.1
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
springboot项目中整合高德地图的实践

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》：本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一：高德开放平台的使用二：创建数据库（我是用的是mysql）三：Springboot所需的依赖（根据你的需求再
阅读更多...
qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

《qt5cored.dll报错怎么解决?电脑qt5cored.dll文件丢失修复技巧》在进行软件安装或运行程序时，有时会遇到由于找不到qt5core.dll,无法继续执行代码，这个问题可能是由于该文... 遇到qt5cored.dll文件错误时，可能会导致基于 Qt 开发的应用程序无法正常运行或启动。这种错
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
SpringBoot排查和解决JSON解析错误(400 Bad Request)的方法

SpringBoot排查和解决JSON解析错误(400 Bad Request)的方法

《SpringBoot排查和解决JSON解析错误(400BadRequest)的方法》在开发SpringBootRESTfulAPI时,客户端与服务端的数据交互通常使用JSON格式,然而,JSON... 目录问题背景1. 问题描述2. 错误分析解决方案1. 手动重新输入jsON2. 使用工具清理JSON3.
阅读更多...
MySQL 设置AUTO_INCREMENT 无效的问题解决

MySQL 设置AUTO_INCREMENT 无效的问题解决

《MySQL设置AUTO_INCREMENT无效的问题解决》本文主要介绍了MySQL设置AUTO_INCREMENT无效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录快速设置mysql的auto_increment参数一、修改 AUTO_INCREMENT 的值。
阅读更多...
关于跨域无效的问题及解决(java后端方案)

关于跨域无效的问题及解决(java后端方案)

《关于跨域无效的问题及解决(java后端方案)》：本文主要介绍关于跨域无效的问题及解决(java后端方案),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录通用后端跨域方法1、@CrossOrigin 注解2、springboot2.0 实现WebMvcConfig
阅读更多...
Go语言中泄漏缓冲区的问题解决

Go语言中泄漏缓冲区的问题解决

《Go语言中泄漏缓冲区的问题解决》缓冲区是一种常见的数据结构,常被用于在不同的并发单元之间传递数据,然而,若缓冲区使用不当,就可能引发泄漏缓冲区问题,本文就来介绍一下问题的解决,感兴趣的可以了解一下... 目录引言泄漏缓冲区的基本概念代码示例：泄漏缓冲区的产生项目场景：Web 服务器中的请求缓冲场景描述代码
阅读更多...
Java死锁问题解决方案及示例详解

Java死锁问题解决方案及示例详解

《Java死锁问题解决方案及示例详解》死锁是指两个或多个线程因争夺资源而相互等待,导致所有线程都无法继续执行的一种状态,本文给大家详细介绍了Java死锁问题解决方案详解及实践样例,需要的朋友可以参考下... 目录1、简述死锁的四个必要条件：2、死锁示例代码3、如何检测死锁？3.1 使用 jstack3.2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2