高德 开发 地图 JS API 概述
更新时间:2018年04月20日
简介
高德地图 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 + "" + " <b>的地理编码结果是:</b><b> 坐标</b>:" + geocode[i].location.getLng() + ", " + geocode[i].location.getLat() + "" + "<b> 匹配级别</b>:" + geocode[i].level + "</span>";
addMarker(i, geocode[i]);
}
map.setFitView();
document.getElementById("result").innerHTML = resultStr;
}
给开发者的建议
(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定位功能:
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 的取值即可。
<script type="text/javascript" data-src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>