높은 도덕적지도 - 신규로 표시 위치를 전환 클릭

요구 사항 :

지도 및지도 표시 레벨 1 중심점을 임의로 설정하고, 중심점에서 마커를 추가한다.

2. 작은 손을 위해 마우스 같은 스타일을 설정합니다.

3. 이벤트를 결합 이전의 마크를 취소해야하지만, 장소에 마커를 클릭 추가지도를 클릭하세요.

(비디오의 특정 효과의 영향을 참조하십시오)

작업 (단계) :

(1) 새로운 AMap.Map을 사용하여지도를 작성합니다 ().

지도 및지도 표시 레벨 2 중심점을 임의로 설정하고,지도의 중앙에 표시를 추가 할 AMap.Marker () 메소드를 사용한다

3. 마우스 스타일 같은 작은 손 setDefaultCursor을 설정하는 방법

이전의 표시가 취소 map.remove () 메소드를 사용한다 동안 이벤트를 바인딩 4.지도, 위치에 클릭 태그를 추가 할 수 있습니다.

<! DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <메타 문자 집합 = " UTF-8 " > 
        <스크립트 유형 = " 텍스트 / 자바 스크립트 " SRC = " https://webapi.amap.com/maps?v=1.4.11&key = 9de88a718781910c9a1c81230827d1ce 및 플러그인 = AMap.Autocomplete, AMap.PlaceSearch " > </ script> 
        <제목> (5) -4添加标记练习</ 제목> 
        <스타일> 
            * { 
                패딩 : 0 ; 
                여백 : 0 ; 
                왼쪽 : 0 ; 
                폭 : 100 % ; 
                신장 : 100 % ; 
            }
         </ 스타일> 
    </ head> 
    <body> 
        <DIV ID = " 용기 " > </ DIV> 
        
        <script> var에 지도 = 새로운 AMap.Map ( ' 용기 ' , { 
                줌 : 10 , 
                센터 : 116.379391 , 39.861536 ] 
            });
            
            
            map.setDefaultCursor ( ' '포인터 ' ); 
            
            VAR의 마커 = 새로운 AMap.Marker ({ 
                아이콘 : ' https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png ' , 
                위치 : 116 , 39 ] 
            }) 
            
            map.on ( ' 클릭 ' , 함수 (E)를 { 
                map.remove ([마커]) 
                마커 = 새로운 AMap.Marker ({ 
                    아이콘 : https://a.amap.com/jsapi_demos/static/demo-center/icons /poi-marker-default.png ' ,
                    위치 : e.lnglat.lng, e.lnglat.lat, 
                    오프셋 : 새로운 AMap.Pixel (- 10 - 20 ) 
                }); 
                
                map.add ([마커]); 
            })
            
         </ script> 
    </ body> 
</ HTML>

높은 도덕적지도 - 신규로 표시 위치를 전환 클릭

추천