高德API在web端的调用（定位方面）_web端页面调起地图软件资源-CSDN下载

共1个文件

html：1个

需积分: 50 144 浏览量 2019-08-20 14:02:27 上传评论 2 收藏 3KB ZIP 举报

在Web开发中，地图服务是不可或缺的一部分，尤其是在需要提供地理位置信息、导航或定位服务的应用中。高德API作为一款强大的地图服务提供商，为开发者提供了丰富的功能。本文将深入探讨如何在Web端调用高德API，特别是在定位方面的应用，包括模糊查询、地址精确定位以及经纬度定位。一、引入高德API 我们需要在HTML文件中引入高德地图的JavaScript库。通常，这可以通过在`<head>`标签内添加以下代码来实现： ```html <script src="http://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script> ``` 其中，`YOUR_API_KEY`是您在高德地图开放平台注册并获取的API密钥，它是调用API服务的关键。二、初始化地图在HTML页面中创建一个用于显示地图的`div`元素，然后在JavaScript中初始化地图： ```javascript var map = new AMap.Map('container', { zoom: 12, center: [116.39, 39.9] }); ``` 这里的`'container'`是`div`元素的ID，`zoom`定义了初始缩放级别，`center`则是地图中心点的经纬度。三、实现模糊查询高德API提供了地名模糊查询的功能，可以搜索地点、道路等信息。以下是如何实现的示例： ```javascript AMap.service(['AMap.PlaceSearch'], function() { var placeSearch = new AMap.PlaceSearch({ city: "北京市" // 设置城市 }); placeSearch.search('故宫', function(status, result) { if (status === 'complete' && result.info === 'OK') { console.log(result); } else { console.log('查询失败：' + result.info); } }); }); ``` 在这个例子中，我们创建了一个`PlaceSearch`实例，并搜索了关键词“故宫”。四、地址精确定位高德API提供了逆地理编码服务，可以根据地址信息获取精确的经纬度坐标。下面是如何实现的代码： ```javascript AMap.service(['AMap.Geocoder'], function() { var geocoder = new AMap.Geocoder(); geocoder.getAddress('北京市故宫博物院', function(status, result) { if (status === 'complete' && result.info === 'OK') { console.log(result.regeocode.location); } else { console.log('地址解析失败：' + result.info); } }); }); ``` 这里我们通过`Geocoder`服务将“北京市故宫博物院”的地址转换为经纬度坐标。五、经纬度定位要进行经纬度定位，可以利用浏览器的Geolocation API结合高德API。以下代码展示了如何获取用户当前的位置： ```javascript if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latlng = [position.coords.latitude, position.coords.longitude]; var marker = new AMap.Marker({ position: latlng }); map.add(marker); map.setCenter(latlng); }, function(error) { console.log('获取位置信息失败：' + error.message); }); } else { console.log('浏览器不支持地理定位'); } ``` 这段代码首先检查浏览器是否支持Geolocation API，然后获取用户的位置信息，将其转化为高德地图的坐标对象，并在地图上显示一个标记。总结：通过以上内容，我们可以看到高德API在Web端的调用十分灵活，它不仅能够实现地图的展示、查询、定位等功能，还能与浏览器的Geolocation API结合，为用户提供个性化的地理位置服务。开发者只需要根据具体需求，灵活组合这些API，就能构建出丰富的地图应用。在实际开发过程中，记得根据项目需求申请合适的API密钥，并注意版权及使用限制。

资源推荐

资源详情

资源评论

收起资源包目录

map.zip （1个子文件）

map.html 8KB

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <title>地图显示</title> <style> html, body, #container { width: 100%; height: 100%; } </style> </head> <body onLoad="mapInit()"> <div id="iCenter"></div> <div id="iControlbox"> <ul> <li> <button onclick="javascript:getCurrentPosition();">浏览器定位</button> </li> <li> <button onclick="javascript:showCityInfo();">IP定位</button> </li> <li> <input type="text" id="key_1" value="上海市" /> <button onclick="javascript:placeSearch();">关键字定位</button> </li> <li> <input type="text" id="key_2" value="北京市朝阳区大屯路" /> <button onclick="javascript:geocoder();">地址定位</button> </li> </ul> </div> <div class="input-item"> <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div> <input id='lnglat' type="text" value='116.39,39.9'> <input id="regeo" type="button" class="btn" value="经纬度 -> 地址"> </div> <div id="result"></div> <div id="container"></div>  <script src="https://webapi.amap.com/maps?v=1.4.15&key=661bd4aa7c4b88915db4d3de7782baa5&plugin=AMap.PlaceSearch"></script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=661bd4aa7c4b88915db4d3de7782baa5&plugin=AMap.Geocoder"></script> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> <script type="text/javascript"> //初始化地图时，若center属性缺省，地图默认定位到用户所在城市的中心 var map = new AMap.Map('container', { resizeEnable: true }); var mapObj, geolocation; var result; var marker; function mapInit() { mapObj = new AMap.Map('iCenter'); //默认定位：初始化加载地图时，center及level属性缺省，地图默认显示用户所在城市范围 }; function regeoCode() { var lnglat = document.getElementById('lnglat').value.split(','); if (!marker) { marker = new AMap.Marker(); map.add(marker); } marker.setPosition(lnglat); var strs = new Array(); //定义一数组 var lngx, lngy; strs = document.getElementById('lnglat').value.split(','); //字符分割 lngx = strs[0]; lngy = strs[1]; // 设置缩放级别和中心点 map.setZoomAndCenter(14, [lngx, lngy]); // // 在新中心点添加 marker var marker = new AMap.Marker({ map: map, position: [lngx, lngy] }); } map.on('click', function(e) { document.getElementById('lnglat').value = e.lnglat; regeoCode(); }) document.getElementById("regeo").onclick = regeoCode; document.getElementById('lnglat').onkeydown = function(e) { if (e.keyCode === 13) { regeoCode(); return false; } return true; }; function getCurrentPosition() { //调用浏览器定位服务 AMap.service('AMap.Geolocation', function() { geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位，默认:true timeout: 10000, //超过10秒后停止定位，默认：无穷大 maximumAge: 0, //定位结果缓存0毫秒，默认：0 convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true showButton: true, //显示定位按钮，默认：true buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角 buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20) showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false }); map.addControl(geolocation); AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息 AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息 }); }; function onComplete(data) { //解析定位结果 var str = '<p>定位成功</p>'; str += '<p>经度：' + data.position.getLng() + '</p>'; str += '<p>纬度：' + data.position.getLat() + '</p>'; str += '<p>精度：' + data.accuracy + ' 米</p>'; str += '<p>是否经过偏移：' + (data.isConverted ? '是' : '否') + '</p>'; result.innerHTML = str; }; function onError(data) { //解析定位错误信息 var str = '<p>定位失败</p>'; str += '<p>错误信息：' switch (data.info) { case 'PERMISSION_DENIED': str += '浏览器阻止了定位操作'; break; case 'POSITION_UNAVAILBLE': str += '无法获得当前位置'; break; case 'TIMEOUT': str += '定位超时'; break; default: str += '未知错误'; break; } str += '</p>'; result.innerHTML = str; }; function showCityInfo() { //IP定位 //加载IP定位插件 AMap.service(["AMap.CitySearch"], function() { //实例化城市查询类 var citysearch = new AMap.CitySearch(); //自动获取用户IP，返回当前城市 citysearch.getLocalCity(); AMap.event.addListener(citysearch, "complete", function(result) { if (result && result.city && result.bounds) { var cityinfo = result.city; var citybounds = result.bounds; document.getElementById('result').innerHTML = "您当前所在城市：" + cityinfo + ""; //地图显示当前城市 map.setBounds(citybounds); } else { document.getElementById('result').innerHTML = "您当前所在城市：" + result.info + ""; } }); AMap.event.addListener(citysearch, "error", function(result) { alert(result.info); }); }); } var MSearch; var key_1; function placeSearch() { //POI搜索，关键字查询 key_1 = document.getElementById("key_1").value; document.getElementById('result').innerHTML = "您输入的是：" + key_1; //mapObj.plugin(["AMap.PlaceSearch"], function() { //构造地点查询类 AMap.service(["AMap.PlaceSearch"], function() { MSearch = new AMap.PlaceSearch({ pageSize: 10, pageIndex: 1, city: "021" //城市 }); AMap.event.addListener(MSearch, "complete", function(data) { var poiArr = data.poiList.pois; var lngX = poiArr[0].location.getLng(); var latY = poiArr[0].location.getLat(); // 设置缩放级别和中心点 map.setZoomAndCenter(14, [lngX, latY]); // 在新中心点添加 marker var marker = new AMap.Marker({ map: map, position: [lngX, latY] }); }); //返回地点查询结果 MSearch.search(key_1); //关键字查询 }); } var MGeocoder; var key_2; function geocoder() { //地理编码返回结果展示 key_2 = document.getElementById("key_2").value; document.getElementById('result').innerHTML = "您输入的是：" + key_2; AMap.service(["AMap.Geocoder"], function() { //加载地理编码插件 MGeocoder = new AMap.Geocoder({ city: "010", //城市，默认：“全国”

评论收藏

内容反馈