解决：腾讯地图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。

相关文章

Springboot3统一返回类设计全过程(从问题到实现)

Springboot3统一返回类设计全过程(从问题到实现)

《Springboot3统一返回类设计全过程(从问题到实现)》文章介绍了如何在SpringBoot3中设计一个统一返回类,以实现前后端接口返回格式的一致性,该类包含状态码、描述信息、业务数据和时间戳,... 目录Spring Boot 3 统一返回类设计：从问题到实现一、核心需求：统一返回类要解决什么问题？
阅读更多...
解决idea启动项目报错java: OutOfMemoryError: insufficient memory

解决idea启动项目报错java: OutOfMemoryError: insufficient memory

《解决idea启动项目报错java:OutOfMemoryError:insufficientmemory》：本文主要介绍解决idea启动项目报错java:OutOfMemoryError... 目录原因：解决：总结 原因：在Java中遇到OutOfMemoryError: insufficient me
阅读更多...
maven异常Invalid bound statement(not found)的问题解决

maven异常Invalid bound statement(not found)的问题解决

《maven异常Invalidboundstatement(notfound)的问题解决》本文详细介绍了Maven项目中常见的Invalidboundstatement异常及其解决方案,文中通过... 目录Maven异常：Invalid bound statement (not found) 详解问题描述可
阅读更多...
idea粘贴空格时显示NBSP的问题及解决方案

idea粘贴空格时显示NBSP的问题及解决方案

《idea粘贴空格时显示NBSP的问题及解决方案》在IDEA中粘贴代码时出现大量空格占位符NBSP,可以通过取消勾选AdvancedSettings中的相应选项来解决... 目录1、背景介绍2、解决办法3、处理完成总结1、背景介绍python在idehttp://www.chinasem.cna粘贴代码，出
阅读更多...
SpringBoot整合Kafka启动失败的常见错误问题总结(推荐)

SpringBoot整合Kafka启动失败的常见错误问题总结(推荐)

《SpringBoot整合Kafka启动失败的常见错误问题总结(推荐)》本文总结了SpringBoot项目整合Kafka启动失败的常见错误,包括Kafka服务器连接问题、序列化配置错误、依赖配置问题、... 目录一、Kafka服务器连接问题1. Kafka服务器无法连接2. 开发环境与生产环境网络不通二、序
阅读更多...
SpringSecurity中的跨域问题处理方案

SpringSecurity中的跨域问题处理方案

《SpringSecurity中的跨域问题处理方案》本文介绍了跨域资源共享（CORS）技术在JavaEE开发中的应用,详细讲解了CORS的工作原理,包括简单请求和非简单请求的处理方式,本文结合实例代码... 目录1.什么是CORS2.简单请求3.非简单请求4.Spring跨域解决方案4.1.@CrossOr
阅读更多...
nacos服务无法注册到nacos服务中心问题及解决

nacos服务无法注册到nacos服务中心问题及解决

《nacos服务无法注册到nacos服务中心问题及解决》本文详细描述了在Linux服务器上使用Tomcat启动Java程序时,服务无法注册到Nacos的排查过程,通过一系列排查步骤,发现问题出在Tom... 目录简介依赖异常情况排查断点调试原因解决NacosRegisterOnWar结果总结简介1、程序在
阅读更多...
解决java.util.RandomAccessSubList cannot be cast to java.util.ArrayList错误的问题

解决java.util.RandomAccessSubList cannot be cast to java.util.ArrayList错误的问题

《解决java.util.RandomAccessSubListcannotbecasttojava.util.ArrayList错误的问题》当你尝试将RandomAccessSubList... 目录Java.util.RandomAccessSubList cannot be cast to java.
阅读更多...
Apache服务器IP自动跳转域名的问题及解决方案

Apache服务器IP自动跳转域名的问题及解决方案

《Apache服务器IP自动跳转域名的问题及解决方案》本教程将详细介绍如何通过Apache虚拟主机配置实现这一功能,并解决常见问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录​​问题背景​​解决方案​​方法 1：修改 httpd-vhosts.conf（推荐）​​步骤
阅读更多...
java反序列化serialVersionUID不一致问题及解决

java反序列化serialVersionUID不一致问题及解决

《java反序列化serialVersionUID不一致问题及解决》文章主要讨论了在Java中序列化和反序列化过程中遇到的问题,特别是当实体类的`serialVersionUID`发生变化或未设置时,... 目录前言一、序列化、反序列化二、解决方法总结前言serialVersionUID变化后，反序列化失
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2