前端调用高德地图 百度地图

这边是vue得
先在public下得index.html加上请求得js

根据搜索模糊查询，然后自己点击获取精确经纬度。

高德
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=95ed02329c3cf68ae02a62f71a00f899&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
百度
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=CGL14hd5gjSHKurPltP5kQQI7hqskiWK"></script>
    
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uvN6vatvU44OQ0a9yuXdQZxTXODHGuLI"></script>
百度1.3得版本不需要密钥
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    

<el-form-item label="地图" prop="property" required>
          <div class="form-group">
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">地址:</label>
                        <div class="col-sm-8">
                            <input class="form-control"  type="text" v-model="form.locationName" name="meetingPlace" @keyup.enter="onSubmit"  id="deptTxdz" required :disabled="disabled2">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">请在下面地图上点击详细地址 获取经度纬度</div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">地址的经度:</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="text"  v-model="form.info1" name="Longitude"  id="deptLongitude" readonly="true" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">地址的纬度:</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="text"  v-model="form.info2" name="Latitude"  id="deptLatitude"  readonly="true" required :disabled="disabled2">
                        </div>
                    </div>
                </div>
            </div>
            </div>

          <h4 class="form-header h4">地图定位:</h4>
                <div id="container" class="map" style="height:500px"></div>
                <div class="input-card" style="visibility:hidden" >
                    <h4>左击获取经纬度：</h4>
                    <div class="input-item">
                        <input type="text" readonly="true" id="lnglat" :disabled="disabled2">
                    </div>
                </div>
        </el-form-item>

前端页面是一样的

//高德得调用：
//地图加载
       let that =this;
         that.map = new AMap.Map("container", {
             resizeEnable: true
         });
         AMap.plugin('AMap.ToolBar', () => {
           let toolbar = new AMap.ToolBar()
           that.map.addControl(toolbar)
         })
         if(location.href.indexOf('&guide=1')!==-1){
           that.map.setStatus({scrollWheel:false})
         }
         AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
            输入提示
           var autoOptions = {
               input: "deptTxdz"
           };
           var auto = new AMap.Autocomplete(autoOptions);
           var placeSearch = new AMap.PlaceSearch({
               map: that.map
           });  构造地点查询类
           AMap.event.addListener(auto, 'select', function(e) {
               debugger
               placeSearch.setCity(e.poi.adcode);
               placeSearch.search(e.poi.name);  关键字查询查询
           })
         })
         为地图注册click事件获取鼠标点击出的经纬度坐标
         that.map.on('click', function(e) {
             debugger
             document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
             document.getElementById("deptLongitude").value = e.lnglat.getLng()
             document.getElementById("deptLatitude").value = e.lnglat.getLat()
         });

// 百度地图API功能
    var map = new BMap.Map("container");
    var point = new BMap.Point(this.long,this.lats);
    map.centerAndZoom(point,12);
    map.enableScrollWheelZoom();
    this.local = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});
    
    //单击获取点击的经纬度
    map.addEventListener("click",function(e){
         document.getElementById("deptLongitude").value = e.point.lng
         document.getElementById("deptLatitude").value = e.point.lat
        var marker = new BMap.Marker(e.point);
        map.addOverlay(marker);
    });

    //定位当前位置
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            this.long = r.point.lng
            this.lats = r.point.lat
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true})
    },