高德开发地图 JS API 概述

更新时间：2018年04月20日

2018年4月18日，JavaScript API V1.4.6 正式发布

简介

高德地图 JavaScript API，是由 JavaScript 语言编写的应用程序接口，它能够帮助您在网站或移动端中构建功能丰富、交互性强的地图应用程序。除了基本地图功能的接口外，JavaScript API还提供了诸如地点搜索、路线规划、定位、地址解析、行政区查询等数据服务，您可以根据自己的需要进行选择性使用。

基于高德地图 JavaScript API 对外提供的UI组件库，侧重于帮助开发者快速实现地图上UI组件的个性化展示，详情可参考UI组件库简介。

功能介绍与体验

地图
点标记
图层
搜索
路径规划
地理编码

var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]
 });

var marker, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });
 AMap.event.addDomListener(document.getElementById('addMarker'), 'click', function() {
        addMarker();
    }, false);
 AMap.event.addDomListener(document.getElementById('updateMarker'), 'click', function() {
        marker && updateMarker();
    }, false);
 AMap.event.addDomListener(document.getElementById('clearMarker'), 'click', function() {
        if (marker) {
            marker.setMap(null);
            marker = null;
        }
    }, false);
 // 实例化点标记
    function addMarker() {
        if (marker) {
            return;
        }
        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [116.405467, 39.907761]
        });
        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.391467, 39.927761]); //更新点标记位置
    }

var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });
    //实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
    });
    trafficLayer.setMap(map);
 var isVisible = true;
    AMap.event.addDomListener(document.getElementById('control'), 'click', function() {
        if (isVisible) {
            trafficLayer.hide();
            isVisible = false;
        } else {
            trafficLayer.show();
            isVisible = true;
        }
    }, false);

var map = new AMap.Map("container", {
        resizeEnable: true
    });
    AMap.service(["AMap.PlaceSearch"], function() {
        var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
            pageSize: 5,
            pageIndex: 1,
            city: "010", //城市
            map: map,
            panel: "panel"
        });
        //关键字查询
        placeSearch.search('方恒');
    });

var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],//地图中心点
        zoom: 13 //地图显示的缩放级别
    });
    //构造路线导航类
    var driving = new AMap.Driving({
        map: map,
        panel: "panel"
    }); 
    // 根据起终点经纬度规划驾车导航路线
    driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719));

function geocoder() {
    var geocoder = new AMap.Geocoder({
        city: "010", //城市，默认：“全国”
        radius: 1000 //范围，默认：500
    });
    //地理编码,返回地理编码结果
    geocoder.getLocation("北京市海淀区苏州街", function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            geocoder_CallBack(result);
        }
    });
}

function addMarker(i, d) {
    var marker = new AMap.Marker({
        map: map,
        position: [d.location.getLng(), d.location.getLat()]
    });
    var infoWindow = new AMap.InfoWindow({
        content: d.formattedAddress,
        offset: {
            x: 0,
            y: -30
        }
    });
    marker.on("mouseover", function(e) {
        infoWindow.open(map, marker.getPosition());
    });
}
//地理编码返回结果展示
function geocoder_CallBack(data) {
    var resultStr = "";
    //地理编码结果数组
    var geocode = data.geocodes;
    for (var i = 0; i < geocode.length; i++) {
        //拼接输出html
        resultStr += "<span style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">" + "<b>地址</b>：" + geocode[i].formattedAddress + "" + "&nbsp;&nbsp;<b>的地理编码结果是:</b><b>&nbsp;&nbsp;&nbsp;&nbsp;坐标</b>：" + geocode[i].location.getLng() + ", " + geocode[i].location.getLat() + "" + "<b>&nbsp;&nbsp;&nbsp;&nbsp;匹配级别</b>：" + geocode[i].level + "</span>";
        addMarker(i, geocode[i]);
    }
    map.setFitView();
    document.getElementById("result").innerHTML = resultStr;
}

下载完整示例代码

账号与Key的申请

注册成为高德开发者需要分三步：

第一步，注册高德开发者；

第二步，去控制台创建应用；

第三步，获取Key。

具体步骤可参看下图

获取 API Key

给开发者的建议

（1）高德开放平台提供的地图API/SDK，任何非盈利性网站/应用均可免费使用。请参阅《高德地图JavaScript API 使用条款》获得详细信息。

（2）您可以通过开发指南和参考手册来掌握JavaScript API的开发。

（3）JavaScript API将于2015年2月底停用旧版服务，涉及到PoiSearch、RoadSearch、Geocoder、RouteSearch、BusSearch、Partition。如您已采用旧版JavaScript API进行开发，建议您采用最新版本的JavaScript API 进行开发，请参阅升级方案。

定位效果优化

使用场景：在您的APP中有内置的有html页面，同时在html页面需要提供你的当前位置信息。

使用的具体步骤：

（1）在定位SDK中调用如下方法开启 SDK 辅助H5定位功能：

Java

mLocationClient.startAssistantLocation();

（2）在html页面中需要获取到当前位置，使用JavaScript API的Geolocation定位插件，并且将useNative属性设置为true，既可以用调用定位sdk的定位效果来获取到更精准的当前位置信息。

兼容性

浏览器：IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome、Edge、UC、微信、QQ等

操作系统：Windows XP+(含触屏)、Mac、Linux

移动平台：Android 2.3+、iOS 5+

版本说明

从 V1.4.0 版本开始，JS API 支持分版本加载功能，API 升级不会再强制用户升级，用户可以保持当前版本继续使用。修改方式如下：更改地址中参数 v 的取值即可。

JavaScript

<script type="text/javascript" data-src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>

高德 开发 地图 JS API 概述