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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
js数组操作常用方法
May 08 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 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初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
PHP中的use关键字概述
2014/07/23 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python列表推导式入门学习解析
2019/12/02 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
详解Python IO编程
2020/07/24 Python
面向对象编程的优势是什么
2015/12/17 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
化工专业自荐书
2014/06/16 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
辞职信标准格式
2015/02/27 职场文书
党员违纪检讨书
2015/05/05 职场文书
礼貌问候语大全
2015/11/10 职场文书
《打电话》教学反思
2016/02/22 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
MySQL约束超详解
2021/09/04 MySQL
node快速搭建后台的实现步骤
2022/02/18 NodeJs