vue调用高德地图实例代码


Posted in Javascript onApril 28, 2017

一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/

这个就不细说了,按照其文档,就能够安装下来。

二. 按照官方提供的方法引入

1.修改webpac.base.conf.js文件

externals: {
  'AMap': 'AMap'
 }

2.引入sdk

引入有两种方式,一种是页面直接引入

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

还有一种是异步加载

<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&callback=init"></script>
<script>
  function init(){
    var map = new AMap.Map('container', {
      center: [117.000923, 36.675807],
      zoom: 6
    });
    map.plugin(["AMap.ToolBar"], function() {
      map.addControl(new AMap.ToolBar());
    });
  }
</script>

需要注意的是:

你也可以去动态去创造,例如这样 

var script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'https://webapi.amap.com/maps?v=1.3&key=yourKey'  // 高德地图
document.body.appendChild(script)

不管是采用哪种方式,都要保证你想要加载地图的js文件,在引入的sdk之后

vue调用高德地图实例代码

这样,在第三步的时候,才不会报错

 三. 在当前需要加载vue页面引入

import AMap from 'AMap'

四. 页面实例

这是初始化地图,并且调用插件的代码(map.vue)如:

<template>
 <div>
  <div id="container" style="width:500px; height:300px"></div>
 </div>
</template>
<script>
 import AMap from 'AMap'
 var map
 export default {
  mounted: function () {
   this.init()
  },
  methods: {
   init: function () {
    map = new AMap.Map('container', {
     center: [116.397428, 39.90923],
     resizeEnable: true,
     zoom: 10
    })
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
     map.addControl(new AMap.ToolBar())
     map.addControl(new AMap.Scale())
    })
   }
  }
 }
</script>
<style>
</style>

效果如图:

vue调用高德地图实例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript插入样式实现代码
Feb 22 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
canvas实现图像放大镜
Feb 06 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
vue省市区三联动下拉选择组件的实现
Apr 28 #Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 #Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 #Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 #Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 #Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
Three.js的使用及绘制基础3D图形详解
Apr 27 #Javascript
You might like
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
vue中activated的用法
2021/01/03 Vue.js
python分割文件的常用方法
2014/11/01 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
趣味活动策划方案
2014/02/08 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
个人工作表现评价材料
2014/09/21 职场文书
优秀团员个人总结
2015/02/26 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
给学校的建议书400字
2015/09/14 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
python异步的ASGI与Fast Api实现
2021/07/16 Python