用一个在地图上挖宝的小例子,来总结下自己使用高德地图的心得。
起步-加载高德地图
// 进入
cd utils
// 创建AMap.js文件
vim AMap.js
AMap.js
export default function MapLoader() {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap);
} else {
var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src =
"https://webapi.amap.com/maps?v=1.4.15&key=你们自己申请的key&plugin=AMap.Geocoder&callback=initAMap";
script.onerror = reject;
document.head.appendChild(script);
}
window.initAMap = () => {
resolve(window.AMap);
};
});
}
使用,在那个页面需要用高德地图,就在那个页面调用
获取传入的宝箱位置
// 别忘记在data中添加lng和lat
created() {
this.lng = this.$route.query.lng;
this.lat = this.$route.query.lat;
},
添加点标记
新建一个函数
// 创建点标记
addMarker() {
this.marker = new this.resMap.Marker({
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [this.lng, this.lat],
offset: new this.resMap.Pixel(-13, -30)
});
this.map.add(this.marker);
this.map.setFitView();
},
在initAMap 函数中调用
async initAMap() {
try {
...
this.addMarker()
} catch (err) {
console.error(err);
}
}
添加矢量圆形
新建一个函数
// 构建矢量圆形
addCircle() {
return new this.resMap.Circle({
center: new this.resMap.LngLat(`${this.lng}`, `${this.lat}`), // 圆心位置
radius: 500, //半径,米
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35 //填充透明度
});
},
修改 addMarker 函数
// 创建点标记
addMarker() {
...
// 记的在data里添加circle
this.circle = this.addCircle();
this.map.add([this.marker, this.circle]);
this.map.setFitView();
},
新建一个函数
// 创建一个icon
addIcon() {
return new this.resMap.Icon({
// 图标尺寸
size: new this.resMap.Size(40, 40),
// 图标的取图地址
image: require("@/assets/images/Treasure Box.png"),
// 图标所用图片大小
imageSize: new this.resMap.Size(40, 40)
// 图标取图偏移量
// imageOffset: new this.resMap.Pixel(0, 13)
});
},
修改 addMarker 函数
// 创建点标记
addMarker() {
this.marker = new this.resMap.Marker({
icon: this.addIcon(),
position: [this.lng, this.lat],
offset: new this.resMap.Pixel(-20, -20)
});
this.circle = this.addCircle();
this.map.add([this.marker, this.circle]);
this.map.setFitView();
},
新建一个函数
// 获取当前位置信息
getCityInfo() {
this.map.plugin("AMap.Geolocation", () => {
var geolocation = new this.resMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
buttonOffset: new this.resMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: "RB"
});
geolocation.getCurrentPosition();
this.resMap.event.addListener(geolocation, "complete", this.onComplete);
this.resMap.event.addListener(geolocation, "error", this.onError);
});
},
// 获取定位结果
onComplete(res) {
console.log(res)
},
// 定位出错
onError(err) {
console.error(err, "--定位出错--");
}
新建一个函数
// 计算两点之间的距离
calculatingDistance(position) {
const p1 = [this.lng, this.lat];
// data中添加myPosition
this.myPosition = [position.lng, position.lat];
return this.resMap.GeometryUtil.distance(p1, this.myPosition);
},
修改 onComplete 函数
onComplete(res) {
// data中添加distance
this.distance = this.calculatingDistance(res.position);
},
当前位置处于宝箱500米范围内可以挖宝,同时显示 ‘我’ 标记
computed: {
// 是否在500米范围内
is500() {
return this.distance === undefined ||
this.distance === null ||
this.distance > 500
? false
: true;
}
},
watch: {
is500(newValue) {
if (newValue) {
const marker = new this.resMap.Marker({
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: this.myPosition,
offset: new this.resMap.Pixel(-13, -30),
title: "我"
});
this.map.add(marker);
this.map.setFitView();
// 设置鼠标划过点标记显示的文字提示
marker.setTitle("我");
// 设置label标签
// label默认蓝框白底左上角显示,样式className为:amap-marker-label
marker.setLabel({
offset: new this.resMap.Pixel(0, 0), //设置文本标注偏移量
content: "我", //设置文本标注内容
direction: "bottom" //设置文本标注方位
});
}
}
},
主要方便自己学习,也希望对别人有用,谢谢!!!