思极地图使用

思极地图api文档:思极地图开放平台 | 思极地图API SDK

思极地图SDK:



使用:

 // 先登录思极地图   参数一:你申请的appKey   参数二:你申请的appSecret
    SGMap.tokenTask
        .login('b30439a9f65cd58****', 'c01b3da73be****')
        .then(function () {
            // 使用的插件
            SGMap.plugin([
                'SGMap.DrivingPlusTask',
                'SGMap.AutoCompleteTask',
                'SGMap.TransferPlusTask',
                'SGMap.WalkingPlusTask',
                'SGMap.PlaceSearchPlusTask',
                'SGMap.AutoCompletePlusTask',
                'SGMap.GeocodingPlusTask',
                'SGMap.RidingPlusTask',
                'SGMap.ConvertTask'
            ]).then(function (res) {
                 initMap() // 初始化地图
            })
        })



const initMap = () => {
    state.map = new SGMap.Map({
        // 地图绑定的DOM元素ID
        container: 'map',
        // 地图样式
        /**
     *
     * Streets-v2 标准底图
        StreetsDark-v2 夜景深色底图
        StreetsLight-v2 浅色背景底图
        Road-v2 路网图层,用于搭配影像使用
     */
        style: 'aegis://styles/aegis/Streets-v2',
        // 默认缩放层级
        zoom: 12,
        // 地图中心点
        center: [119.40254477720839, 32.405878369200224],
        // 地图默认字体
        localIdeographFontFamily: 'Microsoft YoHei',
        transition: {
            duration: 0,
            delay: 0
        }
    })

    // 地图加载后的方法
    state.map.on('load', function () {

        // 当地图加载完成 才 展示左侧的列表
        state.showList = true
    })

    // 地图的点击事件
    state.map.on('click', function (e) {
        console.log(e, 'EEE')
    })
    setTimeout(() => {
        addFill() // 添加 地图阴影
        addCity() // 添加城区的边界
}

你可能感兴趣的:(前端)