高德地图定位和添加覆盖物（代码）

<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

以上就是高德地图定位和添加覆盖物（代码）的详细内容，更多请关注php中文网其它相关文章！