技术标签: 学习
腾讯地图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]);
})
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(`解析错误,请输入正确地址`);
});
<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>
文章浏览阅读3.5k次,点赞2次,收藏13次。为了从FTP服务器下载文件,需要要实现一个简单的FTP客户端。FTP(文件传输协议) 是 TCP/IP 协议组中的应用层协议。FTP协议使用字符串格式命令字,每条命令都是一行字符串,以“\r\n”结尾。客户端发送格式是:命令+空格+参数+"\r\n"的格式服务器返回格式是以:状态码+空格+提示字符串+"\r\n"的格式,代码只要解析状态码就可以了。读写文件需要登陆服务器,特殊用..._ftp 登录返回230
文章浏览阅读648次。前提:systemctl stop firewalld 关闭防火墙关闭selinux查看getenforce临时关闭setenforce 0永久关闭sed-i'/SELINUX/s/enforcing/disabled/'/etc/selinux/configselinux的三种模式enforcing:强制模式,SELinux 运作中,且已经正确的开始限制..._centos7 安装rabbitmq3.6.5
文章浏览阅读5.8k次。满意答案s55f2avsx2017.09.05采纳率:46%等级:12已帮助:5646人新版Android Studio/IntelliJ IDEA可以直接导入eclipse项目,不再推荐使用eclipse导出gradle的方式2启动Android Studio/IntelliJ IDEA,选择 import project3选择eclipse 项目4选择 create project f..._android studio 项目导入idea 看不懂安卓项目
文章浏览阅读860次,点赞2次,收藏6次。AI大模型技术已经在自然语言处理、计算机视觉、多模态交互等领域取得了显著的进展和成果,同时也引发了一系列新的挑战和问题,如数据质量、计算效率、知识可解释性、安全可靠性等。城市运维涉及到多个方面,如交通管理、环境监测、公共安全、社会治理等,它们需要处理和分析大量的多模态数据,如图像、视频、语音、文本等,并根据不同的场景和需求,提供合适的决策和响应。知识搜索有多种形式,如语义搜索、对话搜索、图像搜索、视频搜索等,它们可以根据用户的输入和意图,从海量的数据源中检索出最相关的信息,并以友好的方式呈现给用户。_ai大模型应用开发
文章浏览阅读8.2k次,点赞12次,收藏121次。为什么要测量阻抗呢?阻抗能代表什么?阻抗测量的注意事项... ...很多人可能会带着一系列的问题来阅读本文。不管是数字电路工程师还是射频工程师,都在关注各类器件的阻抗,本文非常值得一读。全文13000多字,认真读完大概需要2小时。一、阻抗测试基本概念阻抗定义:阻抗是元器件或电路对周期的交流信号的总的反作用。AC 交流测试信号 (幅度和频率)。包括实部和虚部。图1 阻抗的定义阻抗是评测电路、元件以及制作元件材料的重要参数。那么什么是阻抗呢?让我们先来看一下阻抗的定义。首先阻抗是一个矢量。通常,阻抗是_阻抗实部和虚部
文章浏览阅读955次。前面章节分享试用了pyzero,pygame但随着想增加更丰富的游戏内容,好多还要进行自己编写类,从今天开始解绍一个新的python游戏库arcade模块。通过此次的《连连看》游戏实现,让我对swing的相关知识有了进一步的了解,对java这门语言也有了比以前更深刻的认识。java的一些基本语法,比如数据类型、运算符、程序流程控制和数组等,理解更加透彻。java最核心的核心就是面向对象思想,对于这一个概念,终于悟到了一些。_arcade语言 like
文章浏览阅读1.1k次。源码简介与安装说明:2021增强版短视频去水印源码 去水印微信小程序源码网站 去水印软件源码安装环境(需要材料):备案域名–服务器安装宝塔-安装 Nginx 或者 Apachephp5.6 以上-安装 sg11 插件小程序已自带解析接口,支持全网主流短视频平台,搭建好了就能用注:接口是公益的,那么多人用解析慢是肯定的,前段和后端源码已经打包,上传服务器之后在配置文件修改数据库密码。然后输入自己的域名,进入后台,创建小程序,输入自己的小程序配置即可安装说明:上传源码,修改data/_去水印机要增强版
文章浏览阅读557次。1. 触发器是FPGA存储数据的基本单元2. 触发器作为时序逻辑的基本元件,官方提供了丰富的配置方式,以适应各种可能的应用场景。_fdre #(.init(1'b0) // initial value of register (1'b0 or 1'b1) ) fdce_osc (
文章浏览阅读560次。本该是不同编译器结果不同,但是尝试了g++ msvc都是先计算c,再计算b,最后得到a+b+c是经过赋值以后的b和c参与计算而不是6。由上表可知,将q复制到p数组可以表示为:*p++=*q++,*优先级高,先取到对应q数组的值,然后两个++都是在后面,该行运算完后执行++。在电脑端编译完后会分为text data bss三种,其中text为可执行程序,data为初始化过的ro+rw变量,bss为未初始化或初始化为0变量。_嵌入式面试笔试c语言知识点
文章浏览阅读2.3k次。57 Things I've Learned Founding 3 Tech CompaniesJason Goldberg, Betashop | Oct. 29, 2010, 1:29 PMI’ve been founding andhelping run techn_mature
文章浏览阅读1.9k次。问题:先讲下需求,有若干个文本文件(txt或者csv文件等),每行代表一条数据,现在希望能合并成 1 个文本文件,且需要去除重复行。分析:一向奉行简单原则,如无必要,绝不复杂。如果数据量不大,那么如下两条命令就可以搞定合并:cat a.txt >> new.txtcat b.txt >> new.txt……去重:cat new...._python 超大文本合并
文章浏览阅读489次。这个过渡页是第一次打开小程序展示的,点击某个小程序前把手机的开发者->network link conditioner->enable & very bad network 就会在停在此页。比如《支付宝运动》这个小程序先看这个类的.h可以看到它继承于DTViewController点击左上角返回的方法- (void)back;#import "DTViewController.h"#import "APBaseLoadingV..._类似支付宝页面过度加载页