目录
腾讯地图
腾讯地图API学习-官方地址：https://lbs.qq.com/webDemoCenter/glAPI/glServiceLib/geocoderGetLocation
个人博客地址：
基础入门
1. 初始化地图：
方式一
this.latLng = new qq.maps.LatLng( lat, lng );// 初始化默认坐标(入参：经纬度）
// this.mapDetail = new qq.maps.Map( 目标DOM节点 ), {// 默认地图模式
zoom: 13,// 设置地图缩放级别
center: this.latLng,// 设置地图中心点坐标
});
方式二
this.latLng = new TMap.LatLng( lat, lng );// 初始化默认坐标(入参：经纬度）
this.mapDetail = new TMap.Map( 目标DOM节点 ), {// 默认地图模式
zoom: 13,// 设置地图缩放级别
center: this.latLng,// 设置地图中心点坐标
});
事件监听
1. 监听地图瓦片加载完成事件
监听地图瓦片加载完成事件
let that = this
// 监听地图瓦片加载完成事件
this.mapDetail.on("tilesloaded", function () {
console.log(`腾讯地图加载完成`);
})
移除缩放控件 & 旋转控件 & 比例尺控件
console.log(`移除缩放控件 & 旋转控件 & 比例尺控件`);
let toDeleteArr = ['ZOOM', 'ROTATION', 'SCALE']
toDeleteArr.map(i => {
if (this.mapDetail.getControl(TMap.constants.DEFAULT_CONTROL_ID[i])) this.mapDetail.removeControl(TMap.constants.DEFAULT_CONTROL_ID[i]);
})
初始化marker图层
console.log(`初始化marker图层`);
this.markerLayer = new TMap.MultiMarker({
id: `marker-layer`,
map: this.mapDetail,
styles: {
// 点标记样式：marker
marker: new TMap.MarkerStyle({
width: 25, // 样式宽
height: 40, // 样式高
anchor: { x: 10, y: 30 }, // 描点位置
// src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',// 引入自定义大头针图标
}),
},
});
创建信息窗
console.log(`创建信息窗`);
this.info = new TMap.InfoWindow({
map: this.mapDetail,
position: this.mapDetail.getCenter(),
offset: { x: -3, y: -35 } //设置信息窗相对position偏移像素
}).close();
console.dir(this.info.dom);
点击地图拾取坐标
let that = this
//绑定点击事件
this.mapDetail.on("click", function( evt ) {
var lat = evt.latLng.getLat().toFixed(7);
var lng = evt.latLng.getLng().toFixed(7);
console.log(`当前点击的坐标为：${ lat }, ${ lng }`);
that.inglatXY = [ lng, lat ]
that.getDetailAddress( lat, lng );
that.toMarker( lat, lng );
that.mapDetail.panTo(new qq.maps.LatLng(lat, lng))
})
打点标记
去进行打点标记
if (this.markerLayer) {
this.removeMarker();
this.toCreateMarkerLayer();
}
this.markerLayer.add({
position: new TMap.LatLng( lat, lng ),
styleId: 'marker',// 应用自定义样式
});
console.log(this.markerLayer.geometries[0].position, `markerLayer`);
创建折线对象
内容如下：
toCreateMultiPolyline() {
console.log(`创建折线对象 ~ 腾讯地图 API`);
this.multiPolyline = new TMap.MultiPolyline({
id: `polyline-layer`,
map: this.mapDetail,
styles: {
style_blue: new TMap.PolylineStyle({
color: "#3777FF", // 线填充色
width: 6, // 折线宽度
borderWidth: 5,
// borderColor: "#d12921", // 边线颜色
borderColor: "#fff", // 边线颜色
// lineCap: "square",// 线端头方式 - butt - round
lineCap: "butt",// 线端头方式 - butt
showArrow: true, // 是否沿线方向展示箭头
arrowOptions: {
width: 8,
height: 5,
space: 80,
},
}),
},
})
},
toAddMultiPolyline( paths ) {
console.log(`添加折线`, paths);
this.multiPolyline.add({
styleId: 'style_blue',// 应用自定义样式
paths,
});
},
反解析成详细地址
let geocoder = new qq.maps.Geocoder();// 初始化geocoder
let latLng = new qq.maps.LatLng( lng, lat );
geocoder.getAddress( latLng );
geocoder.setComplete(result => {
this.detailAddress = result.detail.address;
console.log(`地址：`, this.detailAddress);
this.toShowPOI( { poi: { name: this.detailAddress, latLng } } );
});
geocoder.setError( err => {
this.$message.warning(`解析地址出错`);
});
根据输入详细地址 反解析成经纬度
let _this = this
if (val) {
let geocoder = new qq.maps.Geocoder();// 初始化geocoder
geocoder.getLocation(val)
geocoder.setComplete(result => {
const { lat, lng } = result.detail.location;
let latLng = new qq.maps.LatLng(lat, lng);
this.latitude = lat;
this.longitude = lng;
this.toMarker( lat, lng )
this.toShowPOI( { poi: { name: result.detail.address, latLng } } );
this.mapDetail.panTo(new qq.maps.LatLng(lat, lng))
console.log(result.detail, 'getXYByDetailAddress');
})
geocoder.setError(err => {
console.log(`解析错误，请输入正确地址`);
// this.$message.warning(`解析错误，请输入正确地址`);
});
腾讯地图（GL版本，JavaScriptV2版本比较学习）
<template>
<div class="addMarker">
<el-input class="search-part" size="small" v-model="searchAddress" clearable
placeholder="请输入详细地址(回车搜索)" @keydown.enter.native="getXYByDetailAddress(searchAddress)"
v-if="!disabled">
<template slot="prefix">
<i class="el-icon-search" @click="getXYByDetailAddress(searchAddress)"></i>
</template>
</el-input>
<div id="mapDiv"></div>
</div>
</template>
<script>
export default {
name: "addMarker",
props: {
inglatXYProp: {
type: Array,
default: () => []
},
disabled: {
type: Boolean,
default: false
}
},
beforeDestroy() {
this.toMapDestroy();
},
mounted() {
this.initMap();
this.toCreateMarkerLayer();
this.toCreateInfoWindow();
if(!this.disabled) {
this.toPickCoordinates();
}
this.toMarker( this.inglatXYProp[1], this.inglatXYProp[0] );
this.getDetailAddress( this.inglatXYProp[1], this.inglatXYProp[0] );
if(this.disabled) {
var localMarker = new qq.maps.Marker({
position: latLng,
map: this.mapDetail
});
}
},
data() {
return {
//点标记
marker: null,
//信息窗体
infoWindow: null,
//地图
amap: null,
//经纬度 [lng,lat]
inglatXY: [],
//详细地址
detailAddress: '',
//当前所在城市的center经纬度
locationXY: [],
//搜索框绑定的--详细地址
searchAddress: '',
markersArray: [],
mapDetail: null,
latLng:null
}
},
watch: {
inglatXY(val, oldV) {
this.$emit('change', val)
}
},
methods: {
initMap() {
/**
* https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview 腾讯地图 javascriptGL 写法
*/
// this.latLng = new TMap.LatLng( this.inglatXYProp[1], this.inglatXYProp[0] );// 初始化默认坐标
// this.mapDetail = new TMap.Map(document.getElementById("mapDiv"), {// 默认地图模式
// zoom: 13,// 设置地图缩放级别
// center: this.latLng,// 设置地图中心点坐标
// });
/**
* https://lbs.qq.com/webDemoCenter/javascriptV2/control/controlDisableDefaultUI 腾讯地图 javascriptV2 写法（2d版本）
*/
this.latLng = this.toGetLatLng( this.inglatXYProp[1], this.inglatXYProp[0] );// 初始化默认坐标（lat, lng）
this.mapDetail = new qq.maps.Map(document.getElementById("mapDiv"), {
disableDefaultUI: true,//禁止所有控件
zoom: 13,
center: this.latLng,
});
},
toCreateMarkerLayer() {
/**
* 腾讯地图 javascriptGL 写法
*/
// this.markerLayer = new TMap.MultiMarker({
// id: `marker-layer`,
// map: this.mapDetail,
// styles: {
// marker: new TMap.MarkerStyle({
// width: 25, // 样式宽
// height: 40, // 样式高
// anchor: { x: 10, y: 30 }, // 描点位置
// }),
// },
// });
/**
* 腾讯地图 javascriptV2 写法（2d版本）
*/
this.markerLayer = new qq.maps.Marker({
map: this.mapDetail,
// icon: ``,// 自定义标记图标
});
},
toMarker( lat, lng ) {
if (this.markerLayer) {
this.removeMarker();
this.toCreateMarkerLayer();
}
/**
* 腾讯地图 javascriptGL 写法
*/
// this.markerLayer.add({
// position: new TMap.LatLng( lat, lng ),
// styleId: 'marker',// 应用自定义样式
// });
/**
* 腾讯地图 javascriptV2 写法（2d版本）
*/
this.markerLayer.position = this.toGetLatLng( lat, lng );
},
removeMarker() {
console.log(`移除marker事件`);
this.markerLayer.setMap(null);
this.markerLayer = null;
},
toMapDestroy() {
console.log(`销毁腾讯地图`);
/**
* 腾讯地图 javascriptGL 写法
*/
// this.mapDetail.destroy();
/**
* 腾讯地图 javascriptV2 写法（2d版本）
* 没有找到，应该是老版本没有该方法
*/
},
tilesloaded() {
// let that = this
/**
* 腾讯地图 javascriptGL 写法
* 监听地图瓦片加载完成事件
*/
// this.mapDetail.on("tilesloaded", function () {
// console.log(`腾讯地图加载完成`);
// // that.$message.success(`腾讯地图加载完成`);
// })
/**
* 腾讯地图 javascriptV2 写法（2d版本）
* 没有找到，应该是老版本没有该方法
*/
},
removeControl() {
console.log(`移除缩放控件 & 旋转控件 & 比例尺控件`);
/**
* 腾讯地图 javascriptGL 写法
*/
// let toDeleteArr = ['ZOOM', 'ROTATION', 'SCALE']
// toDeleteArr.map(i => {
// if (this.mapDetail.getControl(TMap.constants.DEFAULT_CONTROL_ID[i])) this.mapDetail.removeControl(TMap.constants.DEFAULT_CONTROL_ID[i]);
// })
/**
* 腾讯地图 javascriptV2 写法（2d版本）
* 老版本是通过地图初始化传入属性控制
*/
},
toPickCoordinates() {
let that = this
/**
* 腾讯地图 javascriptGL 写法
*/
// this.mapDetail.on("click", function( evt ) {
// var lat = evt.latLng.getLat().toFixed(7);
// var lng = evt.latLng.getLng().toFixed(7);
// that.inglatXY = [ lng, lat ]
// that.getDetailAddress( lat, lng );
// that.toMarker( lat, lng );
// })
/**
* 腾讯地图 javascriptV2 写法（2d版本）
* 添加监听事件
*/
qq.maps.event.addListener(this.mapDetail, 'click', function( evt ) {
console.log(`您点击了地图：经度：${ evt.latLng.lng }, 纬度：${ evt.latLng.lat }`, evt);
var lat = evt.latLng.lat.toFixed(7);
var lng = evt.latLng.lng.toFixed(7);
that.inglatXY = [ lng, lat ]
that.getDetailAddress( lat, lng );
that.toMarker( lat, lng );
});
},
toCreateInfoWindow() {
if(this.info) {
this.info.close()
}
/**
* 腾讯地图 javascriptGL 写法
*/
// this.info = new TMap.InfoWindow({
// map: this.mapDetail,
// position: this.mapDetail.getCenter(),
// offset: { x: 3, y: -35 } //设置信息窗相对position偏移像素
// }).close();
/**
* 腾讯地图 javascriptV2 写法（2d版本）
* 没有找到，应该是老版本没有该方法
*/
this.info = new qq.maps.InfoWindow({
map: this.mapDetail,
});
},
toGetLatLng( lat, lng ) {
return new qq.maps.LatLng( lat, lng )
},
toShowPOI( evt ) {
console.log(`点击地图拾取POI`);
// 获取click事件返回的poi信息
let poi = evt.poi;
if (poi) {
// 拾取到POI
/**
* 腾讯地图 javascriptGL 写法
*/
// this.info.setContent( poi.name ).setPosition( new TMap.LatLng( poi.latLng.lat, poi.latLng.lng ) ).open();
/**
* 腾讯地图 javascriptV2 写法（2d版本）
* 没有找到，应该是老版本没有该方法
*/
this.info.setContent( poi.name )
this.info.setPosition( this.toGetLatLng( poi.latLng.lat, poi.latLng.lng ) )
this.info.open();
} else {
// 没有拾取到POI
this.info.close();
}
},
setLocationByLatLng( lat, lng ) {
setTimeout(() => {
let latLng = this.toGetLatLng( lat, lng );
this.geocoder.getAddress(latLng);
});
},
getXYByDetailAddress(val) {
let _this = this
if (val) {
let geocoder = new qq.maps.Geocoder();// 初始化geocoder
geocoder.getLocation(val)
geocoder.setComplete(result => {
const { lat, lng } = result.detail.location;
this.latitude = lat;
this.longitude = lng;
this.inglatXY = [lng, lat]
this.getDetailAddress( lat, lng );
this.toMarker( lat, lng )
console.log(this.mapDetail.panTo( this.toGetLatLng( lat, lng ) ));
})
geocoder.setError(err => {
console.log(`解析错误，请输入正确地址`);
});
}
},
getDetailAddress( lat, lng ) {
let geocoder = new qq.maps.Geocoder();// 初始化geocoder
let latLng = this.toGetLatLng( lat, lng );
geocoder.getAddress( latLng );
geocoder.setComplete(result => {
console.log(`地址：`, result);
this.detailAddress = result.detail.address;
console.log(`地址：`, this.detailAddress);
this.toShowPOI( { poi: { name: this.detailAddress + '(' + latLng + ')', latLng } } );
});
geocoder.setError( err => {
this.$message.warning(`解析地址出错`);
});
},
}
}
</script>
<style lang="scss">
.addMarker {
position: relative;
.search-part {
width: 350px;
margin-right: 10px;
position: absolute;
z-index: 1110;
top: 14px;
left: 12px;
.el-input__inner {
height: 45px;
line-height: 46px;
opacity: 0.96;
}
.el-input__prefix {
cursor: pointer;
}
}
#mapDiv {
width: 100%;
height: 400px;
border: 1px solid #666;
}
}
</style>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
