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

前言：在使用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 = thisAMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["Geolocation"], // 需要使用的的插件列表}).then( async (AMap) => {let arr = await that.getUserPosition()var map = new AMap.Map("map", {//设置地图容器idviewMode: "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 = thisAMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["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)});})},