elemefe / vue-amap

🌍 基于 Vue 2.x 和高德地图的地图组件

vue-amap

vue-amap是一套基于Vue 2.0和高德地图的地图组件。

安装

npm install -S vue-amap

文档

https://elemefe.github.io/vue-amap

快速上手

引入vue-amap

// 引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'YOUR_KEY',
  // 插件集合
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 高德 sdk 版本，默认为 1.4.4
  v: '1.4.4'
});

组件

地图

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
</el-amap>

点坐标

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
  <el-amap-marker v-for="marker in markers" :position="marker.position"></el-amap-marker>
</el-amap>

折线

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
  <el-amap-polyline :path="polyline.path"></el-amap-polyline>
</el-amap>

多边形

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
  <el-amap-polygon v-for="polygon in polygons" :path="polygon.path" :events="polygon.events"></el-amap-polygon>
</el-amap>

圆

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
  <el-amap-circle v-for="circle in circles" :center="circle.center" :radius="circle.radius"></el-amap-circle>
</el-amap>

图片覆盖物

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
  <el-amap-ground-image v-for="groundimage in groundimages" :url="groundimage.url"></el-amap-ground-image>
</el-amap>

文本

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
  <el-amap-text v-for="text in texts"></el-amap-text>
</el-amap>

贝塞尔曲线

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
  <el-amap-bezier-curve v-for="line in lines"></el-amap-bezier-curve>
</el-amap>

圆点标记

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
  <el-amap-circle-marker v-for="marker in markers"></el-amap-circle-marker>
</el-amap>

椭圆

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
  <el-amap-ellipse v-for="ellipse in ellipses"></el-amap-ellipse>
</el-amap>

矩形

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
  <el-amap-rectangle v-for="rectangle in rectangles"></el-amap-rectangle>
</el-amap>

信息窗体

<el-amap vid="amapDemo" :zoom="zoom" :center="center">
  <el-amap-info-window v-for="window in windows" :position="window.position" :content="window.content" :open="window.open"></el-amap-info-window>
</el-amap>

Search-Box

<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
<el-amap vid="amapDemo">
</el-amap>

其他特性

• 支持自定义组件
• 支持官方 UI 组件库

反馈

文档被大家吐槽了挺久，这段时间，针对大家的问题，对文档进行了一次升级。后续将重点持续完善「示例中心」，如果大家在使用过程中，遇到了些问题，欢迎提 issue，我们将根据大家的反馈，逐渐充实「示例中心」，更好地为大家服务。

vue-amap's Issues

点标记显示位置偏移量 如何计算？

现在换了图形定位缩放后偏差太大了。点标记显示位置偏移量如何计算？点坐标offset有没有计算公式啊？实在是不会算了。

[searchbox] 搜索最多返回 10 个结果

RT, 事实上是有更多的搜索结果, 但只返回了 10 个.

谢谢

升级到最新版本0.2.2，地图都显示不了了，样式高度设置不了

用来文档中的demo：

get map zoom++ zoom-- change center

<script> import { AMapManager } from 'vue-amap'; let amapManager = new AMapManager(); export default { name: 'amap-page', data: function() { return { vid: 'amap-vue-1', zoom: 12, center: [121.59996, 31.197646], events: { 'moveend': () => { let mapCenter = this.amapManager.getMap().getCenter(); this.center = [mapCenter.getLng(), mapCenter.getLat()]; }, 'zoomchange': () => { this.zoom = this.amapManager.getMap().getZoom(); }, 'click': (e) => { alert('map clicked'); } }, plugin: ['ToolBar', { pName: 'MapType', defaultType: 0, events: { init(o) { console.log(o); } } }], amapManager: amapManager, markers: [ [121.59996, 31.197646], [121.40018, 31.197622], [121.69991, 31.207649]] }; }, methods: { getMap: function() { console.log(this.amapManager.getMap()); console.log(this.center); }, addMarker: function() { let lng = 121.5 + Math.round(Math.random() * 1000) / 10000; let lat = 31.197646 + Math.round(Math.random() * 500) / 10000; this.markers.push([lng, lat]); }, addZoom() { this.zoom++; }, subZoom() { this.zoom--; }, changeCenter() { this.center = [this.center[0] + 0.1, this.center[1] + 0.1]; console.log(this.center); } } }; </script>

显示空白的，高度是0.
需要在这里设置，但是写了css也没有用。

editable 属性不生效

不知道是不是我的用法错了，多边形和圆的 editable 属性都不生效

  data () {
    return {
      zoom: 15,
      center: [121.5273285, 31.21515044],
      polygons: [
        {
          path: [
            [121.5273285, 31.21515044],
            [121.5293285, 31.21515044],
            [121.5293285, 31.21915044],
            [121.5273285, 31.21515044]
          ],
          events: {},
          visible: false,
          editable: true,
          strokeColor: '#38f',
          strokeOpacity: 1,
          strokeWeight: 3,
          fillColor: '#38f',
          fillOpacity: 0.2
        }
      ],
      circles: [
        {
          center: [121.5273285, 31.21515044],
          radius: 200,
          fillOpacity: 0.5,
          editable: true
        }
      ]
    }
  }

如何添加一个新组件

我仿照amap-marker.vue的写法加了个amap-hotmap.vue组件，但执行到新建组件时总是提示我组件没有注册，是还缺少了什么步骤吗？

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in component at E:\develop\vuecli\myProject\src\components\Amap.vue)

以下是我添加的代码：

lib\index.js

import AMapHotMap from './components/amap-hotmap.vue'; 
let components = [ 
 ... 
  AMapHotMap
]; 

amap-hotmap.vue

<template></template>
<script>
import registerMixin from '../mixins/register-component';

export default {
  name: 'el-amap-hotmap',
  mixins: [registerMixin],
  props: [
    'vid',
    'radius',
    'gradient',
    'opacity',
    'zooms',
    'events',
    'visible',
    'extData',
    'onceEvents'
  ],
  data() {
    return {
      handlers: {
        visible(flag) {
          flag === false ? this.hide() : this.show();
        }
      }
    };
  },
  methods: {
    initComponent(options) {

      let self = this;
      map.plugin(['AMap.Heatmap'],function(){
        self.$amapComponent = new AMap.Heatmap(map, options);
        self.$amapComponent.setDataSet({data: options.data, max: 100});
      });

    }
  }
};
</script> 

建议地图支持画轨迹一系列功能

请问要怎样添加浏览器定位服务插件AMap.Geolocation？

我想要在加载地图完成后，移动地图到定位地址。

vue-amap是否支持vue2.1.10版本

请问一下，我使用vue-amap之后，更新了vue版本至2.1.10，报错： Uncaught (in promise) TypeError: AMap.LngLat is not a constructor at toLngLat (eval at <anonymous> (app.js:1332), <anonymous>:2832:11) at Object.center (eval at <anonymous> (app.js:1332), <anonymous>:2642:47) at VueComponent.convertSignalProp (eval at <anonymous> (app.js:1332), <anonymous>:2907:37) at VueComponent.boundFn [as convertSignalProp] (eval at <anonymous> (app.js:624), <anonymous>:125:14) at VueComponent.convertProps (eval at <anonymous> (app.js:1332), <anonymous>:2899:32) at VueComponent.boundFn [as convertProps] (eval at <anonymous> (app.js:624), <anonymous>:127:12) at eval (eval at <anonymous> (app.js:1332), <anonymous>:2763:80)
请问是否是由于vue-amap不支持vue2.1.10导致的？

map不显示

按照demo自己写了一个，发现地图没有显示，也没有报错。

用vue_amap的搜索功能出现INVALID_USER_KEY报错

你好，我用vue_amap的搜索功能出现INVALID_USER_KEY报错 ，高德地图的key已经申请了，但是我该怎么引用进去呢？

Search-Box搜索关键词绑定的属性是什么？

el-amap-search-box标签搜索框输入的文字绑定的属性是什么？我想获取或更新搜索框里的内容，是否有这样的属性可以设置？或者是我用自己定义的输入框进行地图搜索，应该怎样实现？

[Vue warn]: Property or method "amap" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Hi,
我是用vue init出来的项目，按照官方文档上修改了main.js文件

还有Map的文件

编译的时候没有问题，打开页面后出现了
[Vue warn]: Property or method "amap" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
这个提示

版本如下：
"vue": "^2.2.2",
"vue-amap": "^0.2.3",
"vue-router": "^2.2.0"

想问一下，是我哪个地方设置不正确么？
谢谢

我怎么通过点击地图获取到此点的详细地址（我只看如何获取到此点的经纬度）

app.js?be11:3167 Uncaught TypeError: Cannot read property 'pois' of undefined

你好！
我用vue init webpack-simple amaptest建了个SearchBox的测试amaptest
不一样的是我把<style lang="scss" rel="stylesheet/scss">改成了<style>
返回了下面错误：

app.js?be11:3167 Uncaught TypeError: Cannot read property 'pois' of undefined
    at eval (eval at <anonymous> (http://localhost:9876/dist/build.js:997:1), <anonymous>:3167:35)
    at c.nb (eval at Ol (eval at <anonymous> (https://webapi.amap.com/maps?key=your%20amap%20key&v=1.3&plugin=AMap.Autoco…apType,AMap.PolyEditor,AMap.CircleEditor&callback=amapInitComponent:19:188)), <anonymous>:1:8224)
    at c.eval (eval at Ol (eval at <anonymous> (https://webapi.amap.com/maps?key=your%20amap%20key&v=1.3&plugin=AMap.Autoco…apType,AMap.PolyEditor,AMap.CircleEditor&callback=amapInitComponent:19:188)), <anonymous>:1:2968)
    at c.l (eval at <anonymous> (https://webapi.amap.com/maps?key=your%20amap%20key&v=1.3&plugin=AMap.Autoco…apType,AMap.PolyEditor,AMap.CircleEditor&callback=amapInitComponent:19:188), <anonymous>:31:352)
    at window.(anonymous function) (eval at Ol (eval at <anonymous> (https://webapi.amap.com/maps?key=your%20amap%20key&v=1.3&plugin=AMap.Autoco…apType,AMap.PolyEditor,AMap.CircleEditor&callback=amapInitComponent:19:188)), <anonymous>:1:1453)
    at https://restapi.amap.com/v3/place/text?s=rsv3&children=&key=your%20amap%20k…lhost%3A9876%2F&csid=CB338B05-FE7F-4AC0-981E-06389355A823&keywords=sdf:1:1
​```

关于地图 plugins 配置的作用域

现在的设计是 plugins 的配置是设置在全局，但如果有同一个模块有两个地图，要求的插件不同，现在的设计就无法覆盖，所以是否能将 plugins的配置降到 el-amap 的属性中。

like:

<el-amap :plugins="plugins">  </el-amap>

export default {
  data() {
    return {
       plugins: ['pluginA', 'pluginB']
    };
  }
}

修改中心点和折线坐标为北京经纬度后，不显示的问题

Support English version

How can I change the language to English in vue-amap? I know I can do it in Javascript API. But here I want a plugin or configuration for English.

多种覆盖层

目前这样是一个组件中实现一种地图操作，如果同一地图上既要叠直线又要叠圆，该怎么封装好一点呢？

run error

│       building: undefined,                                                             │Compiling ─────────
│──   buildTimestamp: 1489108248407,                                                   │┌─Operation───────
│─── cacheable: true ,                                                                ││
│    message: '\n  Vue template syntax error:\n\n  tag <el-amap-polygon> has no          ││
│matching end tag.\n',                                                                   │emit (NaNms)────────
│──error: '\n  Vue template syntax error:\n\n  tag <el-amap-polygon> has no            │┌─Progress────────
│matching end tag.\n'  ]                                                                 ││
│                                                                                        ││
└─────────────────────────────────────────────95%                       ─

ToolBar不显示

<script> export default { data() { return { plugin: [{ pName: 'ToolBar', events: { init(instance) { console.log(instance); } } }] }; } }; </script>

按实例写了toolbar，然而在页面并没不显示

正常vue-cli创建项目,惊现 jerryzhang

使用vue-cli 创建项目, 使用报错

// main.js
import Vue from 'vue'
import App from './App'
import AMap from 'vue-amap'
Vue.use(AMap)

// 初始化vue-amap
AMap.initAMapApiLoader({
  // 高德的key
  key: '3f3868abdb36336114bde5ab6eecdb68',
  // 插件集合
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
})

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

vue-amap 0.1.6 版本 dist/index.js 中 vue_options.__file 都是指向jerryzhang的目录
不知道是不是这个原因

[feat] Map Layer

Is there any code examples or doc i can refer for it.

Missing interface to manual manipulate plugins?

I was trying to use a ToolBar plugin and set properties for it.

In vanillaJS I can use it like:

const toolBar = new window.AMap.ToolBar({ visible: true })
toolBar.hideDirection()
toolBar.hideRuler()

// then add it to the map:
// this.map.addControl(toolBar)

How can it achieve the same with vue-amap. I don't think it is provided in the API docs.

I just read:

<el-amap :plugin="plugin">

<script>
{
   plugin: ['ToolBar']
}
</script>

and things like plugin: ['ToolBar.hideDirection'] won't work.

---

请问一下，如何自定义设置plugins？

比如我想对ToolBar进行进一步的设定，使用原生的地图接口。

polygon editable

在移动端需要使用可编辑的多边形时，拖动的圆按钮太小了，很容易误操作。在安卓上体验尤其糟糕。

可以提供一个控制按钮大小的参数吗？类似于 editorBtnRadius

SearchBox

SearchBox部分js代码能否完整一些，新手很难看得懂，希望提供一个完整的demo，谢谢

使用点坐标时，更换自定义的icon图标，没有效果

关于点坐标的动态属性‘icon’-类型‘string’（高德地图的官方文档里的类型‘string/icon对象’）
我想自定义一个icon，但是没有效果呀
markers: [ { position: [121.59996, 31.197646], events: { click: () => { alert('click marker'); }, dragend: (e) => { this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]; } }, icon:"http://10.88.135.71:8010/res/images/qq.png", draggable: true, raiseOnDrag: true } ]
或
markers: [ { position: [121.59996, 31.197646], events: { click: () => { alert('click marker'); }, dragend: (e) => { this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]; } }, icon: new AMap.Icon({ size: new AMap.Size(40, 50), //图标大小 image: "http://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png", imageOffset: new AMap.Pixel(0, -60) }), draggable: true, raiseOnDrag: true } ]

信息窗体关闭后，如何再次打开？

文档里没有写？

信息窗体问题二三

1、信息窗体对象是个数组，是可以同时传入多个窗体对象吗，可是我同时初始化两个以后页面就没有显示了，也不报错，所以我在切换时，是应该一直修改窗体内容，还是创建多个窗体，控制显示隐藏？
2、窗体怎么控制显示隐藏，我动态清空windows再push一个新窗口可以实现切换，但是手动关闭窗体以后，我再怎么修改windows数组，窗体都不再显示了，所以是那里操作错误？
最后能提供一个窗体切换控制的demo吗，感激不敬！

Mouse Tool [Feature Request]

Currently we can use mouse tool for calculate area, calculate distance. but when we want to create polygon or polyline it won't create Vue instance for that element. so we don't have any control on it.

It would be great do if mouse tool Draw() function create's Vue instance of that element.

any thoughts about it ?

Search Box Error When Search Again

比如,我搜索江南皮革,点击下拉框中的任意一个,成功跳转,而,再次搜索人民广场的时候,则会报错,报错信息如上

[HELP] Firing Methods, inside of Map, marker events

Can you guys show me some example about how to fire action, method etc inside of map or marker events.

<script>
import drone from './drone'
  export default {
    data() {
      return {
        rocket: {
          events: {
            click(e) {
              console.log('dont touch this')
            },
            mouseover(e) {
              let content = e.target.G.content
              const regexp = /id="(\d*)"/g
              let [id, rocketId, ...rest] = regexp.exec(content)
              console.log('hovering', rocketId)
              // this is the place where i want fire 'method'
             this.selectedDevice(rocketId) // but it's turnout undefined.
            },
            mouseout(e) {
              let content = e.target.G.content
              const regexp = /id="(\d*)"/g
              let [id, rocketId, ...rest] = regexp.exec(content)
              console.log('unhovering', rocketId)
            }
          },
        },
        center: [113.31307634, 23.110488],
        zoom: 16,
        selectedDevice: 1234
      }
    },
    methods: {
      createContent(device)  {
        return `<div className="rocket" id="${device.id}"><img src="https://justrocket.com.au/wp-content/uploads/2015/07/rocket-Icon-01.png" width="20px" heigh="20p">${device.name}</div>`
      },
      selectedDevice(asd) {
        consoel.log(asd)
      }
    },
    props: ['deviceList', 'users']
  }
</script>

can anyone help me out?

鼠标滑过marker显示信息窗体要怎么做？

业务需求： 地图上有若干marker，当鼠标移上时，需要显示一个信息窗体，来展示该marker的详细信息

请问要怎么实现？文档实在看不太明白

点坐标的icon和content都不能生效，是什么情况

一开始用的是html编写，现在直接用高德地图的icon方法，也是无效！不知错在何处...

文档写的不是太清晰

参考vue百度的:https://dafrok.github.io/vue-baidu-map

插件的事件中怎么获取vue的this

extdata 的setExtData(ext:Any)和getExtData( )可以添加吗？

项目需要一些自定义数据挂载到marker点上， 一些高的地图的api似乎并没有全部提供出来。

中心点和折线坐标修改后地图不显示的问题

按照说明文档折线示例，地图加载如预期，但是当修改了center和path的坐标后，地图不显示，修改的坐标如下：
center: [39.916527,116.397128],
path: [[39.930456,116.387554],
[39.929008,116.414162],
[39.909786,116.379314]]
请问这个是怎么回事呢？

监测 map 的 click 事件，如何获得 所点击位置对应的地址信息？

<el-amap :vid="'amap'" :center="center" :events="map_events" :zoom="zoom" :plugin="plugin">

map_events: {
 'click': (e)=>{
            console.log('click map');
            console.log(e);
      }
 }

我在 e 中并没有发现 地址信息，该如何解决？

searchbox 似乎有点问题

demo上pois是undefined

Search-Box 问题

@AxeMea
系统：win10
浏览器：chrome 56.0.2924.87
vue-amap: 0.1.7

问题

1、不知道为何在电脑上的chrome浏览器无法定位（已经设置允许定位），但是手机中的却可以

2、我的search-box 输入内容没有补充提示
3、点击搜索老是如下图

对maker设置title属性,鼠标划过maker没有提示

                           :key="pos.id"
                           :position="pos.position"
                           title="testTitle"
      ></el-amap-marker>

代码如上,只显示点,划过不显示title

在 phantomjs 中报错

vue-amap@^0.1.7
[email protected]

TypeError: undefined is not a constructor (evaluating 'Object.assign({},o,e)')

[Vue warn]: Do not use built-in or reserved HTML elements as component id: Map

为什么会出现这个错啊？？？

package.json 缺少 markdown-it 模块

如何引入AmapUI库

请问怎么引入AmapUI库

[feature] 定位功能

Search-Box ,怎么添加默认的搜索关键词到输入框啊？

你好，我想在高德地图初始化的时候，添加默认的搜索关键词到输入框啊
placeSearch:{ search:"广州市", input:"广州市", value:"广州市", },
但是都没成功

在微信开发工具下报错

在微信开发工具下报错： （对运行没有影响）
Unhandled promise rejection TypeError: Object.entries is not a function
但 chrome 模拟下没有报错

经过测试

data () {
    var self = this
    return {
      plugin: [{
        pName: 'CitySearch',
        events: {
          init (o) {
            o.getLocalCity((status, result) => {
....

貌似 微信不支持 Object.entries 何解呢

searchBox无法使用

Error in beforeCreate hook:
(found in at /Users/jerryzhang/workProject/vue-amap/src/lib/components/amap-search-box.vue)
不清楚在哪里修改这个路径

可以使用CDN的方式引入吗？