公司用的是百度地图,过听同事说,市场上用高德地图的比较多,于是又按捺不住自己那 好奇万物的心,专门出研究了一下高德地图,发现内容基本一直,不过就是在方法的名字变了而已,废话不多说我们开始研究
高德地图api官网
一、小试牛刀
1、首先我们要把申请一个高德地图的key,然后就是把高德地图局部引入
在utils文件下建立一个map用来放置我们的地图
<template>
<view class="map">
<view id="amap" class="amap"></view>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 30.218143, // 纬度
longitude: 120.280798, // 经度
};
},
};
</script>
<script module="ModuleInstance" lang="renderjs">
//renderjs运行在视图层的js,只支持app-vue和h5(简单来说就是开了另外一条线程)
//大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力(减少通讯损耗提升性能,例如一些手势或canvas动画的场景)
export default {
data() {
return {
map: null,
layer: null,
parkList: [],
markerId: ''
};
},
mounted() {
if (window.AMap) {
//todo 如果能访问到AMap直接初始化
this.initAmap();
} else {
//todo 动态引入
const script = document.createElement('script');
script.src = "https://webapi.amap.com/maps?v=1.4.15&key=你的key";;
script.onload = () => {
//todo 初始化地图
this.initAmap();
}
document.head.appendChild(script);
}
},
methods: {
initAmap() {
this.map = new AMap.Map('amap', {
zoom: 10, //显示的缩放级别
// zooms: [2, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ,取值范围 [2 ~ 30]
center: [108.954239, 34.265472], //todo 中心点坐标
mapStyle: 'amap://styles/57994c871bb604a4c79184f5f65d8782', //todo 地图样式
resizeEnable: true //是否监控地图容器尺寸变化
});
}
},
};
</script>
<style lang="scss">
page{
width: 100%;
height: 80%;
}
.map {
width: 100%;
height: 100%;
}
#amap {
width: 100%;
height: 100%;
}
</style>
效果图:
2、获取当前经纬度并标注到地图上
<script module="ModuleInstance" lang="renderjs">
//renderjs运行在视图层的js,只支持app-vue和h5(简单来说就是开了另外一条线程)
//大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力(减少通讯损耗提升性能,例如一些手势或canvas动画的场景)
export default {
data() {
return {
map: null,
layer: null,
parkList: [],
markerId: ''
};
},
mounted() {
if (window.AMap) {
//todo 如果能访问到AMap直接初始化
this.initAmap();
} else {
//todo 动态引入
const script = document.createElement('script');
script.src = "https://webapi.amap.com/maps?v=1.4.15&key=你的key";;
script.onload = () => {
//todo 初始化地图
this.initAmap();
}
document.head.appendChild(script);
}
},
methods: {
initAmap() {
this.map = new AMap.Map('amap', {
zoom: 10, //显示的缩放级别
// zooms: [2, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ,取值范围 [2 ~ 30]
center: [108.954239, 34.265472], //todo 中心点坐标
mapStyle: 'amap://styles/57994c871bb604a4c79184f5f65d8782', //todo 地图样式
resizeEnable: true
});
// var marker = new AMap.Marker({
// position: new AMap.LngLat(108.954239, 34.265472),
// // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
// });
// this.map.add(marker);
//todo 地图创建完成 标注点
this.map.on("complete", () => {
this.createLabelsLayer();
});
},
createLabelsLayer() {
if (!this.map) return;
let that = this;
AMap.plugin('AMap.Geolocation', function() { //AMap.Geolocation插件来实现定位
var geolocation = new AMap.Geolocation({
// type: 'wgs84',
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量
offset: [10, 20],
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
position: 'RB'
})
geolocation.getCurrentPosition(function(status, result) {
if (status == 'complete') {
onComplete(result)
} else {
onError(result)
}
});
function onComplete(data) {
// data是具体的定位信息
let marker = new AMap.Marker({
position: new AMap.LngLat(data.position.lng, data.position.lat),
// 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
});
that.map.setCenter(new AMap.LngLat(data.position.lng, data.position.lat));
that.map.setZoom(18);
that.map.add(marker);
}
function onError(data) {
console.log("定位出错");
}
})
}
},
};
</script>
效果图
这里注意了,在pc中有可能会没展示出来,但是用真机测试时,是没有任何问题的,并且会出现如图所示内容,不过有个小问题是,经纬度出现误差,目前尚未解决,后面找到方法我会写在该文章的下面
尚未完结,敬请期待