<template> <p> <p id="container"></p> </p></template><script>// import amap from 'amap'// import amapui from 'amapui' var map export default { mounted: function () { this.init() }, methods: { init: function () { let mk1,mk2; //创建地图 /* eslint-disable no-undef*/ let mapobj = new amap.map('container', { center: [116.000923, 36.675807], zoom: 14, }); mapobj.setmapstyle('amap://styles/1f5bca85a0363d4768cd74be2dff949f'); // 设置地图样式 //两个组件：放大缩小按钮和图层的切换 mapobj.plugin(['amap.toolbar', 'amap.maptype'], function () { //mapobj.addcontrol(new amap.toolbar()) // mapobj.addcontrol(new amap.maptype({showtraffic: false, showroad: false})) }) mapobj.plugin(['amap.geolocation'], function () { let geolocation = new amap.geolocation({ enablehighaccuracy: true, // 是否使用高精度定位，默认:true timeout: 10000, // 超过10秒后停止定位，默认：无穷大 maximumage: 0, // 定位结果缓存0毫秒，默认：0 convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true showbutton: true, // 显示定位按钮，默认：true buttonposition: 'rb', // 定位按钮停靠位置，默认：'lb'，左下角 buttonoffset: new amap.pixel(10, 100), // 定位按钮与设置的停靠位置的偏移量，默认：pixel(10, 20) showmarker: false, // 定位成功后在定位到的位置显示点标记，默认：true showcircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true pantolocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true //zoomtoaccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false, }) mapobj.addcontrol(geolocation) geolocation.getcurrentposition(); amap.event.addlistener(geolocation, 'complete', (result) => { mapobj.setcenter(result.position) let m = result.position.m,o = result.position.o; if(mk1){ mapobj.remove([mk1,mk2]); // 重新定位的时候移除之前添加的icon } mk1 = new amap.marker({ map:mapobj, offset:new amap.pixel(-10, -10), icon:new amap.icon({ size: new amap.size(24, 24), //图标大小 image: "http://localhost:8080/static/icon/icon15.png", imagesize:new amap.size(20, 20), //图标大小 }), draggable:false, raiseondrag:false, visible:true, animation:'amap_animation_none', angle:360, autorotation:true, }); mk2 = new amap.marker({ // 添加自定义icon map:mapobj, offset:new amap.pixel(-10, -25), icon:new amap.icon({ size: new amap.size(18, 27), //图标大小 image: "http://localhost:8080/static/icon/icon5.png", imagesize:new amap.size(18, 27), //图标大小 }), draggable:true, raiseondrag:false, visible:true, animation:'amap_animation_none', }); }) // 返回定位信息 amap.event.addlistener(geolocation, 'error', (result) => { console.log(result) }) // 返回定位出错信息 }); amap.event.addlistener(mapobj,"moveend",function(){ // 监听地图平移事件 if(mk2){ mk2.setposition(mapobj.getcenter()); //让mk2处于居中状态 } }); amap.event.addlistener(mapobj,"zoomend",function(){ // 监听地图zoom等级变化 if(mk2){ mk2.setposition(mapobj.getcenter());//让mk2处于居中状态 } }); } } }</script><style> #container{ width: 100%; position: fixed; z-index: 10; top: 0; bottom: 0; }</style>
相关推荐：
php笔记（html篇），php笔记html
html文档 html,html5,css,css3_html/css_web-itnose
以上就是高德地图定位和添加覆盖物（代码）的详细内容。