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 相关文章推荐
用js模拟struts2的多action调用示例
May 19 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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中常见的缓存技术实例分析
2015/09/23 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
小程序实现搜索框
2020/06/19 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
python编程线性回归代码示例
2017/12/07 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
一月红领巾广播稿
2014/02/11 职场文书
体育之星事迹材料
2014/05/11 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
MySQL 查询速度慢的原因
2021/05/25 MySQL
Python自动化测试PO模型封装过程详解
2021/06/22 Python