Vue2 地图组件库,基于四维地图minemap SDK 封装
组件使用了coordtransform去转换经纬度,所以也要下载
``shell`
npm i v-minemap coordtransform
`js`
import Vue from 'vue'
import {initMap} from 'v-minemap'
// 初始化地图,要在new Vue之前
initMap({}).then(() => {
if (!window.minemap) {
throw new Error('地图 SDK 加载失败')
}
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
import('v-minemap').then(({default: VMinemap}) => {
Vue.use(VMinemap)
})
})
`js
import {VMap, VMarker} from 'v-minemap'
export default {
components: {VMap, VMarker}
}
`
- 如果控制台没有报错,但是地图没有显示,请检查宽高是否设置正确,可参考:
`js
// App.vue
`
- 使用组件的页面设置宽高为100% 可参考:
`js
:config="config"
:map-options="mapOptions"
@mapClick="mapClick"
>
:visible="show"
:geo-data="jsonData"
:option="option"
/>
style="
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
z-index: 999;
"
@click="clusterClick"
>
切换
``