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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
node跨域请求方法小结
Aug 25 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
JS闭包经典实例详解
Dec 20 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 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生成带有雪花背景的验证码
2008/09/28 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
Python中字典的基本知识初步介绍
2015/05/21 Python
python中异常报错处理方法汇总
2016/11/20 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python实现ftp文件传输功能
2020/03/20 Python
Python实现动态循环输出文字功能
2020/05/07 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
新大陆软件面试题
2016/11/24 面试题
计算机应届毕业生自荐信范文
2014/02/23 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
物理学专业自荐信
2014/06/11 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2014年度个人总结范文
2015/03/09 职场文书
旅行社计调工作总结
2015/08/12 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
Python sklearn分类决策树方法详解
2022/09/23 Python