vue中使用腾讯API地图实现搜索关键词获取经纬度和地址并显示地图调用腾讯地图api前需要先去注册并申请key在vue项目中的/public文件夹中的index.html的head中写入安装lodashnpm install --save lodash安装jsonp npm install vue-jsonp --savemain.js引入jsonpimportVuefromvueimport{VueJsonp}fromvue-jsonpVue.use(VueJsonp)Vue.config.productionTipfalsenewVue({router,store,render:hh(App)}).$mount(#app)在public中的index.html文件中引入script标签加上链接script srchttps://map.qq.com/api/gljs?v1.expkeyOB4BZ***/script// key 换成自己的key具体代码功能如下// template中templatediv idappdivclassboxdivclasssearch-boxinput typetextv-modelsearchValueclasssearchinputsearchHandlerulclassv-ifkwData.length ! 0li v-for(kw, i) in kwData:keyiclickclickLiHandler(kw){{kw.title}}/li/ul/divh3地址{{address}}/h3divclasslocationh3经度{{lng}}/h3h3纬度{{lat}}/h3/divbr/div idmapContainer/div/div/div/template// scriptscript// import { debounce } from throttle-debounce// 安装lodashnpm install lodash --save 安装jsonp npm install vue-jsonp --saveimportlodashfromlodashletthatexportdefault({data(){return{addValue:,longitude:,latitude:,searchValue:,kwData:,clickLi:true,lng:,lat:,address:,markerUrl:require(./assets/logo.png),// 点标记图片路径map:,zoom:4,// 地图一开始的缩放级别center:newwindow.TMap.LatLng(39.984120,116.307484),// 地图一开始的中心点markerLayer:,geometries:[]}},created(){thatthis},mounted(){this.init1()},methods:{init1(){vardrawContainerdocument.getElementById(mapContainer);// var center new window.TMap.LatLng(39.984104, 116.307503);//设置中心点坐标 lat: 23.228237 lng: 113.273747varcenternewwindow.TMap.LatLng(23.228237,113.273747);//设置中心点坐标 lat: 23.228237 lng: 113.273747this.mapnewwindow.TMap.Map(drawContainer,{zoom:9,pitch:40,center:center,draggable:true,scrollable:true,mapStyleId:style 1});console.log(drawContainer,drawContainer)console.log(111,this.map)// 创建点聚合实例varmarkerClusternewwindow.TMap.MarkerCluster({id:cluster,map:this.map,enableDefaultStyle:true,// 启用默认样式minimumClusterSize:1,// 形成聚合簇的最小个数geometries:this.geometries,zoomOnClick:true,// 点击簇时放大至簇内点分离gridSize:60,// 聚合算法的可聚合距离averageCenter:false,// 每个聚和簇的中心是否应该是聚类中所有标记的平均值maxZoom:10// 采用聚合策略的最大缩放级别})markerCluster},// 添加点标记addPoint(point){// 一个point需要有id和坐标this.markerLayer.add([{id:point[id],styleId:mystyle,position:newwindow.TMap.LatLng(point[latitude],point[longitude]),properties:{}// 自定义属性可以没有}])},addrToGetCoordinate(event){console.log(event,event)console.log(event.target.value)letaddrevent.target.valuethis.$jsonp(https://apis.map.qq.com/ws/geocoder/v1/,{key:6V3BZ-****,// 换成自己的keyoutput:jsonp,address:addr}).then((res){console.log(res)if(res.status0){// 处理得到的经纬度this.longituderes.result.location.lngthis.latituderes.result.location.lat console.log(经度,this.longitude)console.log(纬度,this.latitude)// 用获取到的经纬度修改地图的中心点// this.changeCenter(res.result.location.lat.toFixed(6), res.result.location.lng.toFixed(6))}}).catch((e){console.log(e)})},getKwd(event){letkwevent.target.value console.log(111,kw)this.$jsonp(https://apis.map.qq.com/ws/place/v1/suggestion,{key:6V3BZ****,// 换成自己的keyoutput:jsonp,keyword:kw,region:广州市}).then((res){console.log(res)if(res.status0){console.log(res)this.kwDatares.data// 用获取到的经纬度修改地图的中心点// this.changeCenter(res.result.location.lat.toFixed(6), res.result.location.lng.toFixed(6))}else{this.kwData[]}}).catch((e){console.log(e)})},searchHandler:lodash.debounce((event){console.log(222,this)console.log(event,event)that.getKwd(event)},500),clickLiHandler(kwObj){// 点击搜索关键词项// this.clickLi falsethis.searchValuekwObj.titlethis.lngkwObj.location.lngthis.latkwObj.location.latthis.addresskwObj.addressthis.geometries[{// 点数组position:newwindow.TMap.LatLng(this.lat,this.lng)}]this.init1()console.log(this.lat,this.lng)this.kwData[]}}})/scriptstyle langless#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;.search{margin-top:20px;}.box{margin:0auto;width:1080px;margin-top:80px;input{outline:none;width:300px;height:30px;border:1px solid #ccc;padding:10px;background-color:white;box-sizing:border-box;}.search-box{position:relative;ul{// border: 1px solid #ccc;// box-shadow: 1px, 1px, 1px, 1px, #ccc;box-shadow:0px 5px 15pxrgba(165,165,165,0.438);width:300px;position:absolute;left:389px;bottom:-293px;box-sizing:border-box;padding:10px;font-size:12px;z-index:100;background-color:white;li{list-style:none;padding:5px;text-align:left;:hover{background-color:#7ad9ff;cursor:pointer;}}}}.location{display:flex;text-align:center;justify-content:center;h2{width:200px;::nth-child(1){margin-right:20px;}}}}.map{width:700px;height:700px;}#mapContainer{width:600px;height:600px;margin:0auto;}}#nav{padding:30px;a{font-weight:bold;color:#2c3e50;.router-link-exact-active{color:#42b983;}}}/style效果图查考https://blog.csdn.net/l13620804253/article/details/117259244