失眠网 > 高德地图实现定位拖拽选址搜索选址搜索记录城市切换(推荐)

高德地图实现定位拖拽选址搜索选址搜索记录城市切换(推荐)

时间：2019-09-24 00:31:09

已经结合高德地图api实现了定位,用户拖拽选址,搜索选址,搜索记录,城市切换等功能，案例已经非常完善，注意定位在pc浏览器上是有偏差，需要在手机里定位才能精准到5米，文末会放上案例地址，clone下来可以本地调试和使用。

预览地址：点我打开，建议手机上打开

高德api申请

这个不多说，需要在高德申请个key，使用的高德2.0的sdk

布局

说明：这里使用的vant的组件，需要引入vant，主要就是用的他的css风格，

<div class="page" :style="{ height: pageHeight + 'px' }"><div id="search"><van-searchv-model="queryKey":show-action="isSearch"shape="round"placeholder="请输入您的地址"@focus="searchFocus"><template slot="label"><div class="address-search__label" @click="changeCity()"><span>{{ city || "定位中..." }}</span><iclass="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"><divclass="address-map__poi van-cell van-cell--borderless"v-for="(item, index) in nearPostion":key="index"@click="selectAddr(item)"><iclass="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><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"><spanv-for="(item, index) in searchHistory":key="index"@click="selechHistory(item)">{{ item }}</span></div><van-emptyv-if="!searchHistory.length"image="search"description="暂无历史搜索"/></div><div class="searchRes-list" v-if="queryKey"><div class="searchRes-list-box" v-if="searchResList.length"><divclass="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-emptyv-if="!searchResList.length && noSearchData"image="search"description="暂无搜索结果"/></div></div></div>

下面的loadJs封装

// 异步加载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("script");let isCallback = false;script.type = "text/javascript";script.src = libUrl;if (typeof callback == "function") {script.onload = script.onreadystatechange = function () {if (!this.readyState ||this.readyState === "loaded" ||this.readyState === "complete") {if (isCallback === false && typeof callback === 'function') {isCallback = true;callback();}script.onload = script.onreadystatechange = null;}};}head.appendChild(script);}