高德地图主要用于移动APP的开发提供便利的api,这里列出几种前端javascript对高德的使用方法,更多方式详见 http://lbs.amap.com/api/javascript-api/summary/
javascript引用高德,首先要注册高德开发平台帐号,目的是为了获取开发过程所须要的key值,不一样平台的开发须要申请不一样的key值,对于不一样key值的用途官方文档有详细介绍。博主在此用到web端key值和web服务的key值,key值主要用于页面引入高德插件时的src里 ,必填。
1.建立一个基本的高德地图javascript
var map = new AMap.Map('container', { resizeEnable: true, zoom:11, center: [116.397428, 39.90923] });
html代码html
<div id="container"></div>
引入的高德插件前端
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的key值"></script> <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
2.地理编码(经过一个地址,获取经纬度)java
//地理编码 function geocoder() { var geocoder = new AMap.Geocoder({ // city: "全国", //城市,默认:“全国” radius: 1000 //范围,默认:500 }); //地理编码,返回地理编码结果 var input = $("#addressinput").val();//输入你的地址 geocoder.getLocation(input, function(status, result) { if (status === 'complete' && result.info === 'OK') { geocoder_CallBack1(result); } }); }
//地理编码返回结果展现 function geocoder_CallBack1(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]); lnglatXY = [geocode[i].location.getLng(),geocode[i].location.getLat()]; } map.setFitView(); document.getElementById("result").innerHTML = resultStr; regeocoder(); }