VUE2.0 插入腾讯地图（有经纬度和搜索功能以及标记’）

显示效果

代码如下复制粘贴即可

//html   显示经纬度 和搜索  地图<el-row><el-col :span="12"><el-form-item label="经度" prop="longitude"><el-input style="width: 200px" disabled v-model="form.longitude"></el-input> </el-form-item></el-col><el-col :span="12"><el-form-item label="纬度" prop="latitude"><el-input style="width: 200px" disabled v-model="form.latitude"></el-input> </el-form-item></el-col></el-row><el-form-item><div class="map-box"><div class="map" ref="map" style="height: 300px" /><div class="map-search"><el-input v-model="searchValue" placeholder="请输入要检索的位置信息" /><el-button @click="searchAddress(searchValue)" type="primary">搜索</el-button></div></div></el-form-item>
<script>
export default {data(){return{searchValue: '', //地图搜索form:{longitude:'',latitude:'',}}},created(){if (this.script) return;this.script = document.createElement('script');this.script.type = 'text/javascript';this.script.src = `//map.qq.com/api/gljs?v=1.exp&libraries=service&key=GZ5BZ-OAXED-DNM4H-HMVLD-5BIXO-XFBMX`;document.head.appendChild(this.script);this.script.onload = () => {window.initMap = this.initMap;this.$nextTick(() => {this.initMap();});};},method:{// 地图initMap() {// 搜索类this.searchEr = new window.TMap.service.Search({ pageSize: 10 });// 地图主类this.map = new window.TMap.Map(this.$refs.map, {backgroundColor: '#f7f7f7',mapStyleId: 'style1',zoom: 12,mapTypeControlOptions: {mapTypeIds: [],},draggableCursor: 'crosshair',center: new window.TMap.LatLng(28.616202, 115.942693),});// 图层类this.markerLayer = new window.TMap.MultiMarker({map: this.map,geometries: [],});// 地址逆解析this.geocoder = new window.TMap.service.Geocoder();const setMarker = () => {const latlng = new window.TMap.LatLng(this.form.latitude, this.form.longitude);this.markerLayer.setGeometries([]);let geometries = this.markerLayer.getGeometries();geometries.push({id: '-1',position: latlng,});this.markerLayer.updateGeometries(geometries);};this.map.on('click', (e) => {this.form.longitude = e.latLng.getLng(); // 经度this.form.latitude = e.latLng.getLat(); // 纬度setMarker();this.getAddressFormat();});if (this.form.longitude) {this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));setMarker();}},// 地图搜索searchAddress(keyword = '') {if (!keyword) return;this.markerLayer.setGeometries([]);this.searchEr.searchRectangle({keyword,bounds: this.map.getBounds(),}).then((result) => {const { location = {} } = result.data[0] || {};const { lat = 28.616202, lng = 115.942693 } = location;this.map.setCenter(new window.TMap.LatLng(lat, lng));result.data.forEach((item, index) => {let geometries = this.markerLayer.getGeometries();// 点标注数据数组geometries.push({id: String(index),position: item.location,});// 绘制地点标注this.markerLayer.updateGeometries(geometries);});});},getAddressFormat() {const { longitude, latitude } = this.form;this.geocoder.getAddress({location: new window.TMap.LatLng(latitude, longitude),}).then((res) => {const {formatted_addresses: { recommend = '' },} = res.result || {};console.log(recommend, 'recommend');this.form.hotelDetailAddress = recommend;console.log(this.form);});},}
}
</script>
//样式
<style>.map-box {position: relative;.map-search {z-index: 1000;display: flex;position: absolute;top: 20px;left: 20px;width: 350px;button {border-radius: 0;}}
}
.icons {display: flex;align-items: center;justify-content: space-between;
}
.time {margin-top: 15px;width: 100%;font-size: 12px;flex-wrap: wrap;height: 70%;
}
</style>

VUE2.0 插入腾讯地图（有经纬度和搜索功能以及标记’）相关推荐

vue2.0引入腾讯地图
百度很多东西,然后我没找到腾讯地图在VUE2.0里面的引用.于是根据找的其他地图引用资料进行尝试.步骤如下. 首先在src里面建立了TMap.js的文件,内容如下: export function T ...
vue2.0引用腾讯地图
开始注册腾讯位置服务账号 vue引入js 创建map.vue 显示结果注册腾讯位置服务账号入门指南 vue引入js 项目根目录下的index.html里引入 <script charset ...
java调用腾讯地图根据经纬度获取位置信息
这是java提交经纬度信息,然后获取该经纬度所在省市区的一个方法,话不多说直接上代码: package com.lmj.util;import net.sf.json.JSONObject; impo ...
java腾讯地图根据经纬度获取具体位置
腾讯地图 java腾讯地图根据经纬度获取具体位置 java腾讯地图根据经纬度获取具体位置 package com.fengdi.lianmeng.util.tencent;import com.fen ...
地域微信平台自媒体，原创视频如何插入腾讯地图
地域微信平台自媒体创业故事. 2015年,30岁的我没钱没房,心中总有一个互联网创业梦,在看到很多地域自媒体如开花一般的成长,抱着试试水的态度,开启了我的创业模式,其实互联网创业门槛很高,但是如果做一 ...
vue使用腾讯地图获取经纬度和逆解析获取详细地址
vue使用腾讯地图获取经纬度和逆解析获取详细地址示例必须在腾讯api中申请自己的key 打开这个webservice用来逆解析详细地址下面是代码 1 , html创建放地图的容器 <div ...
腾讯地图发送定位-打开定位功能
用到的是腾讯地图API,主要的功能: 1.选择地址发送(地图选址组件 https://lbs.qq.com/tool/component-picker.html) 2.实时地址静态图(https:// ...
php实现多条件查找分页,Yii2.0框架实现带分页的多条件搜索功能示例
本文实例讲述了Yii2.0框架实现带分页的多条件搜索功能.分享给大家供大家参考,具体如下: 方法一在控制器中 public function actionShow(){ $where['title' ...
vue版本--腾讯地图demo，可搜索关键字和经纬度，显示地图和搜索结果列表
腾讯地图demo,改正确的key即可用 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...

VUE2.0 插入腾讯地图（有经纬度和搜索功能以及标记’）

VUE2.0 插入腾讯地图（有经纬度和搜索功能以及标记’）相关推荐

最新文章

热门文章