vue3使用腾讯地图（关键词搜索，地址获取经纬度，标记位置） |
您所在的位置：网站首页 › 腾讯地图搜不到位置 › vue3使用腾讯地图（关键词搜索，地址获取经纬度，标记位置） |
vue3使用腾讯地图（关键词搜索，地址获取经纬度，标记位置）
|
效果图： 父页面必须先填写地址，才能点击经纬度按钮
获取父页面数据，初始化获取经纬度并标点，可模糊查询，可点击地图
代码 一，.在index.html中引入 二，地图组件 确定 关闭 import { Component, Prop, Vue, Watch } from "vue-property-decorator"; import { jsonp } from "vue-jsonp"; // npm i vue-jsonp -S @Component({ name: "baiduMapIndex", components: {}, }) export default class baiduMapIndex extends Vue { @Prop({ type: Object, default: true }) dialog: any; private userlocation: any = { map: "", markerLayer: "", lng: "", lat: "", }; private address_detail = ""; private suggestId = "suggestId"; private TMap = (window as any).TMap; mounted() { //nextTick渲染 this.$nextTick(() => { this.initMap(); }); } initMap() { //定义地图中心点坐标 var center = new (window as any).TMap.LatLng(22.543731, 114.059589); //定义map变量，调用 TMap.Map() 构造函数创建地图 this.userlocation.map = new (window as any).TMap.Map(document.getElementById("container"), { center: center, //设置地图中心点坐标 zoom: 16, //设置地图缩放级别 viewMode: "3D", }); this.address_detail = this.dialog.address; this.addrToGetCoordinate(this.address_detail); (this.userlocation.map as any).on("click", this.clickHandler); // 绑定点击地图获取地理位置的事件 // this.addrToGetCoordinate(this.address_detail); } //标记地图 markerLayer(lat, lng) { this.userlocation.markerLayer = new (window as any).TMap.MultiMarker({ map: this.userlocation.map, //指定地图容器 //样式定义 styles: { //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId） myStyle: new (window as any).TMap.MarkerStyle({ // width: 20, // 点标记样式宽度（像素） // height: 30, // 点标记样式高度（像素） // src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png", //图片路径 //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点 anchor: { x: 16, y: 32 }, }), }, //点标记数据数组 geometries: [ { id: "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id styleId: "myStyle", //指定样式id position: new (window as any).TMap.LatLng(this.userlocation.lat, this.userlocation.lng), //点标记坐标位置 }, ], }); } // 根据地址获取坐标 addrToGetCoordinate(address) { const url = "https://apis.map.qq.com/ws/geocoder/v1/"; jsonp(url, { key: "3WDBZ-HMUCX-NIE43-ZPLQ4-OOHAO-OKBES", output: "jsonp", address: address, }) .then((res) => { if (res.status === 0) { // 处理得到的经纬度 this.userlocation.lat = res.result.location.lat.toFixed(6); this.userlocation.lng = res.result.location.lng.toFixed(6); this.$nextTick(() => { this.markerLayer(this.userlocation.lat, this.userlocation.lng); // 标记地图 this.setInitChange(); }); } // else { // console.log(22222, this.userlocation.lat, this.userlocation.lng); // // 处理得到的经纬度 // // this.userlocation.lat = res.result.location.lat.toFixed(6); // // this.userlocation.lng = res.result.location.lng.toFixed(6); // // this.$nextTick(() => { // // this.markerLayer(this.userlocation.lat, this.userlocation.lng); // 标记地图 // // this.setInitChange(); // // }); // } }) .catch((e) => { console.log(e); }); } handleSelect(item) { this.userlocation.lat = item.location.lat; this.userlocation.lng = item.location.lng; this.setInitChange(); } // 修改地图位置 setInitChange() { (this.userlocation.map as any).setCenter( new (window as any).TMap.LatLng(this.userlocation.lat, this.userlocation.lng) ); (this.userlocation.markerLayer as any).updateGeometries([ { styleId: "myStyle", id: "1", position: new (window as any).TMap.LatLng(this.userlocation.lat, this.userlocation.lng), }, ]); } // 获取搜索经纬度 querySearch(queryString, callback) { // 关键字查询 const url = "https://apis.map.qq.com/ws/place/v1/suggestion"; // 关键字查询 jsonp(url, { key: "3WDBZ-HMUCX-NIE43-ZPLQ4-OOHAO-OKBES", keyword: queryString, output: "jsonp", }).then((res) => { if (res.status == 0) { const list = res.data; callback(list); } else { this.$message.warning(res.message); } }); } // 重载地图 reloadMap() { (document.getElementById("container") as any).innerHTML = ""; this.userlocation.markerLayer = ""; let center = new (window as any).TMap.LatLng(this.userlocation.lat, this.userlocation.lng); this.userlocation.map = new (window as any).TMap.Map(document.getElementById("container"), { center: center, //设置地图中心点坐标 viewMode: "3D", }); } // 点击获取经纬度 clickHandler(evt: any) { let lat = evt.latLng.getLat().toFixed(6); let lng = evt.latLng.getLng().toFixed(6); this.userlocation.lng = lng; this.userlocation.lat = lat; //这里的evt有模糊的坐标可以打印看看但是没有街道所以我这做了判断 //如果有大的目标就取大的目标否则就取街道; if (evt.poi) { this.address_detail = evt.poi.name; //bug，点击出现多个标点 // this.addrToGetCoordinate(this.address_detail); } else { //调用详细地址函数 // console.log(this.userlocation.lng, this.userlocation.lat); this.getAreaCode(); } this.userlocation.markerLayer.geometries = []; //修改id为4的点标记的位置 (this.userlocation.markerLayer as any).updateGeometries([ { styleId: "marker", id: "1", position: new (window as any).TMap.LatLng(lat, lng), }, ]); } resultFn() { this.$message({ message: "定位获取成功!", type: "success" }); this.$emit( "getLocationSuccess", this.userlocation.lng, this.userlocation.lat, this.address_detail ); } mapClose = () => { this.$emit("mapClose", false); }; } .map { width: 100%; height: 400px; ::v-deep { .BMap_cpyCtrl, .anchorBL { display: none; } } } .info { height: 40px; margin-bottom: 20px; }说明：ke-dialog和里面的一些方法是公司封装组件你们可以忽略，功能点都在里面，照葫芦画瓢是没有问题的，剩下的根据自己的需求修改 |
【本文地址】
今日新闻 |
推荐新闻 |