vue中使用高德地图自定义开发
用一个在地图上挖宝的小例子,来总结下自己使用高德地图的心得。
起步-加载高德地图
// 进入
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);
};
});
}
使用,在那个页面需要用高德地图,就在那个页面调用
<script>
import AMap from "@/utils/AMap";
export default {
name: "home",
data() {
return {
map: null
};
},
created() {
window.title = "地图";
},
mounted() {
this.initAMap();
},
methods: {
async initAMap() {
try {
const res = await AMap();
this.map = new res.Map("container", {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始化地图层级
center: [116.397428, 39.90923] //初始化地图中心点
});
} catch (err) {
console.error(err);
}
}
}
};
</script>
获取传入的宝箱位置
// 别忘记在data中添加lng和lat
created() {
this.lng = this.$route.query.lng;
this.lat = this.$route.query.lat;
},
考虑后面方便调用高德api,修改下代码
<script>
import AMap from "@/utils/AMap";
export default {
name: "home",
data() {
return {
map: null,
// 宝箱位置
lng: null,
lat: null,
// 新增
resMap: null
};
},
created() {
this.lng = this.$route.query.lng;
this.lat = this.$route.query.lat;
},
mounted() {
this.initAMap();
},
methods: {
async initAMap() {
try {
// 修改
this.resMap = await AMap();
this.map = new this.resMap.Map("container", {
resizeEnable: true, //是否监控地图容器尺寸变化
zooms: [3, 19], //设置地图级别范围
zoom: 14, //初始化地图层级
zoomEnable: true, // 是否缩放
scrollWheel: true, // 是否支持滚轮缩放
dragEnable: true, // 是否支持鼠标拖拽平移
jogEnable: true, // 是否支持缓动效果
buildingAnimation: true, // 模块消失是否有动画效果
center: [this.lng, this.lat] //初始化地图中心点
});
} catch (err) {
console.error(err);
}
}
}
};
</script>
添加点标记
新建一个函数
// 创建点标记
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: "<div class='info'>我</div>", //设置文本标注内容
direction: "bottom" //设置文本标注方位
});
}
}
},
最后
主要方便自己学习,也希望对别人有用,谢谢!!!