腾讯地图开源组件

发布时间:2019-06-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了腾讯地图开源组件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

react-qmap -- React腾讯地图组件

一个对腾讯web地图简单封装的React组件

GITHub码地址:戳我

栗子:戳我

栗子源码:戳我

@H_360_18@demo截图

安装

yarn add react-qmap  
or npm install react-qmap

基础用法

import ReactQMap from 'react-qmap';

<ReactQMap 
    center={{latitude: 30.53786, longitude: 104.07265}} 
    initialOptions={{zoomControl: true, mapTypeControl: true}} 
    apiKey="xxxxxx-xxxxx-xxxxx-xxxxxx"
    style={{height: 300}}    // 高度和度默认占父元素的100%
/>

API

Method Type Optional Default Description
getMap function false 获取地图的对象和当前容器的map对象,第一个参数是new的当前map对象,第二个参数是全局map对象
style object false 设置组件的内联样式,默认样式width: '100%', height: '100%'
classname string false 设置组件的class
mySpot object false 设置地图的定位坐标
initialOptions object false zoom: 14,disableDefaultUI: true, zoomControl: false,mapTypeControl: false, 初始化地图的参数,简单默认设置了几个,更多的初始化参数请参照文档
apiKey string true 设置地图引用的key,为止限制调用API,建议官网申请自己的key
center object true 设置地图初始化的中心位置坐标

关于

有了初始化的地图,获取到地图对象之后,就可以按照官网提供的资料随心所欲了。

更多关于API的操作请查看腾讯地图官网(戳我

简单的封装了一块原石,封装还在继续,如果老铁有更好的方式或想法不妨PR走起一波~会给你双击666

如果有问题可加入前端交流群一起讨论:前端攻城狮②群:592688854

license

MIT

脚本宝典总结

以上是脚本宝典为你收集整理的腾讯地图开源组件全部内容,希望文章能够帮你解决腾讯地图开源组件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。