vue调用高德地图实例代码

一. 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页面引入

 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>

效果如图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 利用java、js或mysql计算高德地图中两坐标之间的距离

    利用java、js或mysql计算高德地图中两坐标之间的距离

    前言 因为工作的原因,最近在做与地图相关的应用,使用了高德地图,研究了下高德地图计算两坐标距离的方法,官网上提供的开发包中有相关的方法,但是我的产品中比较特殊,无法直接使用提供的方法,所以就自己封装了相关计算方法,供大家参考,下面话不多说了,来一起看看详细的介绍吧. Java实现 首先定义一个用于存储经纬度的类,这里起个名字叫:LngLat package amap; import java.text.DecimalFormat; import java.text.DecimalFormatSy

  • Android开发之高德地图实现定位

    Android开发之高德地图实现定位

    在应用开发中,地图开发是经常需要使用的"组件",Google Map虽然有官方教程,无奈用不起来,原因你懂的~~那么国内比较出名的是就是百度地图和高德地图,由于个人喜好,所以选择了高德地图LBS,废话不说,上干货. 1.注册开发者,创建应用 这个几乎是所有开放平台都通用的做法,无外乎注册帐号,成为开发者,然后创建一个Android应用,会为你分配一个key绑定你的服务. 注册key.PNG 2.下载SDK,导入jar包,add to library jar包.PNG 第一个是2D地图的

  • Android中GPS坐标转换为高德地图坐标详解

    一.坐标分类 地图坐标大致分为几种: 1.GPS.WGS84,也就是原始坐标体系,这是国际公认的世界标准坐标体系: 2.GCJ-02,又称为"火星坐标",国家测绘局在02年发布的坐标体系,在国内,至少得使用此坐标体系,比如:google.高德.腾讯地图等: 3.其他特殊坐标体系,一般都是由火星坐标通过偏移算法计算得出的,比如百度使用的是BD-09坐标,搜狗使用的是自己的搜狗坐标. 二.坐标转换 1.使用高德地图sdk转换 public AMapLocation fromGpsToAma

  • 基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标

    前言 近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GPS数据以及地图匹配. 主要问题和解决方法 本地保存文件跨浏览器支持 由于安全的原因,JavaScript本地保存文件的方式通常都只有IE支持的ActiveXObject/Open方法,每次都要提示不安全和允许运行,非常麻烦.好在其他浏览器目前都支持<a>标签实现文件下载的方法.经测试最新的Goog

  • 关于Android高德地图的简单开发实例代码(DEMO)

    废话不多说了,直接给大家上干货了. 以下为初次接触时 ,练手的DEMO import android.app.Activity; import android.app.ProgressDialog; import android.content.ContentValues; import android.database.Cursor; import android.database.SQLException; import android.database.sqlite.SQLiteDatab

  • vue调用高德地图实例代码

    vue调用高德地图实例代码

    一. 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=&q

  • vue.js高德地图实现热点图代码实例

    1.在index.html引入高德地图JSAPI <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script> 2.地图dom <div class="map-container"> <div id="container" style="width:100%;height:500px"></di

  • Vue接入高德地图的完整实例

    Vue接入高德地图的完整实例

    目录 前言 参考资料 Vue接入高德地图 引用 使用 实现点击按钮缩放功能 地图放大 地图缩小 测量距离 测量面积 行政区划查询渲染 关键字搜索 鼠标绘制区域 总结 前言 Vue 使用高德地图,实现缩放,鼠标绘制,测距.测面积.行政区域范围绘制.关键词查询等操作. 参考资料 高德地图API官网:https://lbs.amap.com/ 高德地图2.0参考手册:https://lbs.amap.com/api/jsapi-v2/documentation#pixel 高德地图2.0示例代码:ht

  • vue使用高德地图根据坐标定位点的实现代码

    前言 项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码 正文 <script> var map,marker; export default { data(){ return{ arriveCoor:[108.947025,34.2613255],//坐标点 arrive:"",//位置信息 } }, mounted() { mapDraw(this.arriveCoor), mapCoor(this.arriveCoor) }, methods:{ ma

  • VUE项目调用高德地图的详细步骤

    目录 前言 申请高德key 技术选型 准备工作 项目中应用 刷新页面,地图加载偶尔失败 在绑定插件的时候,控制台报错 a[d].split is not a function 原生调用高德API 混合使用(vue-amap与原生API混合使用) 总结 参考链接 前言 相信大家或多或少都接触过在大屏的项目,在大屏项目中除了用到了echarts中的行政地图,街道地图也是很常见的,今天主要来说一下在vue中调用高德地图遇到的一些问题

  • VUE项目中调用高德地图的全流程讲解

    目录 前言 申请高德key 技术选型 刷新页面,地图加载偶尔失败 在绑定插件的时候,控制台报错 a[d].split is not a function 原生调用高德API 总结 前言 相信大家或多或少都接触过在大屏的项目,在大屏项目中除了用到了echarts中的行政地图,街道地图也是很常见的,今天主要来说一下在vue中调用高德地图遇到的一些问题. 申请高德key 无论我们使用任何方式调用高德地图都需要在高德地图开放平台中申请key 注册帐号 访问高德地图开发平台根据实际情况填写就可以(实名认证

  • vue使用高德地图实现实时定位天气预报功能

    vue使用高德地图实现实时定位天气预报功能

    目录 JSAPI 的加载 使用 JSAPI Loader (推荐) JSAPI key和安全密钥的使用 项目代码步骤: 1.在index.html页面body中添加密钥 2.安装@amap/amap-jsapi-loader 使用 3.实现代码: 实现效果: 需求:根据定位功能,使用高德地图实现定位当前城市的天气预报功能. JSAPI 的加载 JS API 2.0 版本提供了两种方案引入地图 JSAPI: 1. 使用官网提供的 JSAPI Loader 进行加载: 2. 以常规 JavaScri

  • vue使用高德地图点击下钻上浮效果的实现思路

    这里给使用高德地图下钻提供一个思路 先讲下我的思路,高德地图api有一个地图绘制区域,你只要提供区码,就可以绘制该区域.以浙江省为例,我一开给浙江省的区码就可以绘制出浙江省的区域,接下来我要进入杭州市,当我点击杭州市的时候我先清空地图上的覆盖层并且能获取到'杭州市'这个字符串,通过对比这个字符串我就可以给出杭州市的区码,最后绘制出杭州市的覆盖层. 接下来看代码: 第一步 绘制地图: //创建地图 this.map = new AMap.Map("container", { cursor

  • Vue使用高德地图实现城市定位

    本文实例为大家分享了Vue使用高德地图实现城市定位的具体代码,供大家参考,具体内容如下 一 前端选择框点击跳转至地图选址页面 <van-row class="address_item"> <van-col span="6" class="item-title">收货地址</van-col> <van-col span="18"> <p class="item&qu

  • Vue引入高德地图实现流程分步讲解

    目录 一.功能需求 二.准备 三.在webstorm中安装 四.防止在使用中AMap无法识别问 五.正式开发 六.步骤总结 七.效果 一.功能需求 1.根据输入内容进行模糊查询,选择地址后在地图上插上标记,并更新经纬度坐标显示 2.在地图点击后,根据回传的左边更新地址信息和坐标显示 二.准备 1.申请高德地图账号,创建应用 2.在应用管理中 获得key 和安全密钥 三.在webstorm中安装 npm i @amap/amap-jsapi-loader -S 四.防止在使用中AMap无法识别问

随机推荐