0.0.6 • Published 6 years ago
map-div v0.0.6
地图( JavaScript API 版本)初始化
使用
- 兼容高德、腾讯、Google 地图、百度地图
import createMap from 'map-div';
createMap(mapConfig, divId).then(map => { do something with initialized map instance });
/* using map global Class:
1. window.XMap / XMap
2. or map native syntax:
AMap: AMap; QMap: qq.maps; GMap: google.maps; BMap: BMap.
*/
createMap 函数说明:
- 参数:
mapConfg:地图加载和初始化参数。 divId:要挂载的 div 的 id。
- 返回值:
包含地图实例的 Promise。
mapConfig 格式以及使用说明如下:
const defaultMapsConfig = {
AMap: {
name: 'AMap', // 地图的类型,(此为高德地图), required
url: '//webapi.amap.com/maps', // optional
key: 'YOUR_AMAP_API_KEY', // 您申请的地图应用的 API_KEY,required
version: '1.3', // 地图版本, optional
initOpts: { // 初始化参数。注意,不同地图参数格式不一样,optional(google 地图 required)
center: [116.396776, 39.917549],
zoom: 11,
},
query: { // url 上的其他参数加载在此,如 plugin, optional
plugin: 'AMap.Geocoder',
},
mapInstancePath: ['AMap'], // Don't modify this property!!!
},
GMap: {
name: 'GMap', // 谷歌地图
url: '//maps.google.cn/maps/api/js',
key: 'YOUR_GOOGLE_MAP_API_KEY',
version: 3,
initOpts: { // 初始化参数,仅对于 Google 地图,下面两个参数是必须的。
center: { lat: 39.917549, lng: 116.396776 },
zoom: 11,
},
mapInstancePath: ['google', 'maps'],
},
QMap: {
name: 'QMap', // 腾讯地图
url: '//map.qq.com/api/js',
key: 'YOUR_QQ_MAP_API_KEY',
version: '2',
mapInstancePath: ['qq', 'maps'],
},
BMap: {
name: 'BMap',
url: '//api.map.baidu.com/api',
key: 'sOGPcGGAouF9uDiCLGXtNKPcKhhgOrHN',
version: '2.0',
mapInstancePath: ['BMap'],
},
}
- 库中使用了 ES2017 的 async 和 await,只是对文件进行了简单的 babel 转换,所以可能要在引入该库的工程中加入相应的转换插件和依赖库。
$ npm install --save-dev babel-plugin-syntax-async-functions
原理
加载地图类 Map 到浏览器中
创建并初始化地图实例,将地图实例绑定到一个 DOM 节点(通常是 div 元素)作为地图的容器。
调试
挂载 AMap 类到浏览器时,用的是无协议 url。
const src = `${url}?v=${version}&key=${key}&callback=${mapCallback}`;
需要通过 url 访问,不能直接 open index.html。
方法:
$ webpack-dev-server
通过 http://localhost:8080/webpack-dev-server/index.html
也可以使用 ecstatic
打包、发布 npm
- 打包
$ npm run build
- 发布
$ npm publish