elemefe / vue-amap Goto Github PK
View Code? Open in Web Editor NEW🌍 基于 Vue 2.x 和高德地图的地图组件
Home Page: https://elemefe.github.io/vue-amap/
License: MIT License
🌍 基于 Vue 2.x 和高德地图的地图组件
Home Page: https://elemefe.github.io/vue-amap/
License: MIT License
demo上pois是undefined
vue-amap@^0.1.7
[email protected]
TypeError: undefined is not a constructor (evaluating 'Object.assign({},o,e)')
不知道是不是我的用法错了,多边形和圆的 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
}
]
}
}
1、信息窗体对象是个数组,是可以同时传入多个窗体对象吗,可是我同时初始化两个以后页面就没有显示了,也不报错,所以我在切换时,是应该一直修改窗体内容,还是创建多个窗体,控制显示隐藏?
2、窗体怎么控制显示隐藏,我动态清空windows再push一个新窗口可以实现切换,但是手动关闭窗体以后,我再怎么修改windows数组,窗体都不再显示了,所以是那里操作错误?
最后能提供一个窗体切换控制的demo吗,感激不敬!
按实例写了toolbar,然而在页面并没不显示
在微信开发工具下报错: (对运行没有影响)
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 何解呢
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.
我仿照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>
Is there any code examples or doc i can refer for it.
@AxeMea
系统:win10
浏览器:chrome 56.0.2924.87
vue-amap: 0.1.7
1、不知道为何在电脑上的chrome浏览器无法定位(已经设置允许定位),但是手机中的却可以
2、我的search-box 输入内容没有补充提示
3、点击搜索老是如下图
<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 中并没有发现 地址信息,该如何解决?
// 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的目录
不知道是不是这个原因
:key="pos.id"
:position="pos.position"
title="testTitle"
></el-amap-marker>
代码如上,只显示点,划过不显示title
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 ?
关于点坐标的动态属性‘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 } ]
SearchBox部分js代码能否完整一些,新手很难看得懂,希望提供一个完整的demo,谢谢
Error in beforeCreate hook:
(found in at /Users/jerryzhang/workProject/vue-amap/src/lib/components/amap-search-box.vue)
不清楚在哪里修改这个路径
你好,我用vue_amap的搜索功能出现INVALID_USER_KEY报错 ,高德地图的key已经申请了,但是我该怎么引用进去呢?
用来文档中的demo:
显示空白的,高度是0.
需要在这里设置,但是写了css也没有用。
目前这样是一个组件中实现一种地图操作,如果同一地图上既要叠直线又要叠圆,该怎么封装好一点呢?
为什么会出现这个错啊???
请问一下,我使用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导致的?
按照demo自己写了一个,发现地图没有显示,也没有报错。
业务需求: 地图上有若干marker,当鼠标移上时,需要显示一个信息窗体,来展示该marker的详细信息
请问要怎么实现?文档实在看不太明白
文档里没有写?
你好!
我用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
```
el-amap-search-box标签搜索框输入的文字绑定的属性是什么?我想获取或更新搜索框里的内容,是否有这样的属性可以设置?或者是我用自己定义的输入框进行地图搜索,应该怎样实现?
你好,我想在高德地图初始化的时候,添加默认的搜索关键词到输入框啊
placeSearch:{ search:"广州市", input:"广州市", value:"广州市", },
但是都没成功
现在换了图形定位缩放后偏差太大了。点标记显示位置偏移量如何计算?点坐标offset有没有计算公式啊?实在是不会算了。
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点上, 一些高的地图的api似乎并没有全部提供出来。
现在的设计是 plugins
的配置是设置在全局,但如果有同一个模块有两个地图,要求的插件不同,现在的设计就无法覆盖,所以是否能将 plugins
的配置降到 el-amap
的属性中。
like:
<el-amap :plugins="plugins"> </el-amap>
export default {
data() {
return {
plugins: ['pluginA', 'pluginB']
};
}
}
我想要在加载地图完成后,移动地图到定位地址。
请问怎么引入AmapUI库
按照说明文档折线示例,地图加载如预期,但是当修改了center和path的坐标后,地图不显示,修改的坐标如下:
center: [39.916527,116.397128],
path: [[39.930456,116.387554],
[39.929008,116.414162],
[39.909786,116.379314]]
请问这个是怎么回事呢?
│ 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% ─
RT, 事实上是有更多的搜索结果, 但只返回了 10 个.
谢谢
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进行进一步的设定,使用原生的地图接口。
Hi,
我是用vue init出来的项目,按照官方文档上修改了main.js文件
编译的时候没有问题,打开页面后出现了
[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"
想问一下,是我哪个地方设置不正确么?
谢谢
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.