前言：在使用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)
});
})
},本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
