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>');});});

總結

以上是生活随笔為你收集整理的高德地图api的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。