1:安装依赖与引入
- 调用腾讯地图api前需要先去注册并申请key
- 在vue项目中的/public文件夹中的index.html的head中写入
- 安装lodash:npm install --save lodash
- 安装jsonp: npm install vue-jsonp --save
- main.js引入jsonp
import Vue from 'vue'
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)
Vue.config.productionTip = false
new Vue({
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-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
代码
// template中
<template>
<div id="app">
<div class="box">
<div class="search-box">
<input
type="text"
v-model="searchValue"
class="search"
@input="searchHandler">
<ul class="" 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>
<div class="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 --save
import lodash from 'lodash'
let that
export default ({
data() {
return {
addValue: '',
longitude: '',
latitude: '',
searchValue: '',
kwData: '',
clickLi: true,
lng: '',
lat: '',
address: '',
markerUrl: require("./assets/logo.png"), // 点标记图片路径
map: '',
zoom: 4, // 地图一开始的缩放级别
center: new window.TMap.LatLng(39.984120, 116.307484),// 地图一开始的中心点
markerLayer: '',
geometries: []
}
},
created() {
that = this
},
mounted() {
this.init1()
},
methods: {
init1() {
var drawContainer = document.getElementById('mapContainer');
//设置中心点坐标 lat: 23.228237 lng: 113.273747
var center = new window.TMap.LatLng(23.228237, 113.273747);
this.map = new window.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)
// 创建点聚合实例
var markerCluster = new window.TMap.MarkerCluster({
id: 'cluster',
map: this.map,
enableDefaultStyle: true, // 启用默认样式
minimumClusterSize: 1, // 形成聚合簇的最小个数
geometries: this.geometries,
zoomOnClick: true, // 点击簇时放大至簇内点分离
gridSize: 60, // 聚合算法的可聚合距离
averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
maxZoom: 10 // 采用聚合策略的最大缩放级别
})
markerCluster
},
getKwd(val) {
let kw = val
console.log(111, kw)
this.$jsonp('https://apis.map.qq.com/ws/place/v1/suggestion', {
// key: 'ZBABZ-S5LKO-AQAWR-SNHUD-V3AQS-MSBMB',
key: '6V3BZ-BZL6F-SAAJ6-JUS4K-ZCBNZ-6ZFGH',
output: '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 = false
this.searchValue = kwObj.title
this.lng = kwObj.location.lng
this.lat = kwObj.location.lat
this.address = kwObj.address
this.geometries = [
{ // 点数组
position: new window.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: 0 auto;
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 15px rgba(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: 0 auto;
}
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>