最近的项目用到了高德地图,来记录一下吧~
1.首先在index.html中引入
//放密钥
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: '你的密钥',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=自己的key"></script>
2.给了以下几个数据属性
data() {
return {
mark: null,
reLnglat: null,
sum: 1,
markerArr: []
}
},
3.完成地图初始化
mounted() {
//DOM初始化完成进行地图初始化
this.initMap();
},
methods: {
initMap() {
var that = this;
that.map = new AMap.Map("container", { //设置地图容器id
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 16,
// dragEnable: false,
zoomEnable: false,
});
}
}
需求开始啦
4.定位到所在位置,因为开发的是移动端,需要将gps定位转高德定位
AMap.plugin("AMap.Geolocation", function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:5s
buttonPosition: "BT", //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
showCircle: false,
showMarker: false,
panToLocation: true,
});
var p = [];
that.map.addControl(geolocation);
geolocation.getCurrentPosition(function (status, result) {
if (status == "complete") {
// console.log(result.position, "成功");
// var myPosition = result.position;
that.map.setCenter(result.position);
p.push(result.position.lng);
p.push(result.position.lat);
// that.thPosition = myPosition;
//gps转高德
AMap.convertFrom(p, "gps", function (status, result) {
if (result.info === "ok") {
var resLnglat = result.locations[0];
that.reLnglat = resLnglat;
}
});
} else {
console.log("失败");
}
});
});
5.点击一个按钮标记点,连接两点
//打卡
async cenParentMsg() {
var that = this;
that.sum++;
AMap.plugin("AMap.Geolocation", function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:5s
buttonPosition: "BT", //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
showCircle: false,
showMarker: false,
panToLocation: true,
});
var p = [];
that.map.addControl(geolocation);
geolocation.getCurrentPosition(function (status, result) {
if (status == "complete") {
that.map.setCenter(result.position);
p.push(result.position.lng);
p.push(result.position.lat);
AMap.convertFrom(p, "gps", function (status, result) {
if (result.info === "ok") {
var resLnglat = result.locations[0];
that.reLnglat = resLnglat;
}
});
var marker = new AMap.Marker({
position: p,
});
marker.setLabel({
direction: "center",
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: "<div>" + that.sum + "</div>", //设置文本标注内容
});
that.map.add(marker);
that.markerArr.push(marker);
var line = new AMap.Polyline({
strokeColor: "#3d5dff",
// isOutline: true,
outlineColor: "#3d5dff",
});
line.setMap(that.map);
function ao() {
var p1 = that.markerArr[that.sum - 2].getPosition();
var p2 = that.markerArr[that.sum - 1].getPosition();
var path = [p1, p2];
line.setPath(path);
}
ao();
} else {
console.log("失败");
}
});
});
},