vue引入原生高德地图

由于工作上的需要，今天捣鼓了半天高德地图。

如果定制化开发需求不太高的话，可以用vue-amap，这个我就不多说了，详细就看官网 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

然而我们公司需要英文版的高德，我看vue-amap中好像没有这方面的配置，而且还有一些其他的定制化开发需求，然后就只用原生的高德。

其实原生的引入也不复杂，但是有几个坑要填一下。

1. index.html

注意，引入的高德js一定要放在头部而不是尾部，否则就会报 “AMap is not defined”。这个坑我踩了好久！网上找了其他文章也都都没有提到这一点。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>demo</title><script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=YOURKEY"></script></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

2. webpack.base.conf.js

在module.exports = {}里加入 externals对象

module.exports{externals: {'AMap': 'AMap'}
}

3. 引用高德的那个页面

<template><div class="hello"><div style="height:500px" id="container" tabindex="0"></div></div>
</template><script>
import AMap from 'AMap'
export default {name: 'HelloWorld',data () {return {msg: 'hello'}},mounted () {this.init()},methods: {init: function () {let map = new AMap.Map('container', {center: [116.397428, 39.90923],resizeEnable: true,zoom: 10,lang: 'en'})AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {map.addControl(new AMap.ToolBar())map.addControl(new AMap.Scale())})}}
}
</script>

vue引入原生高德地图相关推荐

Vue引用原生高德地图标注
Vue引用原生高德地图标注一.引用高德? 首先在vue项目中的pubic下的index.html的head中引用. 二.在你的模板中设置一个div你的地图容器 <template>< ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...
vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...

vue引入原生高德地图

1. index.html

2. webpack.base.conf.js

3. 引用高德的那个页面

vue引入原生高德地图相关推荐

最新文章

热门文章