一.通过百度地图api

1.html中引入script

 <!-- 获取经纬度 -->
    <!-- <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script> -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

2.webpack中加入配置

  //地图
  externals:{
    'BMap':'BMap',
    'IMAP':'IMAP',
  },

3.页面js

function getLocation()
{
  // if(navigator.geolocation)
  // {
  //   //浏览器支持,用浏览器获取    
  //   let options = {
  //     enableHighAccuracy:true,
  //     maximumAge:1000,
  //   };
  //   navigator.geolocation.getCurrentPosition(success,error,options);
  // }
  // else
  // {
    //浏览器不支持，用百度的api获取
  let myCity = new BMap.LocalCity();
  myCity.get(getCity);
  // }
}
function getCity(rs)
{
  console.log(rs);
}
// function success(position)
// {
//   console.log(position);

// }
// function error(position)
// {
//   console.log(position);
//   alert('sorry');
// }

参考链接

二.通过我要地图api

    <script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script>  
    <script type="text/javascript" src="http://api.51ditu.com/js/ipposition.js"></script>

    //经纬度
    let ip=new LTIpPosition(run);  
    ip.getIpPosition();   
    function run(obj)   
    {  
      console.log('经纬度:'+obj.lo+','+obj.la+' 城市名称:'+obj.name);  
    } 

参考链接