Vue + H5 引用 高德地图 实现定位 + 回显具体位置信息
注： 因为业务需求，需要实现 H5地图 定位 + 回显具体位置信息。并实现搜索 地址 和附件地址选取。
- 引入高德地图 方式1：
<!--引入高德地图JSAPI -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=you key & plugin=AMap.Geocoder"></script>
方式2：
<!--引入高德地图JSAPI --> //推荐
安装 npm i @amap/amap-jsapi-loader --save
2.使用
<!-- -->
<!--在 components 创建 map.vue 文件 -->
<!-- 引入 -->
<script>
window._AMapSecurityConfig = {
securityJsCode: "xxxxxxxxxxxxxxx" //你的安全密钥
};
import AMapLoader from "@amap/amap-jsapi-loader";
</script>
- methods
//地图初始化
initAMap() {
let that = this;
AMapLoader.load({
key: "xxxxxxxxxxxxxxx", //申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0",
plugins: []
})
.then(Amap => {
AMap = Amap;
// 其他功能同h5
this.map = new AMap.Map("container", {
// viewMode: "3D",
center: [116.857461, 38.310582], // 地图中心点坐标
zoom: 15 // 地图缩放级别
});
this.getLocation();
})
.catch(e => {
console.log("高德地图加载错误", e);
});
},
// 获取位置
getLocation() {
let that = this;
AMap.plugin("AMap.Geolocation", function() {
let geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
that.map.addControl(geolocation);// 右下角 获取当前位置控件
// that.map.on("click", showInfoClick);//手动地图选取点位
// function showInfoClick(e) {
// console.log(e, " this. this. this.");
// }
// 获取详细地址api
geolocation.getCurrentPosition(function(status, result) {
if (status == "complete") {
onComplete(result);
} else {
onError(result);
}
});
function onComplete(data) {
// data是具体的定位信息
// alert(JSON.stringify(data));
that.position = data.position;
that.searchNear(that.position);
}
function onError(data) {
// 定位出错
console.log(data, "onError");
}
});
},
// 周边搜索
searchNear() {
let that = this;
AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function() {
var autoOptions = {
// 城市，默认全国
city: "",
// 使用联想输入的input的id
input: "keyWords",
datatype: "poi" //返回的数据类型
};
var autocomplete = new AMap.AutoComplete(autoOptions);
const placeSearch = new AMap.PlaceSearch({
city: "", // 兴趣点城市，支持城市名、citycode、adcode
citylimit: false, // 是否强制在设置的城市内搜索，默认false
type: "商务住宅|公司企业|餐饮服务|科教文化服务|政府机构及社会团体", // 兴趣点类别，用‘|’分隔，默认：'餐饮服务|商务住宅|生活服务'
// type: "公司企业", // 兴趣点类别，用‘|’分隔，默认：'餐饮服务|商务住宅|生活服务'
pageSize: 30, // 每页条数，默认10，范围1-50
pageIndex: 1, // 页码
extensions: "all", // 默认base，返回基本地址信息；all：返回详细信息
map: that.map, // 地图实例，可选
// panel: 'panel', // 结果列表的id容器，可选
autoFitView: true // 是否自动调整地图视野到marker点都处于可见范围
});
function select(e) {//选中地址处理的事件
that.position = [e.poi.location.lng, e.poi.location.lat];
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
placeSearch.searchNearBy("", that.position, 2000, function(
status,
result
) {
that.address_list = result.poiList.pois;
});
}
autocomplete.on("select", select); //注册监听，当选中某条记录时会触发
// alert(JSON.stringify(that.position));
placeSearch.searchNearBy("", that.position, 2000, function(
status,
result
) {
that.address_list = result.poiList.pois;
});
});
},
4.map.vue HTML 部分
<template>
<div class="map-address">
<div class="search">
<van-field v-model="keyWords" id="keyWords" placeholder="请输入关键词" />
</div>
<div id="container"></div>
<div class="address-list">
<ul>
<li
v-for="item in address_list"
:key="item.id"
@click="sureAddress(item)"
>
<p class="name">{{ item.name }}</p>
<p class="detail">{{ item.address }}</p>
</li>
</ul>
</div>
</div>
</template>
<script>
// import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
securityJsCode: "da22dbc9db9a93fc05100288f88e4bfd"
};
import AMapLoader from "@amap/amap-jsapi-loader";
let AMap = null;
export default {
props: {
data: {}
},
data() {
return {
addres: "",
districtList: "",
cityCode: "",
keyWords: "",
map: {},
marker: {},
position: [],
address_list: []
};
},
created() {
this.initAMap();
},
methods: {
initAMap（）{},
getLocation（）{}，
searchNear（）{}，
sureAddress（）{}，
}
};
</script>
<style lang="less" scoped>
.map-address {
height: inherit;
#container {
width: 100vw;
height: 398px;
}
.address-list {
height: 238px;
overflow: auto;
ul {
li {
padding: 6px;
border-bottom: 1px solid #ddd;
p:nth-of-type(1) {
color: #333;
font-size: 14px;
}
p:nth-of-type(2) {
color: #666;
font-size: 12px;
}
}
}
}
}
</style>
5.在需要使用的页面引用map.vue
<template>
<div class="list">
<div v-if="Boolean"></div>
<Map ref="map" @addressInfo="getAddressInfo" v-else></Map>
</div>
</template>
import Map from "../components/map/index.vue";
...
6.效果图
7.需要注意的点：
- 高德地图 只有在https 环境下才可以获取自己的具体位置信息。 在nginx 中配置一下就行 。
- 地图空白不显示 首先检查 key 和 你的安全密钥 是否正确，其次引用是否正确，最后就是环境问题。
- 获取的地址数据 可以根据自己的需求进行拼接。
文尾：第一次写文，如有错误，欢迎各位大佬指正！！！ 记录自己的 爬坑之路~~~~
