高德地图定位问题

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

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/

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

<!--引入UI组件库（1.1版本） -->
<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

//加载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/reference/event

高德地图定位问题

猜你喜欢