高德地图使用——定位城市

前言：在使用Chrome进行开发时，发现该功能无法实现，即使高德地图官网也无法实现打开网页时定位当前城市，而是定位至北京。因为，高德实现定位城市是通过浏览器本身发起定位，但是Chrome在中国无法使用，最终导致定位失败（其他浏览器可以正常使用）。下文方法一在此结果上对开发过程进行总结。方法二，为实现功能需求，在页面添加 Input 手动搜索，根据结果进行定位。

方法一：自动定位城市

H5部分：

      <el-dialog width="50%" :visible.sync="isShowMap" append-to-body class="mapDialog" @close="closeMap">
        <div class="mapwarp">
          <div id="map" class="map"></div>
        </div>
      </el-dialog>

JS部分：使用高德 Geolocation 组件

<script>

  import AMapLoader from "@amap/amap-jsapi-loader";

  export default {
    name: "",
    data(){
      return{
       long: '',
       lat: ''
    },
    methods:{
      //地图
      showMap() {
        this.initMap();
      },
      // // 获取用户经纬度信息
       getUserPosition(){
         return new Promise(resolve => {
           let position = []
           AMap.plugin('AMap.Geolocation', function() {
             var geolocation = new AMap.Geolocation({
               enableHighAccuracy: true, // 是否使用高精度定位，默认：true
               // timeout: 10000, // 设置定位超时时间，默认：无穷大
             })
             geolocation.getCurrentPosition(function(status,result){
               if(status === 'complete'){
                 onComplete(result)
               }else{
                 console.log(result)
                 onError(result)
               }
             });
             function onComplete (data) { // 定位成功 data是具体的定位信息
               position = [data.position.KL, data.position.kT]
               resolve(position)
             }
             function onError (data) { // 定位出错
             }
           })
            // return position;
         });
       },

      //初始化地图
       initMap() {
         let that = this
         AMapLoader.load({
           key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
           version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
           plugins: ["Geolocation"], // 需要使用的的插件列表
         }).then( async (AMap) => {
           let arr = await that.getUserPosition()
           var map = new AMap.Map("map", {
             //设置地图容器id
             viewMode: "3D", //是否为3D地图模式
             zoom: 10, //初始化地图级别
             center: arr, //初始化地图中心点位置
             dragEnable: true, // 是否允许鼠标拖拽
             scrollWheel: true, // 鼠标滚轮放大缩小
             doubleClickZoom: true, // 双击放大缩小
             keyboardEnable: false, // 键盘控制发达缩小移动旋转
             touchZoom: false, // 手势控制
           });
           //设置点标记
           var marker = new AMap.Marker({
             icon:"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
             position: arr,
             offset: new AMap.Pixel(-13, -30),
           });
           marker.setMap(map);
           //鼠标点击地图获得最新的点标记及经纬度坐标
           map.on("click", function (e) {
             marker._position[0] = e.lnglat.getLng();
             marker._position[1] = e.lnglat.getLat();
             marker.setMap(map);
             that.long = e.lnglat.getLng()
             that.lat = e.lnglat.getLat()
           });
           //修改经纬度坐标更新地图点标记
         }).catch((e) => {
               console.log(e);
             });
       },
    }
  }
</script>

报错总结：

 1、定位请求被拒绝：定位请求无法通过浏览器安全校验，本地请求时使用 http://localhost 访问，使用ip访问不行；上线时，需要将HTTP访问换成HTTPS访问。

  可能二：开放网页访问权限。

 选择 “ 网站设置 ”

 “位置信息” 设置 “允许”

2、访问失败：谷歌浏览器 中国区服务已停止（本身高德定位就有5%几率会失败）。访问成功，但是 geoocation.getCurrentPosition方法返回结果为空值。目前（本人），无解决方法。

方法二：添加对话框，手动搜索位置

H5部分：在原有基础上再添加一个输入框，用于输入目标城市。

 <div class="mapwarp">
    <el-input id="input_id" v-model="mapInputValue" class="mapInput"></el-input>
    <div id="map" class="map"></div>
 </div>

JS部分：加载地图

               利用 PlaceSearch/AutoComplete 组件获取输入项定位城市

               Marker组件将定位城市标记

      initMap(){
        //地图加载
        var that = this
        AMapLoader.load({
          key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ["AMap.Geolocation", "AMap.AutoComplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then( (AMap) => {
          var map = new AMap.Map("map", {
            resizeEnable: true,
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: that.position, //初始化地图中心点位置
            dragEnable: true, // 是否允许鼠标拖拽
            scrollWheel: true, // 鼠标滚轮放大缩小
            doubleClickZoom: true, // 双击放大缩小
            keyboardEnable: false, // 键盘控制发达缩小移动旋转
            touchZoom: false, // 手势控制
          });
          //输入提示
          var autoOptions = {
            input: "input_id",// 输入框id
          };
          AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
            var auto = new AMap.AutoComplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
              map: map,
              city: 'beijing', // 兴趣点城市
              citylimit: true,  //是否强制限制在设置的城市内搜索
              pageSize: 10, // 单页显示结果条数
              children: 0, //不展示子节点数据
              pageIndex: 1, //页码
              extensions: 'base' //返回基本地址信息
            });  //构造地点查询类
            auto.on("select", select);//注册监听，当选中某条记录时会触发
            function select(e) {  //关键字查询查询
              placeSearch.setCity(e.poi.adcode);
              placeSearch.search(e.poi.name,function (status,result) {
                console.log(result)
                // 获取中心点
                if (result.poiList.pois.length !== 0){
                  var position = [result.poiList.pois[0].location.KL,result.poiList.pois[0].location.kT]
                  that.position = position
                }
              });
            }
          });
          //设置点标记
          var marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: that.position,
            offset: new AMap.Pixel(-13, -30), // 偏移量
          });
          marker.setMap(map);
          //鼠标点击地图获得最新的经纬度坐标
          map.on("click", function (e) {
            marker._position[0] = e.lnglat.getLng();
            marker._position[1] = e.lnglat.getLat();
            marker.setMap(map);
            that.addDeviceNodeForm.longitude = e.lnglat.getLng();
            that.addDeviceNodeForm.latitude = e.lnglat.getLat();
            // var arr = [that.addDeviceNodeForm.longitude,that.addDeviceNodeForm.latitude]
            // console.log(arr)
          });
        })
      },