vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情

PC端高德地图使用步骤：

1、注册并登录高德开放平台获取
2、安装高德依赖（amap-jsapi-loader）
3、初始化地图
4、首次打开地图获取当前定位并标记
5、根据已有地址自动定位到指定地址并标记
6、新增、清除标记及自定义信息窗体
7、鼠标点击地图并选点标记
8、根据关键字搜索并自动定位
9、效果图
10、完整代码

高德官方api：高德官方开放平台

一、注册并登录高德开放平台获取（key和秘钥）

引用：

<script>
  import AMapLoader from '@amap/amap-jsapi-loader';
  window._AMapSecurityConfig = {
    securityJsCode: '**************************',//你的秘钥
  }
 </script>

二、安装高德依赖

npm i @amap/amap-jsapi-loader --save

三、初始化地图
封装公共的地图组件：

 <map-container :positionInfo ='positionInfo' @select ='getLocationInfo'></map-container>


 mounted() {
      this.initMap()
 },
 methods:{
    initMap(){
      AMapLoader.load({
        key:"**********************", // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [          //需要使用的插件
          'AMap.ToolBar',
          'AMap.Scale',
          'AMap.Geolocation',
          'AMap.PlaceSearch',
          'AMap.AutoComplete',
          'AMap.Geocoder',
          'AMap.CitySearch'
        ],
        resizeEnable: true,
      }).then((AMap)=>{
        const that = this;
        that.map = new AMap.Map("container",{  //设置地图容器id
          viewMode:"3D",    //是否为3D地图模式
          zoom:12,          //初始化地图级别
        });
     }).catch(e=>{
      console.log(e);
     })
 },

四、首次打开地图获取当前定位并标记

initMap(){
   AMapLoader.load({
      key:"*******************", // 申请好的Web端开发者Key，首次调用 load 时必填
      version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.Geolocation',
        'AMap.PlaceSearch',
        'AMap.AutoComplete',
        'AMap.Geocoder',
        'AMap.CitySearch'
      ],
      resizeEnable: true,
    }).then((AMap)=>{
      const th