vue-cli中使用高德地图的方法示例


Posted in Javascript onMarch 28, 2019

第一步 去高德地图开放平台申请密钥  高德地图开放平台

vue-cli中使用高德地图的方法示例

第二部 在vue-cli项目目录结构 

vue-cli中使用高德地图的方法示例

里面多了config文件夹和 utils文件夹 

config.js里面是这样的  主要是导出密钥 

// 高德地图 key
export const MapKey = '你的密钥key'
// 地图限定城市
export const MapCityName = '武汉'

utils文件夹里面 新建路一个remoteLoad.js

主要是动态创建script标签 封装了一个函数 传入URL地址()

export default function remoteLoad (url, hasCallback) {
 return createScript(url)
 /**
  * 创建script
  * @param url
  * @returns {Promise}
  */
 function createScript (url) {
  var scriptElement = document.createElement('script')
  document.body.appendChild(scriptElement)
  var promise = new Promise((resolve, reject) => {
   scriptElement.addEventListener('load', e => {
    removeScript(scriptElement)
    if (!hasCallback) {
     resolve(e)
    }
   }, false)

   scriptElement.addEventListener('error', e => {
    removeScript(scriptElement)
    reject(e)
   }, false)

   if (hasCallback) {
    window.____callback____ = function () {
     resolve()
     window.____callback____ = null
    }
   }
  })

  if (hasCallback) {
   url += '&callback=____callback____'
  }

  scriptElement.src = url

  return promise
 }

 /**
  * 移除script标签
  * @param scriptElement script dom
  */
 function removeScript (scriptElement) {
  document.body.removeChild(scriptElement)
 }
}

第三步 在Home组件中

<template>
 <div class="m-map">
  <div class="search" v-if="placeSearch">
   <input type="text" placeholder="请输入关键字" v-model="searchKey">
   <button type="button" @click="handleSearch">搜索</button>
   <div id="js-result" v-show="searchKey" class="result"></div>
  </div>
  <div id="js-container" class="map"></div>
 </div>
</template>

<script>
import remoteLoad from '@/utils/remoteLoad.js'
import { MapKey, MapCityName } from '@/config/config'
export default {
 props: ['lat', 'lng'],
 data () {
  return {
   searchKey: '',
   placeSearch: null,
   dragStatus: false,
   AMapUI: null,
   AMap: null
  }
 },
 watch: {
  searchKey () {
   if (this.searchKey === '') {
    this.placeSearch.clear()
   }
  }
 },
 methods: {
  // 搜索
  handleSearch () {
   if (this.searchKey) {
    this.placeSearch.search(this.searchKey)
   }
  },
  // 实例化地图
  initMap () {
   // 加载PositionPicker,loadUI的路径参数为模块名中 'ui/' 之后的部分
   let AMapUI = this.AMapUI = window.AMapUI
   let AMap = this.AMap = window.AMap
   AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
    let mapConfig = {
     zoom: 16,
     cityName: MapCityName
    }
    if (this.lat && this.lng) {
     mapConfig.center = [this.lng, this.lat]
    }
    let map = new AMap.Map('js-container', mapConfig)
    // 加载地图搜索插件
    AMap.service('AMap.PlaceSearch', () => {
     this.placeSearch = new AMap.PlaceSearch({
      pageSize: 5,
      pageIndex: 1,
      citylimit: true,
      city: MapCityName,
      map: map,
      panel: 'js-result'
     })
    })
    // 启用工具条
    AMap.plugin(['AMap.ToolBar'], function () {
     map.addControl(new AMap.ToolBar({
      position: 'RB'
     }))
    })
    // 创建地图拖拽
    let positionPicker = new PositionPicker({
     mode: 'dragMap', // 设定为拖拽地图模式,可选'dragMap'、'dragMarker',默认为'dragMap'
     map: map // 依赖地图对象
    })
    // 拖拽完成发送自定义 drag 事件
    positionPicker.on('success', positionResult => {
     // 过滤掉初始化地图后的第一次默认拖放
     if (!this.dragStatus) {
      this.dragStatus = true
     } else {
      this.$emit('drag', positionResult)
     }
    })
    // 启动拖放
    positionPicker.start()
   })
  }
 },
 async created () {
  // 已载入高德地图API,则直接初始化地图
  if (window.AMap && window.AMapUI) {
   this.initMap()
  // 未载入高德地图API,则先载入API再初始化
  } else {
   await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
   await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
   this.initMap()
  }
 }
}
</script>

<style lang="css">
.m-map{ min-width: 500px; min-height: 300px; position: relative; }
.m-map .map{ width: 100%; height: 100%; }
.m-map .search{ position: absolute; top: 10px; left: 10px; width: 285px; z-index: 1; }
.m-map .search input{ width: 180px; border: 1px solid #ccc; line-height: 20px; padding: 5px; outline: none; }
.m-map .search button{ line-height: 26px; background: #fff; border: 1px solid #ccc; width: 50px; text-align: center; }
.m-map .result{ max-height: 300px; overflow: auto; margin-top: 10px; }
</style>

第四步  在app.vue中 导入组件

<template>
 <div id="app">
  <div class="g-wraper">
   <div class="m-part">
    <mapDrag @drag="dragMap" class="mapbox"></mapDrag>
   </div>
  </div>

 </div>
</template>

<script>
import mapDrag from './components/Home.vue'
export default {
 name: 'app',
 components: {
  mapDrag
 },
 data () {
  return {
   dragData: {
    lng: null,
    lat: null,
    address: null,
    nearestJunction: null,
    nearestRoad: null,
    nearestPOI: null
   }
  }
 },
 methods: {
  dragMap (data) {
   console.log(data)
   this.dragData = {
    lng: data.position.lng,
    lat: data.position.lat,
    address: data.address,
    nearestJunction: data.nearestJunction,
    nearestRoad: data.nearestRoad,
    nearestPOI: data.nearestPOI
   }
  }
 }
}
</script>

<style>
body{ margin: 0; }
.page-header{
 color: #fff; text-align: center; background: #159957;
 background-image: -webkit-linear-gradient(330deg,#155799,#159957);
 background-image: linear-gradient(120deg,#155799,#159957);
 padding: 3rem 4rem; margin-bottom: 30px;
}
.page-header h1{ margin: 0; font-size: 40px; }
.page-header p{ color: #ccc; margin: 0; margin-bottom: 30px; }
.page-header a{ display: inline-block; border: 1px solid #fff; margin-right: 10px; line-height: 40px; padding: 0 20px; border-radius: 4px; color: #fff; text-decoration: none; transition: all .3s; }
.page-header a:hover{ background: #fff; color: #333; }
.g-wraper{ width: 1000px; margin: 0 auto; color: #666; font-size: 16px; line-height: 30px; }
.m-part{ margin-bottom: 30px; }
.m-part::after{ content: ''; display: block; clear: both; }
.m-part .title{ font-size: 30px; line-height: 60px; margin-bottom: 10px; color: #333; }
.m-part .mapbox{ width: 600px; height: 400px; margin-bottom: 20px; float: left; }
.m-part .info{ margin: 0; padding: 0; list-style: none; line-height: 30px; margin-left: 620px; }
.m-part .info span{ display: block; color: #999; }
.m-part ol{ line-height: 40px; margin-left: 0; padding-left: 0; }
.m-part pre{ padding: 10px 20px; line-height: 30px; border-radius: 3px; box-shadow: 0 0 15px rgba(0,0,0,.5); }
.m-footer{ background: #eee; line-height: 60px; text-align: center; color: #999; font-size: 12px; }
.m-footer a{ margin: 0 5px; color: #999; text-decoration: none; }
</style>

上面 地图初始化渲染的方法 直接拿别人封装好的东西

最后运行后

vue-cli中使用高德地图的方法示例

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

Javascript 相关文章推荐
JavaScript Array扩展实现代码
Oct 14 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 #jQuery
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 #Javascript
vue+iview/elementUi实现城市多选
Mar 28 #Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 #Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 #Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 #Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 #Javascript
You might like
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
一个基于jquery的文本框记数器
2012/09/19 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
python得到电脑的开机时间方法
2018/10/15 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
C++的几个面试题附答案
2016/08/03 面试题
shallow copy和deep copy的区别
2016/05/09 面试题
安全生产责任书范本
2014/04/15 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
员工保密协议书
2014/09/27 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
小学安全工作总结2015
2015/05/18 职场文书
2015年重阳节主持词
2015/07/04 职场文书
用Python生成会跳舞的美女
2022/01/18 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers