高德地图搜出的实景图为啥模糊?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高德地图搜出的实景图为啥模糊?相关的知识,希望对你有一定的参考价值。
高德地图搜出的实景图为什么模糊?
参考技术A 上传的照片本身就比较模糊 参考技术B 你用手机下载一个腾讯地图,找到你要看街景的地方,然后点击一下就可以看到街景了,很方便,如果你导航过程中也可以随时随地看得到街景图的。vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)
vue实现高德地图模糊搜索+筛选条件+定位+信息窗
vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)
先npm安装高德地图
npm i @amap/amap-jsapi-loader --save
<template>
<div class="StationMap">
<van-nav-bar title="场站地图" fixed placeholder safe-area-inset-top left-text="返回" left-arrow @click-left="$router.goBack()"/>
<div class="content-header">
<div class="van-search-box">
<van-search v-model="searchValue" placeholder="请输入场站名称" @search="onSearch"></van-search>
</div>
<van-dropdown-menu>
<van-dropdown-item v-model="dropdownValue" :options="dropdownOption" @change="dropdownChange"/>
</van-dropdown-menu>
</div>
<ul class="searchData" v-show="searchDataShow">
<li class="van-cell" v-for="(item, i) in searchData" :key="i" @click="searchDataClick(item)">item.content</li>
</ul>
<div id="container"></div>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default
name: "StationMap",
computed:
searchData ()
let searchVal = '';//搜索后的数据
if (this.searchValue)
searchVal = this.mapData.filter(item =>
return [Object.keys(item)[2]].some(key =>
// 搜索所有的内容
return String(item[key]).toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1;
)
)
this.searchDataShow = true;
return searchVal;
,
watch:
searchDataShow ()
if ((this.searchDataShow) && (this.searchValue === this.searchDataClickItem)) this.searchDataShow = false
,
data()
return
map: null,
searchDataShow: false,
searchDataClickItem: "", // 点击之后的值
mapData: [
lng: "106.15",
lat: "30.02",
content: "a合川"
,
lng: "106.16",
lat: "29.18",
content: "b江津"
,
lng: "107.05",
lat: "29.10",
content: "c南川"
,
],
searchValue: "", // 搜索的值
dropdownValue: 1,
dropdownOption: [
text: '项目1', value: 1,
text: '项目2', value: 2,
],
,
methods:
dropdownChange (val)
this.searchValue = "";
,
// 搜索按钮, 键盘Enter触发
onSearch(val)
this.mapData.forEach(item =>
if (item.content === val)
this.searchDataClick(item)
)
,
// 点击模糊搜索列表 或 弹出信息窗并设置中心位置
searchDataClick (item)
this.searchValue = item.content;
this.searchDataShow = false;
this.searchDataClickItem = item.content;
// 1.信息窗的偏移位
let infoWindow = new AMap.InfoWindow(offset: new AMap.Pixel(0, -30));
// 2.获取搜索结果的位置
let position = [item.lng, item.lat]
// 3.设置信息窗的内容
infoWindow.setContent(item.content);
// 4.将 搜索结果的位置 设置为 中心点
this.map.setCenter(position)
// 5.打开信息窗
infoWindow.open(this.map, position);
,
// 高德地图
initMap()
AMapLoader.load(
key: "4a9b8d4819c66a63a4b5544397510c59", // 申请好的开发者Key
).then(AMap =>
this.map = new AMap.Map("container",
resizeEnable: true,
);
let lnglats = [];
for (const i in this.mapData)
lnglats.push([this.mapData[i].lng, this.mapData[i].lat])
for (let i = 0; i < this.mapData.length; i++)
let marker = new AMap.Marker(
position: lnglats[i],
map: this.map
);
marker.content = this.mapData[i].content;
marker.on('click', this.markerClick);
marker.emit('click', target: marker);
this.map.setFitView();
).catch(err =>
console.log(err);
)
,
markerClick (e)
let infoWindow = new AMap.InfoWindow(offset: new AMap.Pixel(0, -30));
infoWindow.setContent(e.target.content);
infoWindow.open(this.map, e.target.getPosition());
,
mounted()
//DOM初始化完成进行地图初始化
this.initMap();
</script>
<style lang="scss">
.StationMap
.content-header
width: 100%;
position: fixed;
z-index: 999;
display: flex;
.van-search-box
flex: 1;
.van-search
padding: 0;
.van-cell
line-height: 40px;
padding: 0;
.van-icon-clear
padding-right: 20px;
.van-dropdown-menu
flex: 1;
//margin-left: 10px;
border-left: 1px solid #e8e8ef;
.van-dropdown-menu__bar
height: 40px;
background-color: #f7f8fa;
box-shadow: none;
.searchData
position: fixed;
top: 86px;
right: 0;
left: 0;
z-index: 998;
overflow: hidden;
background-color: #fff;
#container
width: 100%;
height: 100vh;
</style>
结果
以上是关于高德地图搜出的实景图为啥模糊?的主要内容,如果未能解决你的问题,请参考以下文章