如果开发者账号包括Key已经有了，请忽略此步骤
首先，注册开发者账号，成为高德开放平台开发者
登陆之后，在进入「应用管理」 页面「创建新应用」
为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
记住这个Key，引入地图API时使用。本文使用的是v.2.0 如果是低版本 有些方法可能需要调整高德地图v.2.0 示例 https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show效果图如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>高德地图可视化</title> <style> #cugMap{width: 780px;height: 400px;} .amap-icon{overflow:inherit !important} </style> </head> <body> <!-- 展示 --> <div id="cugMap"></div> <div id="panel"></div> <script src="https://webapi.amap.com/loca?v=2.0&key=你的应用key值"></script> <script> window.onload = function(){ var map = new AMap.Map('cugMap', { center: [114.061087,22.528578], viewMode:'3D',//使用3D视图 zoom: 19.5, // pitch:140, }); var icon1 = new AMap.Icon({ size: new AMap.Size(20, 27), // 图标尺寸 image: 'static/image/icons.png', // Icon的图像 imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等 imageSize: new AMap.Size(20, 27) // 根据所设置的大小拉伸或压缩图片 }); var marker1 = new AMap.Marker({ position: new AMap.LngLat(114.061087,22.528578), offset: new AMap.Pixel(-14, -30), icon: icon1, // 添加 Icon 图标 URL title: '' }); var icon2 = new AMap.Icon({ size: new AMap.Size(120, 60), // 图标尺寸 image: 'static/image/cugs.png', // Icon的图像 imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等 imageSize: new AMap.Size(120, 60) // 根据所设置的大小拉伸或压缩图片 }); var marker2 = new AMap.Marker({ position: new AMap.LngLat(114.061087,22.528578), offset: new AMap.Pixel(-60, -100), icon: icon2, // 添加 Icon 图标 URL title: '悬停名称' }); map.add([marker1,marker2]); AMap.plugin([ 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', // 'AMap.Geolocation', ], function(){ // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件 map.addControl(new AMap.ToolBar()); // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺 map.addControl(new AMap.Scale()); // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图 // map.addControl(new AMap.HawkEye({isOpen:true})); // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制 map.addControl(new AMap.MapType()); // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置 // map.addControl(new AMap.Geolocation()); }); marker2.on('click',function(e){ var geolocation = null; map.plugin('AMap.Geolocation', function(options) { geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位，默认:true timeout: 10000, //超过10秒后停止定位，默认：无穷大 buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20) zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false buttonPosition: 'RB' }); // map.addControl(geolocation); //跳转至当前位置定位地点 geolocation.getCurrentPosition(function(status,result){ if(status=='complete'){ onComplete(result) }else{ onError(result) } }); }); //解析定位结果 function onComplete(data) { // console.log(data.position) 获取当前位置经纬度 var driving = new AMap.Driving({ map: map, panel: "panel" }); // 根据起终点经纬度规划驾车导航路线 driving.search( new AMap.LngLat(data.position.lng,data.position.lat),new AMap.LngLat(114.061087,22.528578), function(status, result) { // result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult if (status === 'complete') { console.log("定位成功"); } else { console.log(result) } }); } //解析定位错误信息 function onError(data) { console.log("定位失败"); } }); } </script> </body> </html>
