记ThinkPHP5.1& ThinkCMF5.1 后台接入高德地图地图选点以及地名搜索

最新推荐文章于 2021-03-21 06:19:02 发布

辰贰

最新推荐文章于 2021-03-21 06:19:02 发布

阅读量1.2k

点赞数

分类专栏： PHP HTML 文章标签： ThinkPHP ThinkCMF

本文链接：https://blog.csdn.net/qq_22246653/article/details/88971318

版权

PHP 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=你的key&plugin=AMap.Autocomplete,AMap.Geocoder,AMap.PlaceSearch,AMap.CitySearch,AMap.Geolocation"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>

    // 创建一个 Marker 实例：
    var marker = new AMap.Marker({
    position: new AMap.LngLat(lng, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
   });

    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);
    map.on('click', function(e) {
        map.remove(marker);
    });

    //为地图注册click事件获取鼠标点击出的经纬度坐标
    var clickEventListener = map.on('click', function(e) {
            $("input[name='m_point']").val(e.lnglat.getLng() + ',' + e.lnglat.getLat());
            $("input[name='latitude']").val(e.lnglat.getLat());
            $("input[name='longitude']").val(e.lnglat.getLng());

        // 将创建的点标记添加到已有的地图实例：
        map.add(marker);
        map.on('click', function(e) {
            // 移除已创建的 marker
            map.remove(marker);
        });

        var geocoder;
        var lnglatXY=new AMap.LngLat(e.lnglat.getLng(),e.lnglat.getLat());
       //console.log(lnglatXY);
        //加载地理编码插件
        map.plugin(["AMap.Geocoder"],function(){
            geocoder=new AMap.Geocoder({
            radius:1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
            extensions: "all",//返回地址描述以及附近兴趣点和道路信息，默认"base"
           output:JSON,
        });

        //返回地理编码结果
        AMap.event.addListener(geocoder, "complete",geocoder_CallBack);
            //逆地理编码
            geocoder.getAddress(lnglatXY);
        });
        //地理编码返回结果展示
        function geocoder_CallBack(data){
            //console.log(data);
            var resultStr="";
            //地理编码结果数组
            var geocode = new Array();
            geocode = data.geocodes;
            $("input[name='address']").val(data.regeocode.formattedAddress);
        }
   });

   //加载PoiPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
   AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
   var poiPicker = new PoiPicker({
   input: 'input-name' //输入框id
   });
   //监听poi选中信息
   poiPicker.on('poiPicked', function(poiResult) {
   //用户选中的poi点信息
   //console.log(poiResult);
   map.setZoom(15);
   map.setCenter(poiResult.item.location);
   $("input[name='address']").val(poiResult.item.address);
   $("input[name='name']").val(poiResult.item.name);
   $("input[name='latitude']").val(poiResult.item.location.lat);
        $("input[name='longitude']").val(poiResult.item.location.lng);
       $("input[name='m_point']").val(poiResult.item.location.lng + ',' + poiResult.item.location.lat);
   });
   });
</script>