vue+高德地图api （总结）

引入地图：public 中index.html引入

//&后面为引入的工具
 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key="你的key"&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script> 

新创地图
data中定义map：’’
实列地图：

<div  id="container" style="width: 500px; height: 300px>
       <!-- 搜索框 -->
     <el-input v-model="searchMap" id="tipinput"></el-input>
</div>

 this.map = new AMap.Map("container", {
                resizeEnable: true,
            });

api:

//地图   定位
        autoLocation() {
            var options = {
                showButton: true, //是否显示定位按钮
                buttonPosition: "LB", //定位按钮的位置
                /* LT LB RT RB */
                buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
                showMarker: true, //是否显示定位点
                markerOptions: {
                    //自定义定位点样式，同Marker的Options
                    offset: new AMap.Pixel(-18, -36),
                    content:
                        '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
                },
                showCircle: true, //是否显示定位精度圈
                circleOptions: {
                    //定位精度圈的样式
                    strokeColor: "#0093FF",
                    noSelect: true,
                    strokeOpacity: 0.5,
                    strokeWeight: 1,
                    fillColor: "#02B0FF",
                    fillOpacity: 0.25,
                },
            };
     AMap.plugin(["AMap.Geolocation"], () => {
                var geolocation = new AMap.Geolocation(options);
                this.map.addControl(geolocation);
                geolocation.getCurrentPosition();
            });

地图搜索

 var autoOptions = {
                input: "tipinput", //html中input id
            };
            var auto = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                map: this.map, // 你的地图示例
            });
            AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
            function select(e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name); //关键字查询查询
            }

获取经纬度，经纬度对应地址信息

//经纬度
            let showInfoClick = (e) => {
                  //经纬度
                let lng = e.lnglat.getLng();
                let lat = e.lnglat.getLat();
                console.log(e.lnglat.getLng(), e.lnglat.getLat());

                var lnglatXY = [lng, lat]; // 地图上所标点的坐标
                let _this = this;
                AMap.service("AMap.Geocoder", function () {
                    // 回调函数
                    let geocoder = new AMap.Geocoder({});
                    geocoder.getAddress(lnglatXY, (status, result) =>{
  					//result.regeocode.formattedAddress为地址
                            );
                        }
                       
                    });
                });
            };
            //添加地图点击事件
            this.map.on("click", showInfoClick);

经纬度转换

//高德坐标转百度（传入经度、纬度）
        bd_encrypt() {
            var X_PI = (Math.PI * 3000.0) / 180.0;
            var x = this.storeInfo.lng,
                y = this.storeInfo.lat;
            var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
            var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
            this.storeInfo.lng = z * Math.cos(theta) + 0.0065;
            this.storeInfo.lat = z * Math.sin(theta) + 0.006;
        },
        //百度坐标转高德（传入经度、纬度）
        bd_decrypt() {
            var X_PI = (Math.PI * 3000.0) / 180.0;
            var x = this.storeInfo.lng - 0.0065;
            var y = this.storeInfo.lat - 0.006;
            var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
            var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
            this.storeInfo.lng = z * Math.cos(theta);
            this.storeInfo.lat = z * Math.sin(theta);
        },