前端代码，弹框形式展现：

<el-dialog  :visible.sync="dialogFormVisible">
    <div id="container" style="width: 100%;height: 500px;" tabindex="0" >
    </div>
    <div  id="btns">
        <el-input id="lng" style="width: 20%" placeholder="选中的经度"></el-input>
        <el-input id="lat" style="width: 20%" placeholder="选中的纬度"></el-input>
        <el-button type="primary" @click="lngLat">确定</el-button>
    </div>
</el-dialog>

vue-js代码：

new Vue({
    el: '#app',
    data: function() {
        return {
            ruleForm: {
               
                lng: '',
                lat: ''
            },
            dialogFormVisible: false,
            districtList:[],
            rules: {
               
    },
    methods:{
        init(){
            var map = new AMap.Map('container', {
                resizeEnable: true,
                zoom: 15
            });
            AMap.plugin('AMap.ToolBar', function() {
                var toolbar = new AMap.ToolBar();
                map.addControl(toolbar)
            });
            var marker = new AMap.Marker({
                position: map.getCenter(), //标记的位置坐标
                offset: new AMap.Pixel(-5, -5), //标记相对位置的偏移，对应style的left和top
                icon: ico, //创建好的icon，也可以在后面使用setIcon()方法添加
                zoom: 13
            });
            marker.setLabel({
                offset: new AMap.Pixel(10, 30)
            });
            var ico = new AMap.Icon({
                size: new AMap.Size(20, 30), // 图标尺寸
                image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png', // Icon的图像
                imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: new AMap.Size(20, 30) // 根据所设置的大小拉伸或压缩图片，对应style的width和height
            });
            map.add(marker); //将创建好的marker放到地图上面
            AMap.event.addListener(map, 'click', function (e) {//点击事件
                map.clearMap();
                var x = e.lnglat.getLng();
                var y = e.lnglat.getLat();
                marker = new AMap.Marker({
                    position:[x,y], //标记的位置坐标
                    offset: new AMap.Pixel(-5, -5), //标记相对位置的偏移，对应style的left和top
                    icon: ico, //创建好的icon，也可以在后面使用setIcon()方法添加
                    zoom: 13
                });
                map.add(marker);
                document.getElementById("lng").value = x;
                document.getElementById("lat").value =y;
            });
        },
        diTu(){
            this.dialogFormVisible = true;
            setTimeout(() => {//这里注意需要添加延迟，不然地图不加载，只有一个空白的底色
                this.init()
            },2000);
        },
        lngLat(){
           this.ruleForm.lng = document.getElementById("lng").value;
           this.ruleForm.lat = document.getElementById("lat").value;
           this.dialogFormVisible = false;
        }
    }
})

参考：如何使用Free Map 插件在百度地图 高德地图 获取坐标点 围栏 路线 地理围栏 - 掘金

记录一下使用Free Map 插件获取地图的坐标的使用。

一、下载了安装Free Map 插件。有条件的同学可以直接在谷歌插件商场搜索并安装（https://chrome.google.com/webstore/search/Free Map）；或者使用我已经下载好的插件（百度、高德坐标提取插件-Javascript文档类资源-CSDN下载）

二、在浏览器中打开插件

 三、打开百度地图（这里以百度地图为例，高德地图同理）

·获取某个地点经纬度范围边框

地点：天安门

上方红框中是Free Map 插件的内容，中间红框中是搜索出来的内容；

点击“复制bd”按钮，可将天安门范围坐标复制出来。保存为json格式文件，也可以通过插件导入。

导出效果：

导入效果：

 ·获取A地到B地的路线

关键词：天安门东、天坛东门

 获取bd:

导入bd效果：

 总结：这个插件可以获取到想要的地点经纬度坐标，在实际应用中可以先通过插件来获取自己地区列表的经纬度，在自己项目中将经纬度放进去。进一步可以通过前端脚本利用这个插件开爬取自己想要的地区经纬度。

通过异步网络请求，调用高德API,获取某个地址的经纬度等信息，再转为百度的经纬度。高德地图API,点击这里

package com.alibaba.controller;

import com.alibaba.entity.MyPoint;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ning.http.client.AsyncHttpClient;
import com.ning.http.client.AsyncHttpClientConfig;
import com.ning.http.client.ListenableFuture;
import com.ning.http.client.Response;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import java.math.BigDecimal;
import java.util.concurrent.TimeUnit;

/**
 * Created by lightClouds917
 * Date 2018/1/17
 * Description:异步网络请求
 * 此处以请求高德地图示例
 */
@RestController
@RequestMapping("asynClient")
public class AsynClientController {

    private final org.slf4j.Logger logger = LoggerFactory.getLogger(getClass());
    /** π */
    private static double PI = 3.1415926535897932384626;
    /** 参数 */
    private static double X_PI = 3.14159265358979324 * 3000.0 / 180.0;

    /**
     * 高德地图  获取经纬度
     * @return
     */
    @RequestMapping(value = "test6",method = RequestMethod.GET)
    public String test6() {
        logger.info("==================>查询高德地图");

        String url  = "http://restapi.amap.com/v3/geocode/geo?address=方恒国际中心A座&key=05831d6b4be84db6d042b1d00d65b006";
        String url1 = "http://restapi.amap.com/v3/geocode/geo?address=北京市朝阳区阜通东大街6号&output=XML&key=05831d6b4be84db6d042b1d00d65b006";
        String url2  = "http://restapi.amap.com/v3/geocode/geo?address=杭州市江干区杭海路1099号&key=05831d6b4be84db6d042b1d00d65b006";

        //异步网络请求
        AsyncHttpClientConfig.Builder builder = new AsyncHttpClientConfig.Builder();
        builder.setCompressionEnabled(true).setAllowPoolingConnection(true);
        builder.setRequestTimeoutInMs((int) TimeUnit.MINUTES.toMillis(1));
        builder.setIdleConnectionTimeoutInMs((int) TimeUnit.MINUTES.toMillis(1));

        AsyncHttpClient client = new AsyncHttpClient(builder.build());
        try {
            ListenableFuture<Response> future = client.prepareGet(url2).execute();
            String result = future.get().getResponseBody();
            logger.info("======>result:"+result);
            JsonNode jsonNode = new com.fasterxml.jackson.databind.ObjectMapper().readTree(future.get().getResponseBody());
            if (jsonNode.findValue("status").textValue().equals("1")) {
                JsonNode listSource = jsonNode.findValue("location");
                for (String location : listSource.textValue().split(",")) {
                    //得到这个位置的经纬度
                    logger.info(location);
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (client != null) {
                client.close();
            }
        }
        return null;
    }

    /**
     * 查询高德地图坐标
     * 转为百度地图
     * url中：address为查询地址
     *       key需要去高德地图申请，类似于秘钥一样 ，申请地址：http://lbs.amap.com/api/webservice/summary/
     */
    @RequestMapping(value = "test7",method = RequestMethod.GET)
    public void test7(){
        try {
            logger.info("==================>查询高德地图");
            String url  = "http://restapi.amap.com/v3/geocode/geo?address=方恒国际中心A座&key=05831d6b4be84db6d042b1d00d65b006";
            //异步网络请求   比上面的简化了一下
            AsyncHttpClient client = new AsyncHttpClient();
            AsyncHttpClient.BoundRequestBuilder builder = client.prepareGet(url);
            ListenableFuture<Response> future = builder.execute();

            JsonNode jsonNode = new ObjectMapper().readTree(future.get().getResponseBody());
            if(jsonNode.findValue("status").textValue().equals("1")){
                JsonNode location = jsonNode.findValue("location");;
                logger.info("==========>location:"+location);
                String[] lonAndLat = location.textValue().split(",");
                logger.info("========>经度："+lonAndLat[0]);
                logger.info("========>纬度："+lonAndLat[1]);

                //高德---->百度地图
                MyPoint myPoint = bd_encrypt(new MyPoint(Double.valueOf(lonAndLat[0]), Double.valueOf(lonAndLat[1])));
                logger.info("========>经度："+myPoint.getLon());
                logger.info("========>纬度："+myPoint.getLat());
            }
            String responseBody = future.get().getResponseBody();
            logger.info(responseBody);
        }catch (Exception ex){
            ex.printStackTrace();
            logger.info("=======>查询出错",ex);
        }
    }

    /**
     * 对double类型数据保留小数点后多少位
     * 高德地图转码返回的是 小数点后6位，为了统一封装一下
     * @param digit 位数
     * @param in 输入
     * @return 保留小数位后的数
     */
    public static double dataDigit(int digit,double in){
        return new BigDecimal(in).setScale(6,   BigDecimal.ROUND_HALF_UP).doubleValue();

    }

    /**
     * 将火星坐标转变成百度坐标
     * @param lngLat_gd 火星坐标（高德、腾讯地图坐标等）
     * @return 百度坐标
     */
    public static MyPoint bd_encrypt(MyPoint lngLat_gd) {
        double x = lngLat_gd.getLon(), y = lngLat_gd.getLat();
        double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
        double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x *  X_PI);
        return new MyPoint(dataDigit(6,z * Math.cos(theta) + 0.0065),dataDigit(6,z * Math.sin(theta) + 0.006));
    }
}