高德地图定位问题

左手的ㄟ右手 2022-12-24 13:51 216阅读 0赞

记录下使用高德、百度地图遇到的一些问题

1、从定位中拿城市名，一般情况下高德地图返回的字段名是city，但是直辖市返回的是字段province

const addressComponent = positionResult.regeocode.addressComponent
    city: addressComponent.city || addressComponent.province || this.$store.state.user.city

如果以上方式还是拿不到城市名，就用app上的定位去拿：this.$store.satet.city----是app上登陆之后返回的城市，存储在了state里面

2、使用高德地图时候，控制台报错：Invalid Object: Pixel(NaN, NaN)

页面调用高德地图时，通过经纬度坐标，在地图上显示坐标点，当坐标为空时，会报这个异常，因此，在绘制坐标点的时候，要判断经纬度有值再通过高德api作标记操作

3、根据百度地图提供的api，利用经纬度反查地址，没有获取到区编码的问题：  
科普知识：所谓的“直筒子市”，就是对不设区县，直接管理乡镇的地级市的俗称。目前全国有5个不设区的地级市，即广东省东莞市、广东省中山市、甘肃省嘉峪关市、海南省儋州市（2015年设地级市）及三沙市

由于上述的5个地方没有区编码，因此如果后台接口需要区编码的话，这个时候又要前端根据经纬度反查地址详情，反查出来是拿不到区编码的

解决方法：后台需要对无区编码的情况做下处理

4、高德ui组件库---AMapUI，[https://lbs.gaode.com/api/amap-ui/intro/][https_lbs.gaode.com_api_amap-ui_intro]

1) 例如下面将ui组件库引进，会在window对象上生成属性initAMapUI:fn----在windoe对象上生成对象AMapUI，需要在window.onApiLoaded方法做监听，当有该属性的时候，需要调用一下initAMapUI方法生成window.AMapUI

<script src="//webapi.amap.com/ui/1.1/main.js"></script>

2) 在生成地图的地方，按需引进需要用到的组件，`AMapUI.loadUI`接口加载特定UI，然后在回调函数中引用即可，比如拖拽组件---PositionPicker（拖拽选址），[https://lbs.gaode.com/api/amap-ui/reference-amap-ui/other/positionpicker][https_lbs.gaode.com_api_amap-ui_reference-amap-ui_other_positionpicker]

//加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
    AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
        var map = new AMap.Map('container',{
            zoom:16
        })
        var positionPicker = new PositionPicker({
            mode:'dragMap',//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
            map:map//依赖地图对象
        });
        //TODO:事件绑定、结果处理等
    });

5、高德地图中绑定的事件：[https://lbs.gaode.com/api/javascript-api/guide/events/map\_overlay][https_lbs.gaode.com_api_javascript-api_guide_events_map_overlay]，事件的绑定和移除：[https://lbs.gaode.com/api/javascript-api/reference/event][https_lbs.gaode.com_api_javascript-api_reference_event]

[https_lbs.gaode.com_api_amap-ui_intro]: https://lbs.gaode.com/api/amap-ui/intro/
[https_lbs.gaode.com_api_amap-ui_reference-amap-ui_other_positionpicker]: https://lbs.gaode.com/api/amap-ui/reference-amap-ui/other/positionpicker
[https_lbs.gaode.com_api_javascript-api_guide_events_map_overlay]: https://lbs.gaode.com/api/javascript-api/guide/events/map_overlay
[https_lbs.gaode.com_api_javascript-api_reference_event]: https://lbs.gaode.com/api/javascript-api/reference/event