vue+高德地图实现地图搜索及点击定位操作
89 浏览量
2020-10-14
19:10:48
上传
评论 1
收藏 284KB PDF 举报
vue+高德地图实现地图搜索及点击定位操作高德地图实现地图搜索及点击定位操作
主要介绍了vue+高德地图实现地图搜索及点击定位操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
首先需要在index.html中引入高德地图的js链接，key需要换成你自己的key
最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看
着改下
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你的key"></script>
效果图如下
下边就是实现过程
html部分
<template>
<div id="wrap">
<div id="searchWrap">
<div class="searchWrap">
<input type="text" v-model="address" @input="search"><button @click="search">搜索</button>
</div>
<div id="result" class="amap_lib_placeSearch" v-show="hide">
<div class="amap_lib_placeSearch_list amap-pl-pc" v-for="(item,index) in poiArr"
@click="openMarkerTipById(index,$event)"
@mouseout="onmouseout_MarkerStyle(index+1,$event)"
:key="index">
<div class="poibox" style="border-bottom: 1px solid #eaeaea">
<div class="amap_lib_placeSearch_poi poibox-icon" :class="index==selectedIndex?'selected':''">{{index+1}}</div>
<div class="poi-img" v-if="item.url" :style="'background-image:url('+item.url+'?operate=merge&w=90&h=56&position=5)'"
></div>
<h3 class="poi-title" >
<span class="poi-name">{{item.name}}</span>
</h3>
<div class="poi-info">
<p class="poi-addr">地址：{{item.address}}</p>
<p class="poi-tel">电话：{{item.tel}}</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div id="iCenter"></div>
<button class="btn" @click="fetAddressName">获取当前位置和名字</button>
</div>
</template>
js部分
<script>
export default {
props:['newAddress','dataObj'],// 父组件传过来的地址和地址经纬度信息，
data() {
return {
address:this.newAddress ? this.newAddress : '郑州',//保存地址的汉字名字
map1: '',
map:'',//保存地址的经纬度
poiArr: [],//左边搜索出来的数组
windowsArr: [],//信息窗口的数组
marker: [],
mapObj: "",//地图对象
selectedIndex: -1,
hide: false,
clickType: 1,
location:{
P:this.dataObj.lat,
资源评论
