vue 高德地图点击获取坐标与地理位置

<template><div class="coordinate"><div class="toolbar"><div>坐标: [ {{ lng }} , {{ lat }} ]</div><div>地址: {{ address }}</div></div><div style="width: 100%;height: 300px;"><div id="coordinateMap" class="coordinateMap" /></div></div>
</template><script>
export default {name: 'MapDialog',props: {},data() {return {overlays: [],lng: '',lat: '',address: '',marker: '',geocoder: null,mouseTool: null}},created() {},mounted() {localStorage.clear()this.MapInit()},methods: {MapInit() {const that = thisthat.map = new AMap.Map('coordinateMap', {center: [113.274041, 23.141222],resizeEnable: true,expandZoomRange: true,zoom: 13,zooms: [3, 21]})that.drawBounds(that.map)// 异步同时加载多个插件AMap.plugin(['AMap.Scale'], function() {that.scale = new AMap.Scale()that.map.addControl(that.scale)})that.mouseTool = new AMap.MouseTool(that.map)// 监听draw事件可获取画好的覆盖物that.mouseTool.on('draw', function(e) {that.overlays.push(e.obj)that.mouseTool.close()})that.geocoder = new AMap.Geocoder({radius: 1000,extensions: 'all'})that.marker = new AMap.Marker()// 点击获取坐标const clickHandler = function(e) {that.lng = e.lnglat.getLng()that.lat = e.lnglat.getLat()const lnglat = [that.lng, that.lat]that.map.add(that.marker)that.marker.setPosition(lnglat)that.getAddress(that.lng, that.lat)}that.map.on('click', clickHandler)},// 获取地址getAddress(lng, lat) {const that = thisthat.geocoder.getAddress([lng, lat], function(status, result) {if (status === 'complete' && result.info === 'OK') {if (result && result.regeocode) {that.address = result.regeocode.formattedAddressthat.$nextTick()}}})},// 限制地图区域drawBounds(map) {const opts = {subdistrict: 0,extensions: 'all',level: 'city'}const district = new AMap.DistrictSearch(opts)district.setLevel('广州市')district.search('广州市', (status, result) => {const outer = [new AMap.LngLat(-360, 90, true),new AMap.LngLat(-360, -90, true),new AMap.LngLat(360, -90, true),new AMap.LngLat(360, 90, true)]const holes = result.districtList[0].boundariesconst pathArray = [outer]pathArray.push.apply(pathArray, holes)const polygon = new AMap.Polygon({pathL: pathArray,strokeColor: '#001826',strokeWeight: 1,strokeOpacity: 0.5,fillColor: '#ffffff',fillOpacity: 1,strokeStyle: 'dashed',strokeDasharray: [10, 2, 10]})polygon.setPath(pathArray)map.add(polygon)})},// 限制地图区域ENDclose() {this.mouseTool.close(true)},}
}
</script><style lang="scss" scoped>
.coordinate {width: 100%;height: 100%;.coordinateMap {width: 100%;height: 100%;}
}
</style>

vue 高德地图点击获取坐标与地理位置相关推荐

高德地图点击获取坐标
<link href="<?=Yii::getAlias('@resUrl/css/manage.css');?>" rel="stylesheet&q ...
高德地图点击获取经纬度并标记
官网api: https://lbs.amap.com/api/javascript-api/summary 引入js: <script type="text/javascript&q ...
vue高德地图点击放大Maker
lizuncong (lizuncong) · GitHubI am a strong believer in reverse engineering. lizuncong has 42 reposi ...
自己收藏的高德地图批量标点获取坐标工具
直接上代码!!! <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
大屏页面使用transform属性scale进行缩放，高德地图点击事件失效，地图展示模糊
这里写自定义目录标题大屏页面使用transform属性scale进行缩放,高德地图点击事件失效,地图展示模糊 1.大屏缩放自适应时使用tansform scale 缩放 1.1.window.res ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...

vue 高德地图点击获取坐标与地理位置

vue 高德地图点击获取坐标与地理位置相关推荐

最新文章

热门文章