Amap positioning and adding overlays (code)

I have learned many languages, and recently I finally decided to learn java.

<template>
  <p>
    <p id="container"></p>
  </p>
</template>
<script>
//   import AMap from &#39;AMap&#39;
//   import AMapUI  from &#39;AMapUI&#39;
  var map
  export default {
    mounted: function () {
      this.init()
    },
    methods: {
      init: function () {
                let mk1,mk2;
       //创建地图 
                /* eslint-disable no-undef*/
                let mapObj = new AMap.Map(&#39;container&#39;, {
          center: [116.000923, 36.675807],
          zoom: 14,
        });
                mapObj.setMapStyle(&#39;amap://styles/1f5bca85a0363d4768cd74be2dff949f&#39;); // 设置地图样式
                //两个组件：放大缩小按钮和图层的切换
                mapObj.plugin([&#39;AMap.ToolBar&#39;, &#39;AMap.MapType&#39;], function () {
                    //mapObj.addControl(new AMap.ToolBar())
                    // mapObj.addControl(new AMap.MapType({showTraffic: false, showRoad: false}))
                })
                mapObj.plugin([&#39;AMap.Geolocation&#39;], function () {
                            let geolocation = new AMap.Geolocation({
                                enableHighAccuracy: true, //  是否使用高精度定位，默认:true
                                timeout: 10000, //  超过10秒后停止定位，默认：无穷大
                                maximumAge: 0, // 定位结果缓存0毫秒，默认：0
                                convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                                showButton: true, //  显示定位按钮，默认：true
                                buttonPosition: &#39;RB&#39;,  // 定位按钮停靠位置，默认：&#39;LB&#39;，左下角
                                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, &#39;complete&#39;, (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:&#39;AMAP_ANIMATION_NONE&#39;,
                                    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:&#39;AMAP_ANIMATION_NONE&#39;,
                                });
                            })  //  返回定位信息
                            AMap.event.addListener(geolocation, &#39;error&#39;, (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>

Related recommendations:

PHP notes (HTML), php notes html

HTML document html, html5, css,css3_html/css_WEB-ITnose

The above is the detailed content of Amap positioning and adding overlays (code). For more information, please follow other related articles on the PHP Chinese website!