vue中使用腾讯API地图，实现搜索关键词获取经纬度和地址并显示地图
vue中使用腾讯API地图，实现搜索关键词获取经纬度和地址并显示地图
- 调用腾讯地图api前需要先去注册并申请key
- 在vue项目中的/public文件夹中的index.html的head中写入
- 安装lodash：npm install --save lodash
- 安装jsonp： npm install vue-jsonp --save
- main.js引入jsonp
importVuefrom'vue'import{VueJsonp}from'vue-jsonp'Vue.use(VueJsonp)Vue.config.productionTip=falsenewVue({router,store,render:h=>h(App)}).$mount('#app')在public中的index.html文件中引入script标签加上链接
<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ***"></script>// key 换成自己的key具体代码功能如下：
// template中<template><div id="app"><divclass="box"><divclass="search-box"><input type="text"v-model="searchValue"class="search"@input="searchHandler"><ulclass=""v-if="kwData.length != 0"><li v-for="(kw, i) in kwData":key="i"@click="clickLiHandler(kw)">{{kw.title}}</li></ul></div><h3>地址：{{address}}</h3><divclass="location"><h3>经度：{{lng}}</h3><h3>纬度：{{lat}}</h3></div><br/><div id='mapContainer'></div></div></div></template>// script<script>// import { debounce } from 'throttle-debounce'// 安装lodash：npm install lodash --save 安装jsonp： npm install vue-jsonp --saveimportlodashfrom'lodash'letthatexportdefault({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(){that=this},mounted(){this.init1()},methods:{init1(){vardrawContainer=document.getElementById('mapContainer');// var center = new window.TMap.LatLng(39.984104, 116.307503);//设置中心点坐标 lat: 23.228237 lng: 113.273747varcenter=newwindow.TMap.LatLng(23.228237,113.273747);//设置中心点坐标 lat: 23.228237 lng: 113.273747this.map=newwindow.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)// 创建点聚合实例varmarkerCluster=newwindow.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)letaddr=event.target.valuethis.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/',{key:'6V3BZ-****',// 换成自己的keyoutput:'jsonp',address:addr}).then((res)=>{console.log(res)if(res.status===0){// 处理得到的经纬度this.longitude=res.result.location.lngthis.latitude=res.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){letkw=event.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.status===0){console.log(res)this.kwData=res.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.searchValue=kwObj.titlethis.lng=kwObj.location.lngthis.lat=kwObj.location.latthis.address=kwObj.addressthis.geometries=[{// 点数组position:newwindow.TMap.LatLng(this.lat,this.lng)}]this.init1()console.log(this.lat,this.lng)this.kwData=[]}}})</script><style lang="less">#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