高德地图 JS API - 根据地名实现标记定位
2018-08-02 06:22:19来源:博客园 阅读 ()
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare
根据地名实现地图标记定位,主要依赖高德地图的:地理编码与逆地理编码。下面来看具体的实现代码:
1. HTML (地图容器)
<div class="map-container" id="container"></div>
2. JAVASCRIPT
function markLocation(mapId, address) { AMap.plugin('AMap.Geocoder', function() { var geocoder = new AMap.Geocoder(); geocoder.getLocation(address, function(status, result) { if (status === 'complete' && result.info === 'OK') { // 经纬度 var lng = result.geocodes[0].location.lng; var lat = result.geocodes[0].location.lat; // 地图实例 var map = new AMap.Map(mapId, { resizeEnable: true, // 允许缩放 center: [lng, lat], // 设置地图的中心点 zoom: 15 // 设置地图的缩放级别,0 - 20 }); // 添加标记 var marker = new AMap.Marker({ map: map, position: new AMap.LngLat(lng, lat), // 经纬度 }); } else { console.log('定位失败!'); } }); }); }
方法写好了,调用很简单了:
// 传入地图容器ID 和 地名 markLocation('container', '湖北省武汉市');
3. 效果图
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:JS性能优化 之 FOR循环
下一篇:macbook 入门
- 前端笔记之微信小程序(三)GET请求案例&文件上传和 2019-08-14
- 微信小程序地图开发总结 2019-08-14
- react 地图可视化 cesium 篇 2019-08-14
- 网页百度地图api,支持位置偏移 2019-08-14
- vue 地图可视化 maptalks 篇 2019-05-22
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash