高德离线地图vue-amap的api文档(2):创建地图,撒点等等
前言:高德离线地图的使用场景还是很多的,但是他的api在国外,想参考api对网络差的朋友来说不是一件容易的事,对我来说一样,在这里整理下他的api内容。注:本文是将官网api挪动出来,网好的童鞋想看原版的请点击官网入口官网入口...
前言:
高德离线地图的使用场景还是很多的,但是他的api在国外,想参考api对网络差的朋友来说不是一件容易的事,对我来说一样,在这里整理下他的api内容。
注:本文是将官网api挪动出来,网好的童鞋想看原版的请点击官网入口
目录:
十九、MapType 地图类型切换插件,用来切换固定的几个常用图层
二十一、Scale 比例尺插件。位于地图右下角,用户可控制其显示与隐藏。
二十二、ToolBar 地图工具条插件,可以用来控制地图的缩放和平移。
官网入口
十七、搜索框
<template>
<div class="amap-page-container">
<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
<el-amap vid="amapDemo" :center="mapCenter" :zoom="12" class="amap-demo">
<el-amap-marker v-for="marker in markers" :position="marker" ></el-amap-marker>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
.search-box {
position: absolute;
top: 25px;
left: 20px;
}
.amap-page-container {
position: relative;
}
</style>
<script>
module.exports = {
data: function() {
return {
markers: [
[121.59996, 31.197646],
[121.40018, 31.197622],
[121.69991, 31.207649]
],
searchOption: {
city: '上海',
citylimit: true
},
mapCenter: [121.59996, 31.197646]
};
},
methods: {
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]);
},
onSearchResult(pois) {
let latSum = 0;
let lngSum = 0;
if (pois.length > 0) {
pois.forEach(poi => {
let {lng, lat} = poi;
lngSum += lng;
latSum += lat;
this.markers.push([poi.lng, poi.lat]);
});
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length
};
this.mapCenter = [center.lng, center.lat];
}
}
}
};
</script>
实现效果:
API
参数 | 说明 | 类型 |
---|---|---|
searchOption | 搜索条件 | Object |
onSearchResult) | 搜索回调函数 | function[ {lng, lat} ] |
default | 默认值 | String |
## searchOption | ||
属性 | 说明 | 类型 |
--- | ---- | --- |
city | 城市名 | String |
citylimit | 是否限制城市内搜索 | Boolean |
onSearchResult
参数 | 说明 | 类型 |
---|---|---|
pois | 经纬度对象数组 | Object |
事件
事件名 | 参数 | 说明 |
---|---|---|
init | Object | 参数包含 { autoComplete, placeSearch} ,分别为自动补全以及地址搜索插件的高德实例 |
十八、插件
引入方式
1 - 全局引入地图插件
首先需要在项目初始化时,通过 initAMapApiLoader
引入所需要的插件。
使用插件之前一定要初始化,否则会报错!
import VueAMap from 'vue-amap';
VueAMap.initAMapApiLoader({
key: 'YOUR_KEY',
plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor']
});
2 - 配置插件
全局引入后,需要给单个地图组件配置插件:
<template>
<div>
<el-amap vid="amapDemo" :plugin="plugins"></el-amap>
</div>
</template>
<script>
export default {
data() {
return {
plugins: ['MapType'];
};
};
};
</script>
配置说明
插件名支持两种,不带"AMap"
前缀,如"MapType"
,带"AMap"
前缀,如"AMap.MapType"
。推荐前者,以下都基于前者说明。 (v0.1.2之前版本,只支持后者)
插件的配置支持两种方式。
1 - 默认配置
只配置插件名,配置则用默认
{
plugin: ['MapType']
}
2 - 自定义配置
(v0.1.2开始支持)
自定义配置对象,pName为插件名。所有属性仅支持初始化配置,不支持响应式。
{
plugin: [{
// pName为必填字段
pName: 'MapType',
defaultType: 1
}]
}
十九、MapType 地图类型切换插件,用来切换固定的几个常用图层
<template>
<div class="amap-page-container">
<el-amap vid="amap" :plugin="plugin" class="amap-demo">
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data() {
return {
plugin: [{
pName: 'MapType',
defaultType: 0,
events: {
init(instance) {
console.log(instance);
}
}
}]
};
}
};
</script>
实现效果:
属性
名称 | 类型 | 说明 |
---|---|---|
defaultType | Number | 初始化默认图层类型。 取值为0:默认底图 取值为1:卫星图 默认值:0 |
showTraffic | Boolean | 叠加实时交通图层 默认值:false |
showRoad | Boolean | 叠加路网图层 默认值:false |
事件
事件 | 参数 | 说明 |
---|---|---|
init | Object | 高德插件示例 |
二十、Overview 地图鹰眼插件。
<template>
<div class="amap-page-container">
<el-amap vid="amap" :plugin="plugin" class="amap-demo">
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data() {
return {
plugin: [{
pName: 'OverView',
events: {
init(instance) {
console.log(instance);
}
}
}]
};
}
};
</script>
实现效果:
属性
名称 | 类型 | 说明 |
---|---|---|
isOpen | Boolean | 鹰眼是否展开,默认为false |
visible | Boolean | 鹰眼是否显示,默认为true |
事件
事件 | 参数 | 说明 |
---|---|---|
init | Object | 高德插件示例 |
二十一、Scale 比例尺插件。位于地图右下角,用户可控制其显示与隐藏。
<template>
<div class="amap-page-container">
<el-amap vid="amap" :plugin="plugin" class="amap-demo">
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data() {
return {
plugin: [{
pName: 'Scale',
events: {
init(instance) {
console.log(instance);
}
}
}]
};
}
};
</script>
二十二、ToolBar 地图工具条插件,可以用来控制地图的缩放和平移。
<template>
<div class="amap-page-container">
<el-amap vid="amap" :plugin="plugin" class="amap-demo">
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data() {
return {
plugin: [{
pName: 'ToolBar',
events: {
init(instance) {
console.log(instance);
}
}
}]
};
}
};
</script>
实现效果:
属性
名称 | 类型 | 说明 |
---|---|---|
position | String | 控件停靠位置 LT:左上角; RT:右上角; LB:左下角; RB:右下角; 默认位置:LT |
ruler | Boolean | 标尺键盘是否可见,默认为true |
noIpLocate | Boolean | 定位失败后,是否开启IP定位,默认为false |
locate | Boolean | 是否显示定位按钮,默认为false |
liteStyle | Boolean | 是否使用精简模式,默认为false |
direction | Boolean | 方向键盘是否可见,默认为true |
autoPosition | Boolean | 是否自动定位,即地图初始化加载完成后,是否自动定位的用户所在地,仅在支持HTML5的浏览器中有效,默认为false |
useNative | Boolean | 是否使用高德定位sdk用来辅助优化定位效果,默认:false. |
仅供在使用了高德定位sdk的APP中,嵌入webview页面时使用注:如果要使用辅助定位的功能,除了需要将useNative属性设置为true以外,还需要调用高德定位sdk中,AMapLocationClient类的startAssistantLocation()方法开启辅助H5定位功能;不用时,可以调用stopAssistantLocation()方法停止辅助H5定位功能。具体用法可参考定位SDK的参考手册
事件
事件 | 参数 | 说明 |
---|---|---|
init | Object | 高德插件示例 |
二十三、Geolocation
Geolocation定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位 sdk 辅助定位等多种手段,提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。用户可以通过两种当时获得定位的成败和结果,一种是在 getCurrentPosition 的时候传入回调函数来处理定位结果,一种是通过事件监听来取得定位结果。Geolocation 定位常见问题说明 注:默认情况下,PC端优先使用精确IP定位,解决多数浏览器无法完成定位的现状,IP定位失败后使用浏览器定位;手机端优先使用浏览器定位,失败后使用IP定位;对于安卓WebView页面的开发者,可以结合定位 sdk 进行辅助定位,详细说明见 useNative 参数。IP定位的精度值为 null。
由于 Chrome 、IOS10 等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到 HTTPS
<template>
<div class="amap-page-container">
<el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
</el-amap>
<div class="toolbar">
<span v-if="loaded">
location: lng = {{ lng }} lat = {{ lat }}
</span>
<span v-else>正在定位</span>
</div>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data() {
let self = this;
return {
center: [121.59996, 31.197646],
lng: 0,
lat: 0,
loaded: false,
plugin: [{
pName: 'Geolocation',
events: {
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
if (result && result.position) {
self.lng = result.position.lng;
self.lat = result.position.lat;
self.center = [self.lng, self.lat];
self.loaded = true;
self.$nextTick();
}
});
}
}
}]
};
}
};
</script>
实现效果:
二十四、自定义组件
实际开发中面对复杂业务,库中现有的几个基础组件很多时候无法满足我们的业务需求,另一个方面在于高德的sdk也在疯狂更新,一味的包装也不是长久之计,所以这里提供一个方法 -- createCustomComponent
,让用户自己开发并维护自己特定业务组件,同时也希望通过社区成员一起建设公共组件。
1、案例1
<template>
<div class="amap-page-container">
<el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
<amap-canvas-markers
:data="markerData"
:get-position="markerOptions.getPosition"
:get-hover-title="markerOptions.getHoverTitle"
:visible="markerOptions.visible"
render-constructor="PointSimplifier.Render.Canvas"
:render-options="markerOptions.renderOptions"
:events="markerOptions.events"
></amap-canvas-markers>
</el-amap>
<div class="toolbar">
<button type="button" name="button" @click="toggleVisible">toggle visible</button>
</div>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
// import {createCustomComponent} from 'vue-amap'
const { createCustomComponent } = VueAMap;
// 组件定义
const AmapCanvasMarkers = createCustomComponent({
name: 'amap-canvas-marker',
props: [
'visible',
'zIndex',
'data',
'getPosition',
'getHoverTitle',
'compareDataItem',
'autoSetFitView',
'renderConstructor',
'renderOptions',
'maxChildrenOfQuadNode',
'maxDepthOfQuadTree',
'badBoundsAspectRatio'
],
contextReady() {
console.log('context ready', AMap);
},
init(options, map) {
return new Promise((resolve, reject) => {
AMapUI.loadUI(['misc/PointSimplifier'], PointSimplifier => {
const {renderConstructor: renderStr, renderOptions } = options;
// console.log(renderStr);
if (renderStr) options.renderConstructor = renderStr.split('.').reduce((pre, cur) => pre[cur], {PointSimplifier});
if (options.renderOptions && options.renderOptions.pointStyle) {
const {pointStyle} = options.renderOptions;
if (pointStyle.contentImg) pointStyle.content = PointSimplifier.Render.Canvas.getImageContent(pointStyle.contentImg, () => this.$amapComponent.renderLater()),
e => console.error(e)
}
resolve(new PointSimplifier(options))
});
})
},
converters: {},
handlers: {
zIndex(index) {
this.setzIndex(index);
},
visible(flag) {
flag === false ? this.hide() : this.show();
}
}
});
const center = [121.5273285, 31.21515044];
const markerData = Array.from({length: 10000},(x, index) => ({position: [
center[0] + (Math.random() > 0.5 ? 1 : -1) * Math.random() * 0.6,
center[1] + (Math.random() > 0.5 ? 1 : -1) * Math.random() * 0.6
], title: `小点坐标-${index}`}));
module.exports = {
components: {AmapCanvasMarkers},
data() {
return {
zoom: 14,
center,
markerData,
markerOptions: {
visible: true,
getPosition(dateItem) {
return dateItem.position
},
getHoverTitle(dateItem) {
return dateItem.title
},
renderOptions: {
pointStyle: {
contentImg: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
width: 19,
height: 31,
offset: ['-50%', '-100%'],
fillStyle: null,
strokeStyle: null
}
},
events: {
pointClick(e, point) {
console.log('event pointClick', e, point)
},
pointMouseover(e, point) {
console.log('event pointMouseover', e, point);
},
pointMouseout(e, point) {
console.log('event pointMouseout', e, point)
}
}
}
}
},
methods: {
toggleVisible() {
this.markerOptions.visible = !this.markerOptions.visible;
}
}
}
</script>
实现效果:
2、案例2
<style>
.amap-demo {
height: 300px;
}
.container {
position: relative;
}
.tip {
background-color: #ddf;
color: #333;
border: 1px solid silver;
box-shadow: 3px 4px 3px 0px silver;
position: absolute;
top: 10px;
right: 10px;
border-radius: 5px;
overflow: hidden;
line-height: 20px;
z-index: 99;
}
.tip input {
height: 25px;
border: 0;
padding-left: 5px;
width: 280px;
border-radius: 3px;
outline: none;
}
</style>
<template>
<div class="container">
<div class="tip">
<input class="custom-componet-input" id="custom-componet-input" />
</div>
<el-amap vid="xxx" :zoom="zoom" :center="center" class="amap-demo">
<custom-map-searchbox @select="selectSearch" input="custom-componet-input" ></custom-map-searchbox>
<el-amap-marker v-if="selectMarker" :position="selectMarker.position" :label="selectMarker.label"></el-amap-marker>
</el-amap>
</div>
</template>
<script>
const customMapSearchbox = VueAMap.createCustomComponent({
props: {
input: String
},
init(options, map) {
return new Promise(resolve => {
AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'], () => {
const autocomplete = new AMap.Autocomplete(options)
AMap.event.addListener(autocomplete, 'select', (e) => {
this.$emit('select', e.poi)
});
resolve(autocomplete)
})
});
}
})
module.exports = {
data() {
return {
selectMarker: null,
zoom: 14,
center: [121.5273285, 31.21515044]
}
},
components: {customMapSearchbox},
methods: {
selectSearch(poi) {
console.log(poi)
const {location, name, adcode, district, address, } = poi
const center = [location.lng, location.lat];
console.log(center)
this.selectMarker = {
label: {content: `<div>
<div>${name}</div>
<div>${district}</div>
</div>`, offset: [20, 20]},
position: [...center]
},
console.log(this.selectMarker);
this.center = center;
}
}
}
</script>
实现效果:
3、案例3
<style>
.xxconatiner {
position: relative;
padding: 60px 10px
}
.tip {
background-color: #ddf;
color: #333;
border: 1px solid silver;
box-shadow: 3px 4px 3px 0px silver;
display: inline-block;
border-radius: 5px;
overflow: hidden;
line-height: 20px;
z-index: 99;
}
.tip input {
height: 25px;
border: 0;
padding-left: 5px;
width: 280px;
border-radius: 3px;
outline: none;
}
</style>
<template>
<div class="xxconatiner">
<custom-search @select="select">
</custom-search>
</div>
</template>
<script>
const customSearch = VueAMap.createCustomComponent({
template: `<div class="tip">
<input class="custom-componet-input" :id="id" />
</div>`,
data() {
return {
id: `custom-componet-input-${Math.random()}`
}
},
contextReady(_options) {
const options = {
..._options,
input: this.id
}
AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'], () => {
const autocomplete = new AMap.Autocomplete(options)
AMap.event.addListener(autocomplete, 'select', (e) => {
this.$emit('select', e.poi)
})
this.$amapComponent = autocomplete
})
}
})
module.exports = {
components: {customSearch},
methods: {
select(poi) {
console.log(poi)
}
}
}
</script>
实现效果:
import {createCustomComponent} from 'vue-amap'
const customComponent = createCustomComponent({
name: 'custom-component-name',
init() { // required
...
return amapInstance // required
// or
return new Promise(resolve => {
...
resolve(amapInstance)
})
...
},
converters: {
[propKey](propVal) {
return customConvert(propVal)
}
},
handlers: {
[propKey]() {
// callback
}
},
contextReady() {},
created() {},
mounted() {},
destoryed() {},
// other hooks
})
Vue.use(customComponent) // registered as a component named [custom-component-name]
以上是一个简单的组件的例子,关键函数就是 createCustomComponent(VueComponentOptionsPlus)
,返回是一个完整的 VueComponentOptions
, 入参除了具有基本的 VueComponentOptions
的相关属性外,还有以下的关键属性
名称 | 类型 | 说明 |
---|---|---|
name | String | component Name |
init | Function(options, AMapInstance) | 该 hook 是父组件vue-amap 中地图实例初始化后进行调用的, 所以依赖于父组件,该函数的作用是组件对应的高德实例进行初始化,关键步骤return componentInstance / resolve(componentInstance) ,返回个实例,异步初始化需要返回一个 Promise ,将实例 resolve 出来; |
contextReady | Fucntion | 该 hook 在组件 mounted 中并且浏览器上下文完成高德脚本加载后执行,该 hook 内部可安全使用高德API,该 hook 依赖于内部的 lazyAMapApiLoaderInstance , 请务必保证在该组件 mounted 前完成初始化函数 initAMapApiLoader 调用。该 hook 并不依赖父组件,可独立存在,适用于一些简单无交互的工具组件 |
converters | Object: {[propKey]:Function} | 对于组件原始入参的转换函数,像一些坐标类型数据需要从原始数组转为 AMap.LngLat ,本库内部内置了 position: toLngLat, offset: toPixel, bounds: toBounds 的转换 |
handlers | Object: {[propKey]: Function} | 自定义组件属性值变化后对应的回调,内置的回调指定规则是 自定义 handler -> 高德实例 set[PropKey] 方法 -> setOptions 方法 从左到右的依次判空,如果存在则指定调用该回调,注:回调函数的默认 this 是该 高德实例 |
原理其实很简单,内部 watch
了所有提前申明的 prop
,propValue 改变时执行对应回调,规则如上。自定义组件的实例上维护了有两个特殊的属性 $amap
高德地图实例(父组件为 vue-amap
才会初始化)和 $amapComponent
高德组件实例;
关于 destoryed
内置了通用的回收方法,如果不满足请务必自行回收。
二十五、地图实例 点击地图获取经纬度和具体地址
如果需要坐标转地址服务,也就是下面用到的 Geocoder
,请注意在地图初始化的时候要记得引入:
window.VueAMap.initAMapApiLoader({
key: 'YOUR_CODE',
plugin: [... 'Geocoder']
});
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo"
:center="center"
:zoom="zoom"
class="amap-demo"
:events="events">
</el-amap>
<div class="toolbar">
position: [{{ lng }}, {{ lat }}] address: {{ address }}
</div>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
return {
zoom: 12,
center: [121.59996, 31.197646],
address: '',
events: {
click(e) {
let { lng, lat } = e.lnglat;
self.lng = lng;
self.lat = lat;
// 这里通过高德 SDK 完成。
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress([lng ,lat], function(status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.regeocode) {
self.address = result.regeocode.formattedAddress;
self.$nextTick();
}
}
});
}
},
lng: 0,
lat: 0
};
}
};
</script>
实现效果:
二十六、点坐标 - 聚合
引入插件
import VueAMap from 'vue-amap';
VueAMap.initAMapApiLoader({
key: 'YOUR CODE',
plugin: [..., 'MarkerClusterer']
});
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo"
:center="center"
:zoom="zoom"
class="amap-demo"
:events="events">
<el-amap-marker v-for="marker in markers" :position="marker.position" :content="marker.content" :events="marker.events"></el-amap-marker>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
return {
zoom: 12,
center: [121.59996, 31.197646],
markers: [],
markerRefs: [],
events: {
init(o) {
setTimeout(() => {
console.log(self.markerRefs);
let cluster = new AMap.MarkerClusterer(o, self.markerRefs,{
gridSize: 80,
renderCluserMarker: self._renderCluserMarker
});
console.log(cluster);
}, 1000);
}
}
};
},
created() {
let self = this;
let markers = [];
let index = 0;
let basePosition = [121.59996, 31.197646];
while (++index <= 30) {
markers.push({
position: [basePosition[0] + 0.01 * index, basePosition[1]],
content: '<div style="text-align:center; background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
events: {
init(o) {
self.markerRefs.push(o);
}
}
});
}
this.markers = markers;
},
methods: {
_renderCluserMarker(context) {
const count = this.markers.length;
let factor = Math.pow(context.count/count, 1/18)
let div = document.createElement('div');
let Hue = 180 - factor* 180;
let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
let fontColor = 'hsla('+Hue+',100%,20%,1)';
let borderColor = 'hsla('+Hue+',100%,40%,1)';
let shadowColor = 'hsla('+Hue+',100%,50%,1)';
div.style.backgroundColor = bgColor
let size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
div.style.width = div.style.height = size+'px';
div.style.border = 'solid 1px '+ borderColor;
div.style.borderRadius = size/2 + 'px';
div.style.boxShadow = '0 0 1px '+ shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size+'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
context.marker.setContent(div)
}
}
};
</script>
实现效果:
二十七、点坐标 - 自定义内容
1、基础 content 渲染
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :vid="index" :content="marker.content"></el-amap-marker>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
const center = [121.59996, 31.197646];
return {
zoom: 12,
center,
markers: []
};
},
created() {
let self = this;
let markers = [];
let index = 0;
let basePosition = [121.59996, 31.197646];
let num = 10;
for (let i = 0 ; i < num ; i++) {
markers.push({
position: [basePosition[0], basePosition[1] + i * 0.03],
content: `content ${i}`
});
}
this.markers = markers;
}
};
</script>
实现效果:
2、template 模板渲染
支持传入 Vue
模板,支持 Vue
机制的事件绑定和状态访问。当同时设置 content
和 template
时,优先 content
。v0.4.0
开始支持。
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo1"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-marker v-for="marker in markers" :position="marker.position" :template="marker.template"></el-amap-marker>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
return {
zoom: 12,
center: [121.59996, 31.197646],
markers: [],
markerRefs: [],
source: 'click'
};
},
created() {
let self = this;
let markers = [];
let index = 0;
let basePosition = [121.59996, 31.197646];
let num = 10;
for (let i = 0 ; i < num ; i++) {
markers.push({
position: [basePosition[0], basePosition[1] + i * 0.03],
template: `<button @click="handler(${ i })">{{ source }} ${ i }</button>`
});
}
this.markers = markers;
},
methods: {
handler(index) {
alert(`${ index } - trigger`);
}
}
};
</script>
实现效果:
3、render 方式渲染 v0.4.3
开始支持。
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo2"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-marker v-for="(marker, index) in componentsMarkers" :position="marker.position" :vid="marker.vid" :content-render="marker.contentRender"></el-amap-marker>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
const BtnComponent = {
props: ['text'],
template: `<button>{{text}}</button>`
};
const center = [121.59996, 31.197646];
const componentsMarkers = [1,2,3,4].map((item, index) => {
return {
position: [center[0] + index * 0.02, center[1] + index * 0.02],
vid: `${index}-vid`,
contentRender: h => h(BtnComponent, {
props: {
text: `component ${index}`
},
style: {
background: 'rgb(173, 47, 47)',
color: '#eee'
},
nativeOn: {
click: () => this.handler(`component-${index}`)
}
})
}
});
return {
zoom: 12,
center,
markers: [],
markerRefs: [],
source: 'click',
componentsMarkers
};
},
created() {
let self = this;
let markers = [];
let index = 0;
let basePosition = [121.59996, 31.197646];
let num = 10;
for (let i = 0 ; i < num ; i++) {
markers.push({
position: [basePosition[0], basePosition[1] + i * 0.03],
contentRender: h => h('button', {
on: {click: () => this.handler(i)}}, [`source-${i}`])
});
}
this.markers = markers;
},
methods: {
handler(index) {
alert(`${ index } - trigger`);
}
}
};
</script>
实现效果:
4、slots 渲染 v0.4.5
开始支持。
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo3"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :vid="index">
<div :style="slotStyle">
<b>Hello {{ count }} times</b>
<button @click="onClick">Add</button>
</div>
</el-amap-marker>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
const center = [121.59996, 31.197646];
return {
zoom: 12,
center,
markers: [],
count: 0,
slotStyle: {
padding: '2px 8px',
background: '#eee',
color: '#333',
border: '1px solid #aaa'
}
};
},
methods: {
onClick() {
this.count += 1;
}
},
created() {
let self = this;
let markers = [];
let index = 0;
let basePosition = [121.59996, 31.197646];
let num = 10;
for (let i = 0 ; i < num ; i++) {
markers.push({
position: [basePosition[0], basePosition[1] + i * 0.03]
});
}
this.markers = markers;
}
};
</script>
实现效果:
二十八、信息窗体 - 切换
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-marker v-for="marker in markers" :position="marker.position" :events="marker.events"></el-amap-marker>
<el-amap-info-window v-if="window" :position="window.position" :visible="window.visible" :content="window.content"></el-amap-info-window>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
.prompt {
background: white;
width: 100px;
height: 30px;
text-align: center;
}
</style>
<script>
module.exports = {
data: function() {
return {
zoom: 16,
center: [121.59996, 31.197646],
markers: [],
windows: [],
window: ''
};
},
mounted() {
let markers = [];
let windows = [];
let num = 10;
let self = this;
for (let i = 0 ; i < num ; i ++) {
markers.push({
position: [121.59996, 31.197646 + i * 0.001],
events: {
click() {
self.windows.forEach(window => {
window.visible = false;
});
self.window = self.windows[i];
self.$nextTick(() => {
self.window.visible = true;
});
}
}
});
windows.push({
position: [121.59996, 31.197646 + i * 0.001],
content: `<div class="prompt">${ i }</div>`,
visible: false
});
}
this.markers = markers;
this.windows = windows;
}
};
</script>
实现效果:
二十九、点坐标 - 自定义内容
1、基础 content 渲染
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-info-window :position="window.position" :content="window.content"></el-amap-info-window>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let center = [121.59996, 31.197646];
return {
zoom: 12,
center,
window: {
position: center,
content: 'content'
}
};
},
created() {
}
};
</script>
实现效果:
2、template 模板渲染
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo1"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-info-window :position="window.position" :template="window.template"></el-amap-info-window>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
return {
zoom: 12,
center: [121.59996, 31.197646],
markers: [],
markerRefs: [],
source: 'click'
};
},
created() {
let basePosition = [121.59996, 31.197646];
this.window = {
position: [basePosition[0], basePosition[1]],
template: `<button @click="handler('hello')">{{ source }}</button>`
}
},
methods: {
handler(index) {
alert(`${ index } - trigger`);
}
}
};
</script>
实现效果:
3、render 方式渲染 v0.4.3
开始支持。
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo2"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-info-window :position="window.position" :content-render="window.contentRender"></el-amap-info-window>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
const BtnComponent = {
props: ['text'],
template: `<button>{{text}}</button>`
};
const center = [121.59996, 31.197646];
return {
zoom: 12,
center,
markers: [],
source: 'click',
window: {
position: center,
contentRender: h => h(BtnComponent, {
props: {
text: 'hello'
},
style: {
background: 'rgb(173, 47, 47)',
color: '#eee'
},
nativeOn: {
click: () => this.handler(`hello click`)
}
})
}
};
},
created() {
},
methods: {
handler(val) {
alert(`${ val } - trigger`);
}
}
};
</script>
实现效果:
4、slots 渲染 v0.4.5
开始支持。
<template>
<div class="amap-page-container">
<el-amap
vid="amapDemo3"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-info-window :position="window.position">
<div :style="slotStyle">
<b>Hello {{ count }} times</b>
<button @click="onClick">Add</button>
</div>
</el-amap-info-window>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data: function() {
let self = this;
const center = [121.59996, 31.197646];
return {
zoom: 12,
center,
count: 0,
slotStyle: {
padding: '2px 8px',
background: '#eee',
color: '#333',
border: '1px solid #aaa'
},
window: {
position: [121.59996, 31.197646]
}
};
},
methods: {
onClick() {
this.count += 1;
}
},
created() {
}
};
</script>
实现效果:
到此就结束了,累坏我了。。。
更多推荐
所有评论(0)