高德地图 鼠标点击后 地图上点标记跟着变化

高德地图marker 类中有方法 setPosition 只要在点击地图的时候 将地图经纬度传递到该方法中即可

另外,主要查看官方手册中关于marker类的介绍 marker介绍

draggable Boolean 设置点标记是否可拖拽移动,默认为false
raiseOnDrag Boolean 设置拖拽点标记时是否开启点标记离开地图的效果
cursor String 指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持
clickable Boolean 点标记是否可点击

Html代码:

<input id="address" id="address">

<input id="keywords" type="text">
<div id="map">
div>

<input type="hidden" id="longitude"/ >
<input type="hidden" id="latitude"/ >

JS代码:

//初始化地图
function initGDmap(){
          var longitude     =   "121.503396";
          var latitude      =   "31.277239";
          var map = new AMap.Map("map", {
                resizeEnable: true,
                zoom: 13,//地图显示的缩放级别
                center: [longitude, latitude]
            });
            var marker    =   new AMap.Marker({
                map: map,
                position: [longitude, latitude]
            });                 
          //为地图注册click事件获取鼠标点击出的经纬度坐标
          var clickEventListener = map.on('click', function(e) {
                document.getElementById("longitude").value = e.lnglat.getLng(); 
                document.getElementById("latitude").value = e.lnglat.getLat();
                lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()]; //已知点坐标   
                marker.setPosition(lnglatXY); 
                regeocoder(lnglatXY);
          });
          AMap.plugin('AMap.Autocomplete',function(){   
          var auto = new AMap.Autocomplete({
              input: "keywords"
          });
          AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
          function select(e) {
              if (e.poi && e.poi.location) {
                  map.setZoom(15);
                  map.setCenter(e.poi.location);
              }
            }
          })    
      }

    //逆地理编码
    function regeocoder(lnglatXY) {  
          AMap.plugin('AMap.Geocoder',function(){   
           var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
            });        
            geocoder.getAddress(lnglatXY, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                      var address = result.regeocode.formattedAddress; //返回地址描述
                      document.getElementById("address").value = address;
                }
            });        
            var marker = new AMap.Marker({  //加点
                map: map,
                position: lnglatXY
            });
            map.setFitView();
          })    
    }

你可能感兴趣的:(PHP)