Gaode map positioning problem

Record some problems encountered when using AutoNavi and Baidu maps

1. Take the city name from the positioning. Under normal circumstances, the field name returned by AutoNavi Map is city, but the field returned by the municipality directly under the Central Government is the field province.

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

If you still can’t get the city name in the above way, just use the location on the app to get it: this.$store.satet.city ---- is the city returned after logging in on the app, and it’s stored in the state

2. When using AutoNavi map, the console reports an error: Invalid Object: Pixel(NaN, NaN)

When the page calls Gaode map, the coordinate points are displayed on the map through the latitude and longitude coordinates. When the coordinates are empty, this exception will be reported. Therefore, when drawing the coordinate points, it is necessary to judge that the longitude and latitude have values and then mark them through the Gaode api operating

3. According to the api provided by Baidu map, using the latitude and longitude to reverse the address, the problem of district code is not obtained:
Popular science knowledge: the so-called "zhitongzi city" is the common name for prefecture-level cities that do not have districts and counties but directly manage townships . At present, there are 5 prefecture-level cities in the country without districts, namely Dongguan City in Guangdong Province, Zhongshan City in Guangdong Province, Jiayuguan City in Gansu Province, Danzhou City in Hainan Province (prefecture-level cities established in 2015) and Sansha City

Since there are no zone codes in the above 5 places, if the backend interface requires zone codes, the front end will check the address details according to the latitude and longitude at this time, and the zone codes can not be obtained if you find out.

Solution: The background needs to deal with the situation of no zone coding

4. Gaode ui component library---AMapUI, https://lbs.gaode.com/api/amap-ui/intro/

1) For example, if the UI component library is introduced below, the property initAMapUI:fn will be generated on the window object-to generate the object AMapUI on the window object, you need to listen in the window.onApiLoaded method. When this property is available, you need to call Click the initAMapUI method to generate window.AMapUI

<!--引入UI组件库（1.1版本） -->
<script src="//webapi.amap.com/ui/1.1/main.js"></script>

2) In the place where the map is generated, introduce the required components as needed, AMapUI.loadUIload the specific UI in the interface, and then reference it in the callback function, such as the drag and drop component ---PositionPicker (drag and drop location), 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. Events bound in Gaode map: https://lbs.gaode.com/api/javascript-api/guide/events/map_overlay , event binding and removal: https://lbs.gaode.com /api/javascript-api/reference/event

Gaode map positioning problem

Guess you like