高德地图api

linefly的地图支持终于由google更换为高德

( google有大量的加载问题出现 及中国西南地区加载及其不稳定 )

海拔依然引用google数据部分 国内地图由于政策原因不提供海拔数据

以下为工作中使用到的功能

地图初始化

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
var map = new AMap.Map('container', {
    resizeEnable: true,
    zoom:11,
    center: [116.397428, 39.90923]
});

监听事件

addListener( instance, eventName, handler, context)
//添加监听事件 instance地图名称 eventName事件类型 handler执行函数
removeListener( listener)
//撤销监听事件

地理坐标与地理信息转换

new AMap.Geocoder.getAddress(lnglatXY, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoder_CallBack(result);
            }
        });  
        function geocoder_CallBack(data) {
            var address = data.regeocode.formattedAddress; //返回地址描述
        document.getElementById("result").innerHTML = address;
    } 
//通过lnglatXY获取城市信息

鼠标点击获得经纬度

    var clickEventListener = map.on('click', function(e) {
        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
    });

覆盖物添加

    var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ];
    var polyline = new AMap.Polyline({
        path: lineArr,          //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeOpacity: 1,       //线透明度
        strokeWeight: 5,        //线宽
        strokeStyle: "solid",   //线样式
        strokeDasharray: [10, 5] //补充线样式
    });
    polyline.setMap(map);

    var polygonArr = new Array();//多边形覆盖物节点坐标数组
    polygonArr.push([116.403322, 39.920255]);
    polygonArr.push([116.410703, 39.897555]);
    polygonArr.push([116.402292, 39.892353]);
    polygonArr.push([116.389846, 39.891365]);
    var  polygon = new AMap.Polygon({
        path: polygonArr,//设置多边形边界路径
        strokeColor: "#FF33FF", //线颜色
        strokeOpacity: 0.2, //线透明度
        strokeWeight: 3,    //线宽
        fillColor: "#1791fc", //填充色
        fillOpacity: 0.35//填充透明度
    });
    polygon.setMap(map);

    var circle = new AMap.Circle({
        center: new AMap.LngLat("116.403322", "39.920255"),// 圆心位置
        radius: 1000, //半径
        strokeColor: "#F33", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 3, //线粗细度
        fillColor: "#ee2200", //填充颜色
        fillOpacity: 0.35//填充透明度
    });
    circle.setMap(map);

天气预报

 AMap.service('AMap.Weather', function() {
        var weather = new AMap.Weather();
        //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
        weather.getLive('朝阳区', function(err, data) {
            if (!err) {
                var str = [];
                str.push('<div style="color: #3366FF;">实时天气' + '</div>');
                str.push('<div>城市/区：' + data.city + '</div>');
                str.push('<div>天气：' + data.weather + '</div>');
                str.push('<div>温度：' + data.temperature + '℃</div>');
                str.push('<div>风向：' + data.windDirection + '</div>');
                str.push('<div>风力：' + data.windPower + ' 级</div>');
                str.push('<div>空气湿度：' + data.humidity + '</div>');
                str.push('<div>发布时间：' + data.reportTime + '</div>');
                var marker = new AMap.Marker({map: map, position: map.getCenter()});
                var infoWin = new AMap.InfoWindow({
                    content: str.join(''),
                    offset: new AMap.Pixel(0, -20)
                });
                infoWin.open(map, marker.getPosition());
                marker.on('mouseover', function() {
                    infoWin.open(map, marker.getPosition());
                });
            }
        });
        //未来4天天气预报
        weather.getForecast('朝阳区', function(err, data) {
            if (err) {return;}
            var str = [];
            for (var i = 0,dayWeather; i < data.forecasts.length; i++) {
                dayWeather = data.forecasts[i];
                str.push(dayWeather.date+' <div class="weather">'+dayWeather.dayWeather+'</div> '+ dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃');
            }
            document.getElementById('tip').innerHTML = str.join('<br>');
        });
    });