基于vue的H5页面中使用高德地图定位，搜索周边商户，覆盖物标记
首先安装高德地图插件
npm i @amap/amap-jsapi-loader --save
地图承载容器
<template>
<div id="container"></div>
</template>
地图容器样式
<style scoped>
#container{
padding:0px;
margin: 0px;
width: 100%;
height: 800px;
}
</style>
引入 JS API Loader ,并初始化地图，增加覆盖物标记marker
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
import Qs from "qs";
export default {
data() {
return {
map: null,
marker: [],
arr: [
{
name: "如意湖",
icon: "https://img1.baidu.com/it/u=3590267805,2648573622&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
ip1: 113.73241336023165,
ip2: 34.77923169201559,
},
],
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
var _this = this;
AMapLoader.load({
key: "xxxxx",
version: "",
plugins: ["AMap.Geolocation"],
})
.then((AMap) => {
this.map = new AMap.Map("container", {
viewMode: "3D",
zoom: 13,
center: [113.73072265943132, 34.77648371816693],
});
for (var i = 0; i < _this.arr.length; i++) {
var content = `<div class='marker-wrap'><img src='${_this.arr[i].icon}' /><div class='marker-txt'>${_this.arr[i].name}</div></div>`;
var markerItem = new AMap.Marker({
position: [_this.arr[i].ip1, _this.arr[i].ip2],
offset: new AMap.Pixel(-13, -20),
content: content,
});
markerItem.on("click", _this.markerClick);
markerItem.setExtData({ deviceMarkId: _this.arr[i] });
_this.marker.push(markerItem);
}
this.map.add(this.marker);
})
.catch((e) => {
console.log(e);
});
},
markerClick(e) {
var demo = e.target.getExtData();
console.log("demo: ", demo);
},
},
};
</script>
高德地图实现定位，域名必须是https开头（官方要求，不然会定位失败），然后必须是手机开启定位才行，在电脑上无法定位成功，AMap.Geolocation
initMap() {
var _this = this;
AMapLoader.load({
key: "xxxx",
version: "",
plugins: ["AMap.Geolocation"],
})
.then((AMap) => {
this.map = new AMap.Map("container", {
viewMode: "3D",
zoom: 13,
});
const OPTIONS = {
enableHighAccuracy: true,
timeout: 3000,
maximumAge: 0,
convert: true,
showButton: true,
buttonOffset: new AMap.Pixel(10, 20),
zoomToAccuracy: true,
showMarker: true,
showCircle: true,
panToLocation: true,
buttonPosition: "RB",
};
var geolocation = new AMap.Geolocation(OPTIONS);
_this.map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, "complete", onComplete);
AMap.event.addListener(geolocation, "error", onError);
function onComplete(data) {
console.log("data: ", data);
}
function onError(err) {
console.log("err: ", err);
}
})
.catch((e) => {
console.log(e);
});
},
高德地图实现周边搜索，关键字搜索，检索不得超过80个字符，分页返回，每页最大值为25条，搜索结果截图如下
search() {
var params = {
key: "xxx",
keywords: "丹尼斯|悦来悦喜",
page_size: 25,
page_num: 1,
location: "113.73072265943132,34.77648371816693",
radius: 3000,
output: "json",
};
axios({
url: "https://restapi.amap.com/v5/place/around?" + Qs.stringify(params),
method: "get",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
}).then((res) => {
console.log("res: ", res);
});
},
initMap() {
var _this = this;
AMapLoader.load({
key: "xx",
version: "",
plugins: [],
})
.then((AMap) => {
_this.map = new AMap.Map("container", {
viewMode: "3D",
zoom: 13,
center: [113.73072265943132, 34.77648371816693],
});
_this.search();
})
.catch((e) => {
console.log(e);
});
},
高德地图实现定位城市及详细经纬度，geolocation.getCurrentPosition，geolocation.getCityInfo
initMap() {
var that = this;
AMapLoader.load({
key: "xxx",
version: "1.4.15",
plugins: ["AMap.Geolocation"],
})
.then((AMap) => {
that.map = new AMap.Map("container", {
resizeEnable: true,
viewMode: "3D",
zoom: 16,
});
const OPTIONS = {
enableHighAccuracy: true,
timeout: 3000,
maximumAge: 0,
convert: true,
showButton: true,
buttonOffset: new AMap.Pixel(10, 20),
zoomToAccuracy: true,
showMarker: true,
showCircle: true,
panToLocation: true,
buttonPosition: "RB",
};
var geolocation = new AMap.Geolocation(OPTIONS);
that.map.addControl(geolocation);
geolocation.getCityInfo((status, result) => {
if (status == "complete") {
console.log(result)
geolocation.getCurrentPosition((status1, result1) => {
if (status1 == "complete") {
console.log(result1)
} else {
console.log(result1)
}
});
} else {
console.log(result)
}
});
})
.catch((e) => {
console.log(e);
});
},
