高德地圖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;
            }

        
    });            

 

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]);// 縮放比例，經度 緯度 即可