vue项目引入高德地图
简单叙述首先需要了解一个小细节: 就是定位获取到的坐标,直接在地图组件或者在位置标注中使用的时候,位置可能有一定的偏差。还有一个点需要注意的就是: 微信开发者工具的定位不准确,无法获取想要的位置。为了安全,经纬度一般都进行了加密地球上同一个地理位置的经纬度,在不同的坐标系中,会有少于偏移,国内目前常见的坐标系主要分为三种:地球坐标系——WGS84:常见于 GPS 设备,Google 地图等国际标准
·
简单叙述
首先需要了解一个小细节: 就是定位获取到的坐标,直接在地图组件或者在位置标注中使用的时候,位置可能有一定的偏差。
还有一个点需要注意的就是: 微信开发者工具的定位不准确,无法获取想要的位置。
为了安全,经纬度一般都进行了加密
地球上同一个地理位置的经纬度,在不同的坐标系中,会有少于偏移,国内目前常见的坐标系主要分为三种:
- 地球坐标系——WGS84:常见于 GPS 设备,Google 地图等国际标准的坐标体系。
- 火星坐标系——GCJ-02:中国国内使用的被强制加密后的坐标体系,高德坐标就属于该种坐标体系。
- 百度坐标系——BD-09:百度地图所使用的坐标体系,是在火星坐标系的基础上又进行了一次加密处理。
因此在使用不同坐标系前,我们需要使用 AMap.convertFrom() 方法将这些非高德坐标系进行转换。
除此之外,key 值需要注意一下,申请的时候弄清楚自己的使用场景,不然 key 值无效
组件引入教程
在 index.html 引入高德地图
<script src="https://webapi.amap.com/maps?v=2.0&key=申请到的 key 值"></script>
这边我直接写死,而不是配置到配置文件中。因为我在调用接口的时候发现。从配置文件中读取请求解析的时候会直接多带一个 ’ (单引)号。
写一个简单的组件
组件只有展示定位位置的功能。具体调用我就不展示了。
官方的文档: https://lbs.amap.com/api/jsapi-v2/guide/abc/plugins
官方一些类的参数说明: https://lbs.amap.com/api/jsapi-v2/documentation#geocoder
<template>
<div id="amap-container">
<div id="searchResultPanel" />
<el-row class="margin-top-10 address">
{{ this.defaultValue.formattedAddress }}
</el-row>
<div id="container" />
</div>
</template>
<script>
const AMap = window.AMap;
export default {
name: 'AMap',
props: {
defaultValue: {
formattedAddress: '',
longitude: '',
latitude: ''
}
},
data() {
return {
map: '',
marker: '',
};
},
mounted() {
// 初始化地图页面
this.initMap();
},
beforeDestroy() {
// 销毁地图
this.map.destroy();
},
methods: {
// 初始化地图页面
initMap() {
// 地图初始化应该在地图容器div已经添加到DOM树之后
this.map = new AMap.Map('container', {
resizeEnable: true,
//center: [118.826087, 32.017401],
center: [this.defaultValue.longitude, this.defaultValue.latitude],
zoom: 18
});
// 添加工具栏
this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
// 工具条
const toolbar = new AMap.ToolBar();
// 比例尺
const scale = new AMap.Scale();
this.map.addControl(toolbar);
this.map.addControl(scale);
});
// 添加maker
this.setMaker();
//添加点标记
this.setText()
},
// 添加maker
setMaker() {
var marker = new AMap.Marker({
position: new AMap.LngLat(this.defaultValue.longitude, this.defaultValue.latitude),
// icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
// anchor: 'bottom-center',
});
this.map.add(marker);
// 添加解析地理位置插件
this.map.plugin('AMap.Geocoder', () => {
// 异步加载插件
this.geocoder = new AMap.Geocoder({
city: this.defaultCity, // 默认:“全国”
//radius: 1000 // 范围,默认:500
});
});
},
setText() {
var text = new AMap.Text({
position: new AMap.LngLat(this.defaultValue.longitude, this.defaultValue.latitude),
//anchor: 'bottom-center',
text: this.defaultValue.formattedAddress,
});
this.map.add(text);
}
}
};
</script>
<style lang="scss">
#amap-container {
.el-input__clear {
line-height: 34px;
// top: 20px;
}
#container {
height: 40vh;
width: 80%;
margin-top: 10px;
border: 1px solid #ccc;
}
.input-with {
// position: fixed;
// top: 40px;
z-index: 1;
width: 100%;
}
.address {
color: #373737;
}
}
.amap-sug-result {
z-index: 99999;
}
</style>
效果图如下
更多推荐
已为社区贡献2条内容
所有评论(0)