Vue2 + 高德地图API 获取用户当前位置等信息，错误default.CitySearch is not a Constructor的应对

原创

已于 2023-03-05 20:56:57 修改 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-03-05 20:51:57 首次发布

文章详细介绍了如何在Web应用中正确引入和使用高德地图API，包括在CDN中添加Key和必要的插件，Vue项目的配置，以及在组件中调用地图功能。特别指出新申请的Key需配合安全秘钥使用，且必须指定所需插件，否则会导致错误。此外，还提醒开发者在高德开放平台创建应用时选择正确的服务类型。

效果

高德地图API参考手册

在这里插入图片描述
控制台输出信息:

代码

public/index.html：使用CDN引入高德地图API

    <script type="text/javascript">
            window._AMapSecurityConfig = {
     
     
              securityJsCode:'',  //安全秘钥(官网文档强调2021年12月2日起，新申请的Key就必须和安全秘钥一起使用了) 或者服务器地址
                // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
            }
    </script>
    <script type="text/javascript