Heim >Java >javaLernprogramm >Amap-Positionierung und Hinzufügen von Overlays (Code)

Amap-Positionierung und Hinzufügen von Overlays (Code)

坏嘻嘻
坏嘻嘻Original
2018-09-14 16:47:392957Durchsuche

Ich habe viele Sprachen gelernt und vor kurzem habe ich mich endlich entschieden, Java zu lernen.

<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>

Verwandte Empfehlungen:

PHP-Notizen (HTML), PHP-Notizen HTML

HTML-Dokumente HTML, HTML5, CSS ,css3_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonAmap-Positionierung und Hinzufügen von Overlays (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn