|
|
@@ -0,0 +1,189 @@
|
|
|
+<template>
|
|
|
+ <div class="home-container">
|
|
|
+ <div class="flex-center">
|
|
|
+ <div
|
|
|
+ id="mymap"
|
|
|
+ style="height:620px;width:100%"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
+import AMap from "AMap";
|
|
|
+export default {
|
|
|
+ name: "Home",
|
|
|
+ components: {},
|
|
|
+ data () {
|
|
|
+ // debugger
|
|
|
+ return {
|
|
|
+ longitude: 114.036693,
|
|
|
+ latitude: 22.606955,
|
|
|
+ locationData: {
|
|
|
+ // 用于定位相关信息提交
|
|
|
+ lat: "", // 纬度
|
|
|
+ lon: "", // 经度
|
|
|
+ province: "", // 省
|
|
|
+ city: "", // 市
|
|
|
+ district: "", // 区 县
|
|
|
+ nowPlace: "", // 省-市-区
|
|
|
+ Address: "" // 详细地址
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // getLocation () {
|
|
|
+ // const self = this;
|
|
|
+ // AMap.plugin("AMap.Geolocation", function () {
|
|
|
+ // var geolocation = new AMap.Geolocation({
|
|
|
+ // enableHighAccuracy: true, // 是否使用高精度定位，默认:true
|
|
|
+ // timeout: 0, // 超过10秒后停止定位，默认：无穷大
|
|
|
+ // maximumAge: 0, // 定位结果缓存0毫秒，默认：0
|
|
|
+ // convert: true // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
|
|
|
+ // });
|
|
|
+
|
|
|
+ // geolocation.getCurrentPosition();
|
|
|
+ // AMap.event.addListener(geolocation, "complete", onComplete);
|
|
|
+ // AMap.event.addListener(geolocation, "error", onError);
|
|
|
+
|
|
|
+ // function onComplete (data) {
|
|
|
+ // // data是具体的定位信息
|
|
|
+ // // debugger
|
|
|
+ // console.log("定位成功信息：", data);
|
|
|
+ // self.newGetAddress(data.position.lat, data.position.lng);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // function onError (data) {
|
|
|
+ // // debugger
|
|
|
+ // // 定位出错
|
|
|
+ // console.log("定位失败错误：", data);
|
|
|
+ // // self.getLngLatLocation();
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // getLngLatLocation () {
|
|
|
+ // const self = this;
|
|
|
+ // AMap.plugin("AMap.CitySearch", function () {
|
|
|
+ // var citySearch = new AMap.CitySearch();
|
|
|
+ // citySearch.getLocalCity(function (status, result) {
|
|
|
+ // if (status === "complete" && result.info === "OK") {
|
|
|
+ // // 查询成功，result即为当前所在城市信息
|
|
|
+ // console.log("通过ip获取当前城市：", result);
|
|
|
+ // //逆向地理编码
|
|
|
+ // AMap.plugin("AMap.Geocoder", function () {
|
|
|
+ // var geocoder = new AMap.Geocoder({
|
|
|
+ // // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
+ // city: result.adcode
|
|
|
+ // });
|
|
|
+
|
|
|
+ // var lnglat = result.rectangle.split(";")[0].split(",");
|
|
|
+
|
|
|
+ // geocoder.getAddress(lnglat, function (status, data) {
|
|
|
+ // if (status === "complete" && data.info === "OK") {
|
|
|
+ // // result为对应的地理位置详细信息
|
|
|
+ // console.log('data', data);
|
|
|
+ // console.log(self.userInfo)
|
|
|
+ // // self.userInfo.ProvinceName = data.regeocode.addressComponent.province.toString();
|
|
|
+ // // self.userInfo.CCityName =
|
|
|
+ // // data.regeocode.addressComponent.city;
|
|
|
+ // // self.userInfo.RegionName =
|
|
|
+ // // data.regeocode.addressComponent.district;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // newGetAddress: function (latitude, longitude) {
|
|
|
+ // console.log(latitude, longitude)
|
|
|
+ // const _thisSelf = this;
|
|
|
+ // _thisSelf.locationData.lat = latitude;
|
|
|
+ // _thisSelf.locationData.lon = longitude;
|
|
|
+ // const mapObj = new AMap.Map("mapAmap1");
|
|
|
+ // mapObj.plugin("AMap.Geocoder", function () {
|
|
|
+ // const geocoder = new AMap.Geocoder({
|
|
|
+ // city: "全国", // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
+ // radius: 100 // 以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
|
|
|
+ // });
|
|
|
+ // const lnglat = [longitude, latitude]; // 倒序反写经纬度
|
|
|
+ // // 天津120 北京110 上海310 重庆500 ,
|
|
|
+ // const reg1 = /^[1][1][0][0-9][0-9][0-9]/;
|
|
|
+ // const reg2 = /^[1][2][0][0-9][0-9][0-9]/;
|
|
|
+ // const reg3 = /^[5][0][0][0-9][0-9][0-9]/;
|
|
|
+ // const reg4 = /^[3][1][0][0-9][0-9][0-9]/;
|
|
|
+ // geocoder.getAddress(lnglat, function (status, result) {
|
|
|
+ // console.log("getAddress", result);
|
|
|
+ // if (status === "complete" && result.info === "OK") {
|
|
|
+ // // result为对应的地理位置详细信息
|
|
|
+ // const adcode = result.regeocode.addressComponent.adcode; // 省市编码
|
|
|
+ // if (
|
|
|
+ // reg1.test(adcode) ||
|
|
|
+ // reg2.test(adcode) ||
|
|
|
+ // reg3.test(adcode) ||
|
|
|
+ // reg4.test(adcode)
|
|
|
+ // ) {
|
|
|
+ // _thisSelf.locationData.city =
|
|
|
+ // result.regeocode.addressComponent.province;
|
|
|
+ // } else {
|
|
|
+ // _thisSelf.locationData.city =
|
|
|
+ // result.regeocode.addressComponent.city;
|
|
|
+ // }
|
|
|
+ // // 提取 省 市 区 详细地址信息 重拼装省-市-区信息
|
|
|
+ // _thisSelf.locationData.province =
|
|
|
+ // result.regeocode.addressComponent.province;
|
|
|
+ // _thisSelf.locationData.district =
|
|
|
+ // result.regeocode.addressComponent.district;
|
|
|
+ // _thisSelf.locationData.Address = result.regeocode.formattedAddress;
|
|
|
+ // _thisSelf.locationData.nowPlace =
|
|
|
+ // result.regeocode.addressComponent.province +
|
|
|
+ // result.regeocode.addressComponent.city +
|
|
|
+ // result.regeocode.addressComponent.district;
|
|
|
+ // _thisSelf.userInfo.ProvinceName = _thisSelf.locationData.province;
|
|
|
+ // _thisSelf.userInfo.CCityName = _thisSelf.locationData.city;
|
|
|
+ // _thisSelf.userInfo.RegionName = _thisSelf.locationData.district;
|
|
|
+ // } else {
|
|
|
+ // console.log(_thisSelf.locationData); // 回调函数
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ initMap () {
|
|
|
+ AMapLoader.load({
|
|
|
+ key: "1a32b8f45773a7f1d06842249b1b11c1", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
+ version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
|
|
|
+ // center: [113.753602, 34.765515],
|
|
|
+ })
|
|
|
+ .then(AMap => {
|
|
|
+ // this.map = new AMap.Map("mymap");
|
|
|
+ let amap = new AMap.Map('mymap', {
|
|
|
+ zoom: 15,
|
|
|
+ // 经纬度
|
|
|
+ center: [this.longitude, this.latitude],
|
|
|
+ enableHighAccuracy: true,//是否使用高精度定位，默认:true
|
|
|
+ timeout: 10000, //超过10秒后停止定位，默认：无穷大
|
|
|
+ maximumAge: 0, //定位结果缓存0毫秒，默认：0
|
|
|
+ convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
|
|
|
+ showButton: true, //显示定位按钮，默认：true
|
|
|
+ buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
|
|
|
+ buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
|
|
|
+ showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
|
|
|
+ showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
|
|
|
+ panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
|
|
|
+ zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.initMap();
|
|
|
+ // this.getLocation();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss"></style>
|
D4THYL3\long