前端通过高德地图实现 定位,拖拽选址,搜索选址,搜索记录,城市切换推荐
Posted 前端纸飞机
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端通过高德地图实现 定位,拖拽选址,搜索选址,搜索记录,城市切换推荐相关的知识，希望对你有一定的参考价值。
已经结合高德地图api实现了定位,用户拖拽选址,搜索选址,搜索记录,城市切换等功能，案例已经非常完善，注意定位在pc浏览器上是有偏差，需要在手机里定位才能精准到5米，文末会放上案例地址，clone下来可以本地调试和使用。
预览地址：点我打开，建议手机上打开
高德api申请
这个不多说，需要在高德申请个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>
下面的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);
}
逻辑
<script>
import { loadJs, includeCss } from "@/libs/utils.js";//动态引入script的方法，不会封装的话可以联系我
import storejs from "store";//本地存储插件需要下载
export default {
data() {
return {
pageHeight: window.innerHeight,
map: "",
loaction: [], //lng,lat
city: "",
nearPostion: [],
selectPosition: {},
selectPostionLoading: false,
isSearch: false,
queryKey: "",
searchHistory: [], //搜索历史记录
searchResList: [], //搜索记录
noSearchData:false,
timer: "",
};
},
watch: {
queryKey: function (val) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
if (AMap) {
//判断地图是否初始化
AMap.plugin("AMap.AutoComplete", () => {
let autoOptions = {
city: this.city || "全国", //city 限定城市，默认全国
pageSize: 20, // 单页显示结果条数
children: 0, //不展示子节点数据
pageIndex: 1, //页码
extensions: "base", //返回基本地址信息
};
// 实例化AutoComplete
let autoComplete = new AMap.AutoComplete(autoOptions);
// 根据关键字进行搜索
autoComplete.search(val, (status, result) => {
// 搜索成功时，result即是对应的匹配数据
this.noSearchData = false
console.log(result);
if (result.info == "OK") {
console.log(result);
this.searchResList = result.tips;
if(result.tips && !result.tips.length){
this.searchResList = []
this.noSearchData = true
}
}else{
this.searchResList = []
this.noSearchData = true
}
});
});
}
}, 300);
},
},
mounted() {
this.init();
},
methods: {
init() {
loadJs(
"https://webapi.amap.com/maps?v=2.0&key=453cc917eadf0b73f5fab3eefa3a2314",
() => {
// this.selectPostionLoading = true;
loadJs("https://webapi.amap.com/ui/1.1/main.js", () => {
AMapUI.loadUI(
["misc/PositionPicker", "misc/PoiPicker"],
async (PositionPicker, PoiPicker) => {
//获取定位
await this.getLoction(async () => {
//拖拽选址
await this.positionPicker(PositionPicker, PoiPicker);
});
//实力化搜索
// await this.autoInput();
}
);
});
}
);
},
//创建地图
createMap() {
this.selectPostionLoading = true;
this.map = new AMap.Map("map", {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 16,
viewMode: "3D",
features: ["bg", "road", "building", "point"],
center: this.loaction,
});
},
//获取定位
getLoction(callback) {
AMap.plugin("AMap.Geolocation", () => {
let geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
buttonPosition: "RB", //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(0, 0), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
extensions: "all",
});
geolocation.getCurrentPosition((status, result) => {
//定位成功
if (status == "complete") {
console.log("定位成功", result);
//获取定位坐标
this.loaction = [result.position.lng, result.position.lat];
//创建地图
this.createMap();
this.map.addControl(geolocation);
} else {
//定位失败
this.loaction = [0, 0];
this.createMap();
this.map.addControl(geolocation);
this.$toast("定位失败,原因：" + result.message);
}
if (typeof callback === "function") {
callback();
}
});
});
},
//拖拽选址
positionPicker(PositionPicker, PoiPicker) {
var positionPicker = new PositionPicker({
mode: "dragMap",
map: this.map,
iconStyle: {
//自定义外观
url:
"https://img.yzcdn.cn/public_files/2020/03/04/32a548551986a2c3c22ef3018eb7a9af.png", //图片地址
size: [22, 36], //要显示的点大小，将缩放图片
ancher: [11, 40], //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
},
});
positionPicker.on("success", (positionResult) => {
this.nearPostion = [];
this.selectPostionLoading = true;
this.city = positionResult.regeocode.addressComponent.city; //city
setTimeout(() => {
//延时在加载出来有更好的体验效果
console.log("positionres", positionResult);
this以上是关于前端通过高德地图实现 定位,拖拽选址,搜索选址,搜索记录,城市切换推荐的主要内容，如果未能解决你的问题，请参考以下文章