vue使用原生高德地图

最新推荐文章于 2022-12-06 12:09:00 发布

bsefef

最新推荐文章于 2022-12-06 12:09:00 发布

阅读量591

点赞数

分类专栏：前端 html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/bsefef/article/details/123371968

版权

1、先在vue项目根目录下新建vue.config.js，这个文件是没有的，vue不提供module.exports = { configureWebpack: { externals: { 'AMap': 'AMap', // 高德地图配置 'AMapUI': 'AMapUI' } },}2、在vue文件index.html中引入高德地图js文件<!DOCTYPE html><html lang="en"> <head>

摘要由CSDN通过智能技术生成

1、先在vue项目根目录下新建vue.config.js，这个文件是没有的，vue不提供

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

2、在vue文件index.html中引入高德地图js文件

<!DOCTYPE html>
<html lang="en">
  <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>default</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but default 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="http://webapi.amap.com/maps?v=1.4.3&key=你的高德地图key&plugin=AMap.ControlBar"></script>
  </body>
</html>

3、在vue文件中使用

<template>
  <div class="box">
    <div id=

最低0.47元/天解锁文章

bsefef

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue使用原生高德地图

1、先在vue项目根目录下新建vue.config.js，这个文件是没有的，vue不提供module.exports = { configureWebpack: { externals: { 'AMap': 'AMap', // 高德地图配置 'AMapUI': 'AMapUI' } },}2、在vue文件index.html中引入高德地图js文件<!DOCTYPE html><html lang="en"> <head>
复制链接

扫一扫

专栏目录