精华内容
下载资源
问答
  • vue 高德地图

    2020-08-20 10:15:43
  • 首先注册高德账号

    先来看下效果:

     

    首先注册高德账号 获取到 高德密钥 key 

    https://lbs.amap.com/ 

    https://lbs.amap.com/api/javascript-api/summary

    官网注册成为开发者 个人公司都可以 然后进去控制台

    1.我的应用中创建新的应用

    2.在应用中点击添加 创建新的key

    下面开始实现你想要的功能:

    我是基于vue开发的所以这里就用了vue-cli  可自行去vue官网安装cli脚手架

    vue create vue-map 安装vue脚手架命令 下面是我的文件目录  Home.vue是主要实现功能的代码

    在入口index.html中引入高德js文件  引入的cdn地址key的参数 就是你应用中创建的key

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>高德地图</title>
        <script src="https://webapi.amap.com/maps?v=1.4.15&key=高德申请的key"></script>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    

    在Home.vue 文件中进行开发

    我这里写的大小800px的正方形。

    <template>
      <div class="home">
        <div class="map" id="container"></div>
      </div>
    </template>
    
    <style lang="less" scoped>
    .map{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 800px;
      height: 800px;
    }
    </style>

    1. 初始化地图控件

    <script>
    // @ is an alias to /src
    export default {
      name: 'Home',
      components: {
        
      },
      data () {
        return {
          map: '',
          infoWindow: '',
          marker: '',
          timer: '',
          n: 0,
          list: [
            {
              name: '杭州雷峰塔景区',
              longitude: '120.148849',
              latitude: '30.230934',
              people: Math.floor(Math.random() * 100000)
            },
            {
              name: '杭州西湖区河坊街',
              longitude: '120.092207',
              latitude: '30.274405',
              people: Math.floor(Math.random() * 100000)
            },
            {
              name: '杭州西湖断桥残雪',
              longitude: '120.151195',
              latitude: '30.258105',
              people: Math.floor(Math.random() * 100000)
            },
            {
              name: '杭州西湖风景名胜区-曲院风荷',
              longitude: '120.135502',
              latitude: '30.251182',
              people: Math.floor(Math.random() * 100000)
            },
            {
              name: '杭州西湖风景名胜区-曲院风荷',
              longitude: '120.135502',
              latitude: '30.251182',
              people: Math.floor(Math.random() * 100000)
            },
            {
              name: '银泰百货(西湖店)',
              longitude: '120.165667',
              latitude: '30.243768',
              people: Math.floor(Math.random() * 100000)
            },
            {
              name: '湘湖国家旅游度假区',
              longitude: '120.209336',
              latitude: '30.133265',
              people: Math.floor(Math.random() * 100000)
            },
            {
              name: '杭州动物园',
              longitude: '120.133069',
              latitude: '30.212224',
              people: Math.floor(Math.random() * 100000)
            }
          ]
        }
      },
      methods: {
        // 初始化地图控件方法
        initMap() {
          this.map = new AMap.Map(document.getElementById("container"), {
            mapStyle: 'amap://styles/darkblue',
            resizeEnable: false,
            center: [this.list[0].longitude, this.list[0].latitude],//地图中心点
            zoom: 13,//地图显示的缩放级别
            keyboardEnable: false,
            zoomEnable: true,
            dragEnable: true,
            animateEnable: true
          });
          // 循环初始化所有坐标点
          this.list.forEach(v => {
            this.initMarker({ lng: v.longitude, lat: v.latitude }, v)
          })
          // 通过定时器对地图坐标进行轮播
          this.setInter()
        },
        // 初始化坐标点的icon
        initMarker(location, item) {
          // console.log('Location', location, item)
          // 生成坐标点icon
          let icon = new AMap.Icon({
            size: new AMap.Size(20, 26),
            image: require("../assets/images/dn-marker-icon.png"),
            imageSize: new AMap.Size(20, 26)
          });
          // 坐标点 生成方法
          this.marker = new AMap.Marker({
            icon: icon, // 坐标点图标
            position: [location.lng, location.lat], // 左边点的经纬度
            offset: new AMap.Pixel(0, -30) // 坐标点偏移量
          });
          // 坐标点添加点击事件 用来打开自定义窗口 也可直接添加窗口自动全部打开状态
          this.marker.on('click', (e) => {
            // console.log('marker 添加点击事件:', e, e.pixel.x, e.pixel.y)
            this.initInfoWindow(location.lng, location.lat, item)
            // 点击当前标点移动至地图中心点
            this.setCenter(location.lng, location.lat)
            this.infoWindow.open(this.map, e.lnglat)
          })
          // 初始化坐标点自定义窗口
          this.initInfoWindow(location.lng, location.lat, item)
          // 打开窗口的方法 这里也可以通过 点击坐标点打开
          this.infoWindow.open(this.map, {Q: location.lat, R: location.lng, lat: location.lat, lng: location.lng})
          // 
          this.marker.setMap(this.map)
        },
        // 初始化信息窗体
        initInfoWindow(lng, lat, item) {
          // console.log('创建了信息窗体')
          this.infoWindow = new AMap.InfoWindow({
            isCustom: true,  //使用自定义窗体
            anchor: 'bottom-center',
            content: this.createInfoWindow(item),
            offset: new AMap.Pixel(0, -20),
            autoMove: true,
            closeWhenClickMap: false
          });
        },
        // 创建信息窗体
        createInfoWindow(item) {
          return `
            <div class="dn-info-window">
              <div class="dn-info-name">${item.name}</div>
              <div class="dn-info-num">实时人数:<span>${item.people}</span></div>
            </div>
          `
        },
        // 轮循坐标点方法
        setInter() {
          this.timer = setInterval(() => {
            // 轮播当前标点移动至地图中心点
            this.setCenter(this.list[this.n].longitude, this.list[this.n].latitude)
            this.initMarker({ lng: this.list[this.n].longitude, lat: this.list[this.n].latitude }, this.list[this.n])
            if (this.n == (this.list.length - 1)) {
              this.n = 0
            } else {
              this.n++
            }
          }, 10000)
        },
        // 当前标点移动至地图中心
        setCenter (long, lati) {
          this.map.setCenter([long, lati])
        }
      },
      mounted () {
        this.initMap()
      },
      beforeDestroy () {
        clearInterval(this.timer)
      }
    }
    </script>

    样式代码

    
    <style lang="less" scoped>
    .map{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 800px;
      height: 800px;
    }
    // 自定义窗体的样式  
    /deep/.info-window {
      padding: 10px;
      background: rgba(4, 77, 145, 0.753);
      color: #3196FA;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
    
      .info-name {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    
      .info-num {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #A5A3A1;
    
        >span {
          font-size: 14px;
          color: #3196FA;
    
          &.active-color {
            color: #EF4864;
          }
        }
      }
    }
    
    </style>

    这篇文章主要记录自己使用高的地图的方法。欢迎大家下方指导。 下篇更新高德地图搜索地点功能 

    展开全文
  • 一、开发环境:vue版本:v2.5.2vue-cli版本:v2.9.3webpack版本:3.6.0高德地图api版本:JavaScript API V1.4.12二、直入主题首先在,index.html文件中引入高德地图api然后,更改webpack配置文件 build/webpack.base...

    一、开发环境:

    vue版本:v2.5.2

    vue-cli版本:v2.9.3

    webpack版本:3.6.0

    高德地图api版本:JavaScript API V1.4.12

    二、直入主题

    首先在,index.html文件中引入高德地图api

    然后,更改webpack配置文件 build/webpack.base.conf.js,在module.exports中添加externals字段

    module.exports = {

    ....

    externals: {

    'AMap': 'AMap'

    }

    }

    如果是vue-cli3版本,请在项目的根目录的vue.config.js文件中修改webpack配置

    // vue.config.js

    module.exports = {

    chainWebpack: config => {

    config.externals: {

    'AMap': 'AMap'

    }

    }

    }

    代码:

    请输入关键字:

    搜索

    初始化结果:

    搜索地点:

    地点经纬度:

    接下来根据经纬度可以实现其他功能。

    三、总结

    高德地图api接口比较丰富,只要开动脑筋组合使用起来,大多的需求都能实现。本次主要使用了POI搜索插件AMap.PlaceSearch,原官方的Demo中使用了AMap.AutoComplete,本次根据实际项目需求去掉了,结合了带列表的POI搜索的这个Demo,再将监听事件改为列表点选的selectChange事件,获得当前点选地点经纬度,这样将二者进行了组合一下实现了以上的搜索以及展现方式,查看AMap.PlaceSearch全部属性和方法,查看AMap.Autocomplete全部属性和方法。

    THE END

    展开全文
  • vue高德地图,带你玩转周边,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue高德地图JSAPI

    2020-05-28 11:01:03
    vue 高德地图JSAPI 使用vue-amap 使用npm 安装vue-amap (https://elemefe.github.io/vue-amap/#/) npm install vue-amap --save 在main.js中引入vue-amap import VueAMap from 'vue-amap' Vue.use(VueAMap) ...

    vue 高德地图JSAPI

    使用vue-amap
    使用npm 安装vue-amap (https://elemefe.github.io/vue-amap/#/)

    npm install vue-amap --save
    

    在main.js中引入vue-amap

    import VueAMap from 'vue-amap'
    Vue.use(VueAMap)
    
    VueAMap.initAMapApiLoader({
      key: '高德地图申请的key',
      plugin: [//高德地图扩展插件(按需添加)
        'AMap.Autocomplete', // 输入提示插件
        'AMap.PlaceSearch', // POI搜索插件
        'AMap.Scale', // 右下角缩略图插件 比例尺
        'AMap.OverView', // 地图鹰眼插件
        'AMap.ToolBar', // 地图工具条
        'AMap.MapType', // 类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
        'AMap.PolyEditor', // 编辑 折线多,边形
        'AMap.CircleEditor', // 圆形编辑器插件
        'AMap.Geolocation' // 定位控件,用来获取和展示用户主机所在的经纬度位置
      ],
      uiVersion: '1.1', // ui库版本,不配置不加载,
      v: '2.0'
    })
    

    只需要vue-amap提供的功能请参照https://elemefe.github.io/vue-amap/#/

    使用高德官网JSAPI
    安装vue-amap,步骤同上
    在需要使用高德地图的页面引入lazyAMapApiLoaderInstance,详细功能参考https://lbs.amap.com/

    img

    展开全文
  • https://txs1992.github.io/fast-amap/这个想法来源于之前开发的一个项目,该项目需要在 zoom 16 的级别下渲染 (100 * 100) 的小方格,使用高德地图的多边形覆盖物 Polygon 进行渲染,在 mac 13 寸屏幕下渲染 1k+,...
  • 效果图:image.png步骤一:先在最外成html挂载行政区域所用的代码步骤二:直接赋值代码:import AMap from "AMap";export default {data() {return {weXinAmapMap: null,};},watch: {},created() {},mounted() {this...
  • vue 高德地图获取当前位置

    千次阅读 2019-07-09 19:57:47
    vue 高德地图获取当前位置1.引入高德地图2.添加定位插件 1.引入高德地图 上一篇博客中已经详细讲解了如何在vue项目中引入高德地图,因此不再赘述。 2.添加定位插件 在引入高德地图的基础上,添加定位插件。如下...
  • vue 调用高德地图API发布时间:2018-08-06 16:56,浏览次数:2799, 标签:vueAPI(说明:之前第三条忘记说明了,现在补上第三条,道歉!)一、功能:定位;精准定位;拖拽选点;编辑遮罩物;工具条二、实现过程:1、...
  • 调用高德地图的API,首先注册高德开发平台的账号,称为高德地图开发者,创建应用后申请key(步骤如下):进入高德开发平台——进入右上角控制台——进入做上角应用管理——创建key安装高德地图组件: vue-amap引入组件...
  • 8158921-50a76999e138f579.jpeg高德地图的poi不能点击信息窗口然后获取当前的经纬度,然后我百度了一下,自己修改了样式,最后就成功了。要先引入cdn高德的地址html搜索@click="openMarkerTipById1(index,$event)"@...
  • 第一步vue中使用cdn引入高德地图,并在main.js中进行全局配置。(百度上有高德地图引入与配置方法,这里就不详细介绍);1)npm install vue-amap --save2)import VueAMap from ‘vue-amap'Vue.use(VueAMap);VueAMap....
  • 创建 loadMap.js/*** 动态加载高德地图** @export* @param {*} key 高德地图key* @param {*} plugins 高德地图插件* @param {string} [v='1.4.14'] 高德地图版本* @returns*/export default function loadMap(key, ...
  • 1. 加载高德地图公共方法具体加载方法2.自定义infoWindow事件使用Vue.extend()生成html源码如下:/** * 创建script * @param url * @returns {Promise} */const createScript = (url, hasCallback) => { let ...
  • vue 高德地图 轨迹巡航
  • 由于工作上的需要,今天捣鼓了半天高德地图。如果定制化开发需求不太高的话,可以用vue-amap,这个我就不多说了,详细就看官网 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install然而我们公司需要...
  • 功能需求引入并创建地图支持鼠标工具鼠标画矢量图(线、圆、矩形、多边形)支持矢量图编辑、获取各点经纬度及求面积等操作自定义鼠标右键事件一图胜千言,效果图如下创建地图对象//DOM加载后动态引入地图脚本并map初始...
  • vue 高德地图 海量点展示
  • vue中使用高德地图api引入高德js apiwebpack配置高德api组件中使用高德api引入高德js首先注册高德api帐号,申请到key然后在vue-cli创建的 html中引入webpack配置高德api在webpack.base.js 中添加如下代码vue-cli 3.0...
  • 1.修改webpac.base.conf.js文件与module同一级添加...然后在index页面引入文件接着下载包vue-amap,然后在vue页面中import AMap from ‘AMap‘//在使用地图的页面引入该组件var mapexport default {mounted: functio...
  • vue高德地图在范围内添加随机标记点 //绘制半径范围 var circle = new AMap.Circle({ center: this.location, radius: 1000, //半径 borderWeight: 1, strokeColor: "#3070FF", strokeOpacity: 1, ...
  • vue 高德地图 海量点样式分组引擎)
  • 使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amapnpm install vue-amap --save 2 在mai.js中引入import AMap from 'vue-amap'; Vue.use(AMap); AMap.initAMapApiLoader({ key: "自己申请的key", ...
  • vue高德地图搜索功能

    千次阅读 2019-02-15 11:31:23
    高德地图api版本:JavaScript API V1.4.12 二、直入主题 首先在,index.html文件中引入高德地图api &lt;script type="text/javascript" src="https://webapi.amap.com/maps...
  • 一、获取key及在index.htm中引入首先需要成为高德...我项目使用的是cli3的脚手架,需要在vue.config.js中进行高德地图配置externals: {'amap': 'amap' // 高德地图配置}三、在需要用到的地方进行地图初始化及定位操...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,670
精华内容 668
关键字:

vue高德地图

vue 订阅