高德地图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) != -1) {
                        $("#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(40, 50),
                            image: "/Static/Web/Images/Shop/markerIcon.png", // 覆盖标注的图标
                            imageOffset: new AMap.Pixel(0, 0) //相对于大图的取图位置

                        })
                    });
                    marker.setLabel({ // 设置数字
                        offset: new AMap.Pixel(0, 0),
                        content: (parseInt(i) + 1)
                    });

                    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(-9, -31), //相对于基点的偏移位置
                            zIndex: 1000,
                            content: '覆盖内容’   //自定义点标记覆盖物内容
                            });
                           overMarker.setMap(mapObj);
                           mapObj.setZoomAndCenter(12, [item.Longitude, item.Latitude]);// 定位后再缩放
                         
                    });
                    marker.setMap(mapObj);
                    
                });
               
                mapObj.setFitView();
                return result;
            }

        
    });

View Code

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]);// 缩放比例，经度纬度即可