高德地图API使用

1、根据地址找经纬度/修改经纬度

marker.setPosition(result.geocodes[0].location);
map.setCenter(marker.getPosition())

2、根据经纬度找地址

3、根据当前IP获取城市

function initLocationCity() {

    //实例化城市查询类

    var citysearch = new AMap.CitySearch();

    //自动获取用户IP，返回当前城市

    citysearch.getLocalCity(function (status, result) {

        if (status === 'complete' && result.info === 'OK') {

            if (result && result.city && result.bounds) {

                var cityinfo = result.city;

                var citybounds = result.bounds;

                document.getElementById('txtCity').value = cityinfo;

                var ipCity = cityinfo.replace("市", "");

                $(".cityList ul a").each(function () {

                    if ($(this).text().indexOf(ipCity) != -) {

                        $("#hidShopAreaId").val($(this).attr("data-content"));

                        loadCityXY();

                        searchShopList();

                    }

                });

                //地图显示当前城市

                mapObj.setBounds(citybounds);

            }

        } else {

            document.getElementById('txtCity').value = result.info;

        }

    });

}

4、

 $.ajaxRequest({

        url: "接口路径",

        onRequest: function (param) {

            参数

        },

        onResponse: function (result) {

            mapObj.clearMap();

                $(result).each(function (i) {

                    marker = new AMap.Marker({

                        position: [item.Longitude, item.Latitude],

                        icon: new AMap.Icon({

                            size: new AMap.Size(, ),

                            image: "/Static/Web/Images/Shop/markerIcon.png", // 覆盖标注的图标

                            imageOffset: new AMap.Pixel(, ) //相对于大图的取图位置

                        })

                    });

                    marker.setLabel({ // 设置数字

                        offset: new AMap.Pixel(, ),

                        content: (parseInt(i) + )

                    });

                    marker.on('click', function () {

                        // 点击当前标注，清除在这之前已生成过的覆盖标注，定义不同的overMark避免和marker冲突

                        if (overMarker) {

                            mapObj.remove(overMarker);

                        };

                           overMarker = new AMap.Marker({ //添加自定义点标记

                            map: mapObj,

                            position: [item.Longitude, item.Latitude], //基点位置

                            offset: new AMap.Pixel(-, -), //相对于基点的偏移位置

                            zIndex: ,

                            content: '覆盖内容’   //自定义点标记覆盖物内容

                            });

                           overMarker.setMap(mapObj);

                           mapObj.setZoomAndCenter(, [item.Longitude, item.Latitude]);// 定位后再缩放

                    });

                    marker.setMap(mapObj);

                });

                mapObj.setFitView();

                return result;

            }

    });

5、循环遍历标注并自定义infoWindow窗口（自定义点标注，缩放地图比例，给标注添加点击事件并更改标注图标） 5、添加新标注，修改标注（覆盖物）

添加新标注：

    marker = new AMap.Marker({

            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",

            position: [116.41, 39.91]

        });

    marker.setMap(map);

覆盖物：会替换掉原来的标注

function updateMarker() {

        // 自定义点标记内容

        var markerContent = document.createElement("div");

        // 点标记中的图标

        var markerImg = document.createElement("img");

        markerImg.className = "markerlnglat";

        markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";

        markerContent.appendChild(markerImg);

        // 点标记中的文本

        var markerSpan = document.createElement("span");

        markerSpan.className = 'marker';

        markerSpan.innerHTML = "Hi，我换新装备啦！";

        markerContent.appendChild(markerSpan);

        marker.setContent(markerContent); //更新点标记内容

        marker.setPosition([116.39, 39.93]); //更新点标记位置

    }

6、根据经纬度初始化地图，并且要让地图比例放大

解决方法：

在定位完成map.setFitView();方法后设置 map.setZoomAndCenter(28, [Y,X]);// 缩放比例，经度纬度即可

巴特西

高德地图API使用

最新文章

热门文章