记录vue3.0引入高德地图

最新推荐文章于 2024-06-19 10:17:07 发布

小白是个狗

最新推荐文章于 2024-06-19 10:17:07 发布

阅读量590

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_45958726/article/details/125390371

版权

首先在public的index.html中引入高德地图在这里插入图片描述

`<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你自己的key&plugin=AMap.Geocoder,AMap.Walking,AMap.Driving,AMap.MouseTool,AMap.Heatmap,AMap.DistrictSearch,AMap.Autocomplete,AMap.PlaceSearch,AMap.Object3DLayer"></script>
  
  </body>
  
</html>

在vue.config.js中配置一下

module.exports = {
  configureWebpack: {
   externals: {
    'AMap': 'AMap' // 高德地图配置
   }
  }

页面代码

<template>
<div id="hhh"> </div>
 </template>
 <script>
    export default {
       data(){
       return{
       map:null
       }
    },
    mounted(){
       this.map = new AMap.Map("hhh", {
                zoom: 13,
                zooms: [3, 20],
                center: [116.397428, 39.90923],
                mapStyle: "amap://styles/darkblue",
            })
    },
    }
</script>