Vue引入高德地图，实现根据坐标标点，点击显示详情本文已参与「新人创作礼」活动，一起开启掘金创作之路。方法一、直接引入

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

方法一、直接引入法

1.第一步. script引入的方式,引入到index.html中

高德地图AMap,一般只需引入这个即可
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"> </script>
高德地图Loca，用于数据3D可视化作品绘制
<script src="https://webapi.amap.com/loca?key=您申请的Key(必填)&v=例如1.2.0(必填，请选择最新版本号)">
AMapUI，用于轨迹巡航，行政区聚合
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

2.第二步. vue项目中build文件夹下的webpack.base.config.js中需要配置,写在最下面’‘node{}’'中就可以

externals: {
　　'AMap': 'AMap',
　　'Loca': 'Loca',    //如果引入了Loca，再注册全局
　　'AMapUI': 'AMapUI'   //如果引入了AMapUI，再注册全局
}

12345

3.第三步. 然后在项目中可以直接用 import AMap from AMap

  　<template>
　　　　<div id='container'></div>
　　</template>
　　<script>
　　import AMap from AMap
　　export default {
　　　　data () {
　　　　　　return {
　　　　　　　　map: null
　　　　　　}
　　　　},
　　　　mounted () {　　
　　　　　　this.map = new AMap.map('container(地图容器,id选择器)', {
　　　　　　　　content: [] 
　　　　　　　　zooms: [5-11] 
　　　　　　})
　　　　}
　　}

　　</script>

首先先引入高德API。

注册高德开放平台
控制台点击应用管理
创建新应用，填写应用名称应用类型
点击添加
选择web端，填写key名称，同意，然后提交。就能获取到key了。
好了准备工作搞定，准备code

先去Vue项目中的index.html中，引入高德地图在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" type="image/x-icon" href="./static/images/favicon.ico">
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <script src="./static/config/index.js"></script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=刚才的key"> </script>
</head>
<body>
  <div id="app"></div>
  <!-- <script src="./src/utils/jquery.js"></script>
  <script type="text/javascript" src="./src/utils/FileSaver.js"></script>
  <script type="text/javascript" src="./src/utils/jquery.wordexport.js"></script> -->
</body>
</html>