当前位置 博文首页 > 纸飞机博客：高德地图实现 定位,拖拽选址,搜索选址,搜索记录,城
已经结合高德地图api实现了定位,用户拖拽选址,搜索选址,搜索记录,城市切换等功能，案例已经非常完善，注意定位在pc浏览器上是有偏差，需要在手机里定位才能精准到5米，文末会放上案例地址，clone下来可以本地调试和使用。
预览地址：点我打开，建议手机上打开
这个不多说，需要在高德申请个key，使用的高德2.0的sdk
说明：这里使用的vant的组件，需要引入vant，主要就是用的他的css风格，
<div class="page" :style="{ height: pageHeight + 'px' }">
<div id="search">
<van-search
v-model="queryKey"
:show-action="isSearch"
shape="round"
placeholder="请输入您的地址"
@focus="searchFocus"
>
<template slot="label">
<div class="address-search__label" @click="changeCity()">
<span>{{ city || "定位中..." }}</span
><i
class="address-search__icon van-icon van-icon-arrow-down"
style="font-size: 16px"
><!----></i
>
</div>
</template>
<template slot="action" v-if="isSearch">
<span @click="cancelSearch()">取消</span>
</template>
</van-search>
</div>
<div id="map"></div>
<div class="address-map__pois__title">附近位置</div>
<div class="address-map__pois van-cell-group">
<div
class="address-map__poi van-cell van-cell--borderless"
v-for="(item, index) in nearPostion"
:key="index"
@click="selectAddr(item)"
>
<i
class="van-icon van-icon-location van-cell__left-icon"
:class="{ active: selectPosition.id == item.id }"
><!----></i
>
<div class="van-cell__title">
<span>{{ item.name }}</span>
<div class="van-cell__label">{{ item.address }}</div>
</div>
</div>
<div class="loading" v-show="selectPostionLoading">
<van-loading type="spinner" color="#1989fa" />
</div>
<!-- <div class="address-map__poi van-cell van-cell--borderless">
<i class="van-icon van-icon-location van-cell__left-icon"></i>
<div class="van-cell__title">
<span>深圳安迪妈妈公寓</span>
<div class="van-cell__label">科技园深南花园c栋(地铁口旁)</div>
</div>
</div> -->
</div>
<div class="searchRes" v-show="isSearch">
<div class="searchHistory" v-if="!queryKey">
<div class="title" v-if="searchHistory.length">
<span>历史搜索</span>
<van-icon @click="clearSearchHistory()" class="del" name="delete" />
</div>
<div class="serchHistory-list" v-if="searchHistory.length">
<span
v-for="(item, index) in searchHistory"
:key="index"
@click="selechHistory(item)"
>{{ item }}</span
>
</div>
<!-- 空搜索历史 -->
<van-empty
v-if="!searchHistory.length"
image="search"
description="暂无历史搜索"
/>
</div>
<div class="searchRes-list" v-if="queryKey">
<div class="searchRes-list-box" v-if="searchResList.length">
<div
class="item"
v-for="(item, index) in searchResList"
:key="index"
@click="selectSearchAddr(item)"
>
<div class="name">{{ item.name }}</div>
<div class="addr">{{ item.district }}{{ item.address }}</div>
</div>
</div>
<van-empty
v-if="!searchResList.length && noSearchData"
image="search"
description="暂无搜索结果"
/>
</div>
</div>
</div>
// 异步加载css文件
export const includeCss = function (filename) {
var head = document.getElementsByTagName("head")[0];
var link = document.createElement("link");
link.href = filename;
link.rel = "stylesheet";
link.type = "text/css";
head.appendChild(link);
}
// 异步加载js文件
export const loadJs = function (libUrl, callback, libName) {
if (window[libName]) {
if (typeof callback === 'function') callback();
}
let head = document.getElementsByTagName("head")[0];
let script = document.createElement
