zoukankan      html  css  js  c++  java
  • 高德地图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]);// 缩放比例,经度 纬度 即可

  • 相关阅读:
    Spring Controller参数为空串的处理方式
    netstat用法
    zookeeper的配置项
    C++ Lambda表达式用法
    java命令行运行jar里的main类
    Random的nextInt用法
    【JAVA】删除某个目录及目录下的所有子目录和文件
    Centos7设置keepAlived开机自启动
    linux设置nginx开机自启动
    window.open()方法
  • 原文地址:https://www.cnblogs.com/ss977/p/7646384.html
Copyright © 2011-2022 走看看