組件jsx文件

import React, { useEffect, useRef, useState } from 'react'; import './index.less';import { webMercator2LngLat, getCoordinateCommon } from '@/util/transformUtil';import icon_punch_locate from '@/asset/image/informationization/afterSalesPunch/icon_punch_locate.png';const Map = (props) => {const mapRef = useRef(null);const [position, setPosition] = useState(null);//初始化地圖const initMap = () => {mapRef.current = new window.AMap.Map('map-container', {resizeEnable: true, //是否監控地圖容器尺寸變化zoom: 15 //初始化地圖層級});mapRef.current.on('click', getLnglat);// 在地圖界面添加縮放控件window.AMap.plugin(['AMap.ToolBar'], () => {mapRef.current.addControl(new window.AMap.ToolBar());});getCoordinateCommon((coordinate) => {const [x, y] = coordinate.split(',');const [lng, lat] = webMercator2LngLat(x, y);mapRef.current.clearMap();const marker = new window.AMap.Marker({icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',position: [lng, lat]});marker.setMap(mapRef.current);mapRef.current.setCenter(new window.AMap.LngLat(lng, lat));getAddressByPosition(lng, lat);});};//獲取地圖坐標const getLnglat = (e) => {mapRef.current.clearMap();const x = e.lnglat.getLng();const y = e.lnglat.getLat();const marker = new window.AMap.Marker({icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',position: [x, y]});marker.setMap(mapRef.current);mapRef.current.setCenter(new window.AMap.LngLat(x, y));// getAddressByPosition(x, y);};//根據坐標獲取位置名稱，調用高德APIconst getAddressByPosition = (lng, lat) => {const geocoder = new window.AMap.Geocoder();geocoder.getAddress(new window.AMap.LngLat(lng, lat), (status, result) => {if (String(status) === 'complete') {const address = result.regeocode.formattedAddress;setPosition(address);}});};useEffect(() => {initMap();}, []);return (<div className="map-wrapper"><div id="map-container"></div><div className="map-input"><div><img src={icon_punch_locate} /><span>{position}</span></div><spanclassName="re-locate"onClick={() => {initMap();}}>重新定位</span></div></div>); }; export default Map;

transformUtil文件

const myBrowser= () => {const ua = navigator.userAgent;const android = ua.match(/(Android);?[\s\/]+([\d.]+)?/),iphone = ua.match(/(Android);?[\s\/]+([\d.]+)?/),chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/),safari =webview ||ua.match(/Version\/([\d.]+)([^S](Safari)|[^M]*(Mobile)[^S]*(Safari))/),webview =!chrome && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/),miniprogram = ua.toLowerCase().includes("miniprogram"),weixinpage = ua.toLowerCase().includes("micromessenger"),dingTalk = ua.toLowerCase().includes("dingtalk"),wxWork = ua.toLowerCase().includes("wxwork")if (dingTalk) {return "dingtalk"}if (wxWork) {return 'wxWork'}if (miniprogram && weixinpage) {return "miniprogram";}if (!weixinpage && android) {return "android";}if (!weixinpage && webview) {return "iOS";}if (weixinpage) {return "wxcommon"}return "web"; } /*** 高德定位*/ const positionByGaode = (callback) => {let that=thiswindow.AMap.plugin('AMap.Geolocation', () => {const geolocation = new window.AMap.Geolocation({// 是否使用高精度定位，默認：trueenableHighAccuracy: true,// 設置定位超時時間，默認：無窮大timeout: 10000,// 定位按鈕的停靠位置的偏移量，默認：Pixel(10, 20)buttonOffset: new window.AMap.Pixel(10, 20),// 定位成功后調整地圖視野范圍使定位位置及精度范圍視野內可見，默認：falsezoomToAccuracy: true,// 定位按鈕的排放位置, RB表示右下buttonPosition: 'RB'});if (window.AMap.UA.ios) { //使用遠程定位，見 remogeo.jslet remoGeo = new window.RemoGeoLocation(); //替換方法navigator.geolocation.getCurrentPosition = function () {return remoGeo.getCurrentPosition.apply(remoGeo, arguments); }; //替換方法 navigator.geolocation.watchPosition = function() { return remoGeo.watchPosition.apply(remoGeo, arguments);};}geolocation.getCurrentPosition((status, data) => {if(status == 'complete'){const { position: { lng, lat } } = data;callback&&typeof callback === 'function' && callback(lng, lat);}else{console.log(data)callback&&typeof callback === 'function' && callback('', '');}});}); } // 經緯度轉墨卡托平面坐標 const lngLat2WebMercator = (lng, lat) => {const earthRad = 6378137.0;const x = ((lng * Math.PI) / 180) * earthRad;const a = (lat * Math.PI) / 180;const y =(earthRad / 2) * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));return [x, y]; }; // 平面坐標轉換經緯度const webMercator2LngLat = (x, y) => {let lng = (x / 20037508.34) * 180;let lat = (y / 20037508.34) * 180;lat =(180 / Math.PI) *(2 * Math.atan(Math.exp((lat * Math.PI) / 180)) - Math.PI / 2);return [lng, lat]; //[114.32894001591471, 30.58574800385281]};/*** 通用的獲取位置坐標的方法，返回墨卡托*/ const getCoordinateCommon = (callback) => {const BROWSER_TYPE = myBrowser1();const isPlatformMiniProgram = BROWSER_TYPE === 'miniprogram'const isPlatformDingtalk = BROWSER_TYPE === 'dingtalk'const isPlatformWeb = BROWSER_TYPE === 'web'const isPlatformAndroid = BROWSER_TYPE === 'android'const isPlatformIos = BROWSER_TYPE === 'iOS'const isPlatformWxWork = BROWSER_TYPE === 'wxWork'const isPlatformWxCommon = BROWSER_TYPE === 'wxcommon'if(isPlatformAndroid || isPlatformIos) {window.$bridge.callHandler("GET_COORDINATE", "調用獲取坐標信息", data => {const [lng, lat] = data.split(',');const [x, y] = lngLat2WebMercator(lng, lat);typeof callback === 'function' && callback(`${x},${y}`);});} else if(isPlatformMiniProgram || isPlatformWxWork || isPlatformWxCommon) {window.wx.getLocation({type: 'wgs84',success (res) {const lng = res.longitude;const lat = res.latitude;const [x, y] = lngLat2WebMercator(lng, lat);typeof callback === 'function' && callback(`${x},${y}`);},fail(err) { // 失敗后調用高德positionByGaode((lng, lat) => {const [x, y] = lngLat2WebMercator(lng, lat);typeof callback === 'function' && callback(`${x},${y}`);});}})} else {positionByGaode((lng, lat) => {const [x, y] = lngLat2WebMercator(lng, lat);typeof callback === 'function' && callback(`${x},${y}`);});} }

樣式文件

@import '../../common/common.less'; @img-width: 0.5rem; .map-wrapper {width: 100%;height: 100%;display: flex;flex-direction: column;#map-container {width: 100%;flex: 1;.amap-copyright {display: none !important;}}.map-input {line-height: @line-height;height: @line-height;background-color: #ffffff;display: flex;align-items: center;justify-content: space-between;padding: 0 0.32rem;width: 100%;div {display: flex;align-items: center;width: 80%;img {width: @img-width;height: @img-width;}span {color: #333333;font-weight: bold;margin-left: 0.1rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}.re-locate {font-weight: 500;color: #00a189;white-space: nowrap;}} }

總結

以上是生活随笔為你收集整理的7、高德地图(定位、复位功能)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。