解决:腾讯地图API跨域问题,地图选点,搜索

2024-04-27 18:32

本文主要是介绍解决:腾讯地图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

相关文章

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

《Knife4j+Axios+Redis前后端分离架构下的API管理与会话方案(最新推荐)》本文主要介绍了Swagger与Knife4j的配置要点、前后端对接方法以及分布式Session实现原理,... 目录一、Swagger 与 Knife4j 的深度理解及配置要点Knife4j 配置关键要点1.Spri

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言:为什么会有索引键长度问题?一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》:本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM