JavaScript如何操作实现一个地图并标记到自身当前位置
前言
地图分为很多种，有腾讯，百度，高德等等，本篇文章使用的是高德地图的api，本文会先带领大家从如何获取 key值开始，到实现获取 自身定位结束。
一、如何获取高德地图的key值
1.首先我们需要搜索高德地图开放平台并且打开：
2. 然后呢我们需要登录自己的平台账号，登录后呢，打开控制台：
3.点击管理key值，进行添加key值的操作:
二、 如何创建地图并且获取自身定位
（1）先设置地图容器的样式：
html, body, #container { margin: 0; padding: 0; width: 100%; height: 100%; }
（2）然后设置地图容器：
<div id="container"></div>
（3）再引入script，添加自己的key值：
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你自己申请的key值"></script>
（4）设置JavaScript的操作代码，渲染地图：
var map = new AMap.Map('container', { resizeEnable: true, viewMode: "3D", zoom: 15, center: [116.335183, 39.941735] });
（5）这样我们就会得到这样一个页面：
（6） 如果想要地图方向盘和缩放功能的话，我们可以再加上这行代码：
AMap.plugin(["AMap.ControlBar"], function () { var bar = new AMap.ControlBar(); map.addControl(bar); });
(7)现在得到的效果是这样的
（8）下面呢继续进行获取定位的操作：
AMap.plugin('AMap.Geolocation', function () { var geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 使用高精度定位 timeout: 10000, // 超过10秒后停止定位 zoomToAccuracy: true, // 定位成功后自动调整地图视野 buttonPosition: 'RB' // 定位按钮位置，'LB'为左下角，'RB'为右下角 }); map.addControl(geolocation); geolocation.getCurrentPosition(function (status, result) { if (status === 'complete') { // 定位成功后的操作 var lng = result.position.lng; var lat = result.position.lat; // 创建自定义图标 var marker = new AMap.Marker({ position: [lng, lat], icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 自定义图标 offset: new AMap.Pixel(-12, -36) // 图标偏移位置 }); map.add(marker); } else { // 定位失败后的操作 console.error('定位失败'); } }); });
附加以上这串代码就可以实现获取自身定位并标点了。
三、以下是完整代码
<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ImageLayer</title> <meta id="viewport" name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0"/> <style> html, body, #container { margin: 0; padding: 0; width: 100%; height: 100%; } </style> </head> <body> <div id="container"></div> <script src="https://webapi.amap.com/maps?v=1.4.15&key=11b9b0045f8bc94b504861e860d3d359"></script> <script> var map = new AMap.Map('container', { resizeEnable: true, viewMode: "3D", zoom: 15, center: [116.335183, 39.941735] }); // 添加定位插件 AMap.plugin('AMap.Geolocation', function () { var geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 使用高精度定位 timeout: 10000, // 超过10秒后停止定位 zoomToAccuracy: true, // 定位成功后自动调整地图视野 buttonPosition: 'RB' // 定位按钮位置，'LB'为左下角，'RB'为右下角 }); map.addControl(geolocation); geolocation.getCurrentPosition(function (status, result) { if (status === 'complete') { // 定位成功后的操作 var lng = result.position.lng; var lat = result.position.lat; // 创建自定义图标 var marker = new AMap.Marker({ position: [lng, lat], icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 自定义图标 offset: new AMap.Pixel(-12, -36) // 图标偏移位置 }); map.add(marker); } else { // 定位失败后的操作 console.error('定位失败'); } }); }); AMap.plugin(["AMap.ControlBar"], function () { var bar = new AMap.ControlBar(); map.addControl(bar); }); </script> </body> </html>
