在index.html页面引入以下代码
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=GOZBZ-MWHKV-GDSPP-UPRNN-YUWEE-EHB5U">script>
<script type="text/javascript" src="http://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js">script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8">script>
自定义TXMap地图组件
<template>
<a-modal :title="title" :visible="showModel" :width="width" @cancel="onClose" @ok="ok">
<p>p>
<div :key="mapKey" :id="'container_' + mapKey" :style="'width:' + (width - 80) + 'px;height:500px;'">div>
<p>经度:{
{longitude}} 纬度:{
{latitude}} 地址:{
{address}}p>
<a-button type="primary" @click="buttonPosition" icon="environment" :loading="loading">定位a-button>
<a-input-search style="width: 300px" placeholder="地址搜索" v-model="searchAdress" enter-button @search="onSearch" />
<a-list style="height: 200px;overflow: scroll">
<a-list-item @click="selectAddr(addr)" :key="idx" v-for="(addr, idx) in narAddress"><h3>{
{addr.name}} <a-tag>{
{addr.category}}a-tag>h3>
<br><h7>地址:{
{addr.address}}h7>a-list-item>
a-list>
a-modal>
template>
<script>
export default {
props: {
show: {
default: false
},
width: {
default: 680
},
title: {
default: ''
}
},
name: 'TXMap',
computed: {
showModel: {
get: function () {
this.setMap()
return this.show
},
set: function () {
}
}
},
data () {
return {
mapKey: new Date().getTime(),
/** loading **/
loading: false,
/** 地址 **/
searchAdress: '百花山路',
detailcontent: '这是我当前的位置',
address: '',
longitude: 106.72622323036194, // 经度
latitude: 26.86139511254856, // 纬度
city: '',
/** 定位 **/
geolocation: null,
myLatlng: null,
map: null,
geo: null,
markerSelect: null,
labelMarkerSelect: null,
narAddress: [],
zoom: 13
}
},
watch: {
},
methods: {
/** **/
onClose () {
this.$emit('close')
},
initMap (location = null) {
// let _this = this
if (!location) {
this.getPosition()
// setTimeout(function () {
// _this.setMap()
// }, 3000)
} else {
this.longitude = location.lng
this.latitude = location.lat
this.setMap()
// setTimeout(function () {
// _this.setMap()
// }, 3000)
}
},
/** ***/
ok () {
let location = {
lat: this.latitude,
lng: this.longitude
}
this.$emit('position', location)
this.$emit('close')
},
/** 进行地址搜索 **/
onSearch () {
let _this = this
// returnCitySN["cip"]+','+returnCitySN["cname"] returnCitySN['cname'] 在index.html 引入了
// eslint-disable-next-line no-undef
let search = returnCitySN['cname'].split('省')[0] + '省,' + returnCitySN['cname'].split('省')[1]
if (_this.searchAdress) {
search += ',' + _this.searchAdress
}
console.log(search)
_this.geo.getLocation(search)// 地址
_this.geo.setComplete(function (res) {
console.log(res)
_this.latitude = res.detail.location.lat
_this.longitude = res.detail.location.lng
_this.detailcontent = res.detail.address
_this.address = res.detail.address
_this.setMap()
_this.detailcontent = '这是我当前的位置'
// eslint-disable-next-line no-undef
let center = new qq.maps.LatLng(_this.latitude, _this.longitude)
// eslint-disable-next-line no-undef
var geocoder = new qq.maps.Geocoder({
complete (res) {
console.log(res)
_this.narAddress = res.detail.nearPois
}
})
geocoder.getAddress(center)
})
},
/** 按钮 **/
buttonPosition () {
this.loading = true
this.getPosition()
},
// 第一部分
/** 定位获得当前位置信息 **/
getMyLocation () {
// eslint-disable-next-line no-undef
this.geolocation = new qq.maps.Geolocation('GOZBZ-MWHKV-GDSPP-UPRNN-YUWEE-EHB5U', 'shopMap')
this.getPosition()
},
/** 执行定位 **/
getPosition () {
// this.geolocation.getIpLocation(this.showPosition, this.showErr)
this.geolocation.getLocation(this.showPosition, this.showErr)// 或者用getLocation精确度比较高
},
showPosition (position) {
let _this = this
console.log('定位成功:', position)
this.latitude = position.lat // 经度
this.longitude = position.lng // 纬度
this.city = position.city
// eslint-disable-next-line no-undef
let center = new qq.maps.LatLng(this.latitude, this.longitude)
// eslint-disable-next-line no-undef
var geocoderPos = new qq.maps.Geocoder({
complete (res) {
console.log('定位成功', res)
_this.narAddress = res.detail.nearPois
}
})
geocoderPos.getAddress(center)
this.setMap()
// 消除loading
this.loading = false
this.address = position.province + position.city
},
showErr () {
console.log('定位失败:')
this.getPosition()// 定位失败再请求定位,测试使用
},
// 第二部分
/** 位置信息在地图上展示 **/
setMap () {
let _this = this
// 步骤:定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
// 设置地图中心点
// eslint-disable-next-line no-undef
let center = new qq.maps.LatLng(this.latitude, this.longitude)
// 定义工厂模式函数
var myOptions = {
zoom: _this.zoom, // 设置地图缩放级别
center: center, // 设置中心点样式
// eslint-disable-next-line no-undef
mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType
}
// //获取dom元素添加地图信息
// eslint-disable-next-line no-undef
let map = new qq.maps.Map(document.getElementById('container_' + _this.mapKey), myOptions)
// 第三部分
/** 给定位的位置添加图片标注 **/
// eslint-disable-next-line no-undef,no-unused-vars
var marker = new qq.maps.Marker({
position: center,
map: map
})
// 给定位的位置添加文本标注
// eslint-disable-next-line no-undef,no-unused-vars,no-redeclare
var marker = new qq.maps.Label({
position: center,
map: map,
content: this.detailcontent
})
/** 信息标记 **/
// eslint-disable-next-line no-undef
var infoWin = new qq.maps.InfoWindow({
map: map
})
/** 点击后生成的地表名称 **/
let address = '此地'
// eslint-disable-next-line no-undef
var geocoder = new qq.maps.Geocoder({
complete (res) {
console.log(res)
address = res.detail.nearPois[0].name // 这里是你点击之处根据经纬度返回的地点名称
_this.narAddress = res.detail.nearPois
}
})
// 第四部分
/** 给地图添加点击事件,并获取鼠标点击的经纬度 **/
// eslint-disable-next-line no-undef,no-unused-vars
qq.maps.event.addListener(map, 'click', function (event) {
console.log(event)
this.longitude = event.latLng.getLng()
this.latitude = event.latLng.getLat()
geocoder.getAddress(event.latLng)
setTimeout(() => {
infoWin.open()
infoWin.setContent(`${
address}`)
infoWin.setPosition(event.latLng)
}, 200)
})
},
/** 选中地址 **/
selectAddr (addr) {
let _this = this
this.longitude = addr.latLng.lng
this.latitude = addr.latLng.lat
_this.address = addr.address
_this.zoom = 17
_this.detailcontent = addr.name
this.setMap()
}
},
mounted () {
this.setMap()
},
created () {
// eslint-disable-next-line no-undef
this.geolocation = new qq.maps.Geolocation('GOZBZ-MWHKV-GDSPP-UPRNN-YUWEE-EHB5U', 'shopMap')
// eslint-disable-next-line no-undef
this.geo = new qq.maps.Geocoder()
}
}
script>
<style scoped>
style>