更新记录

1.0.2（2024-08-23）

地图组件支持：添加marker，点击marker回调事件，清除marker，地图加载成功回调事件，拖拽地图后回调事件，将地图中心移动到指定经纬度，获取当前地图可视区域中心的坐标

1.0.0（2024-07-05）

1.0.0（2024-07-02）

功能演示包括：当前定位、地图选点、搜索位置、路线规划、电子围栏、实时轨迹

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

【GMap谷歌地图原生插件】使用说明

一、重要说明

1. 支持与问题【官方客服】QQ：12667877，547947313。
2. 使用GMap谷歌地图需要谷歌地图API_KEY，在manifest.json中的App原生插件配置中添加该插件，然后填写至map_api_key_android。
3. 使用GMap谷歌地图需要科学上网，否则无法正常使用。
4. 原生插件定制可联系客服。

二、快速开始

2.1 配置API_KEY

在manifest.json中的App原生插件配置中添加该插件，然后将申请的谷歌地图API_KEY填写至map_api_key_android

2.2 示例代码

引入插件：sanyuan-GMapView为component实现的组件，可根据需要使用；需要通过 uni.requireNativePlugin("sanyuan-GMapModule") 获取 module

<template>
    <view class="content">
        <sanyuan-GMapView ref="googleMap" class="map" :style="{ height: height + 'px' }" @onMapReady="onMapReady"
            @onMarkerClick="onMarkerClick" @onCameraIdleListener="onCameraIdleListener"></sanyuan-GMapView>
        <button @click="addMarker"><text>addMarker</text></button>
        <button @click="clearMarker"><text>clearMarker</text></button>
        <button @click="moveToLocation"><text>moveToLocation</text></button>
        <button @click="getCenterLocation"><text>getCenterLocation</text></button>
        <button @click="gotoBasicMap"><text>Module示例演示</text></button>
    </view>
</template>

<script>
    // 获取 module 
    var mapModule = uni.requireNativePlugin("sanyuan-GMapModule");
    export default {
        data() {
            return {
                height: 600,
            }
        },
        onLoad() {
            this.height = uni.getSystemInfoSync().windowHeight - 148;
        },
        methods: {
            onMapReady(e) { //地图加载成功回调事件
                console.log('onMapReady', e.detail);
            },
            gotoBasicMap() {
                console.log('gotoBasicMap');
                mapModule.gotoBasicMapPage();
            },
            addMarker() {
                let lat = 24.48762088722435;
                let lng = 118.17254886031152;
                let markers = []
                for (let i = 0; i < 10; i++) {
                    let offset = i / 60;
                    lat = lat + offset;
                    lng = lng + offset;
                    markers.push({ //除经纬度外其余
                        tag: 2022 + i, //可作为marker的唯一标记，double类型
                        latitude: lat, //必须设置经纬度才会显示marker
                        longitude: lng,
                        title: "Title " + i,
                        snippet: "Snippet " + i,
                        iconPath: "_www/static/logo.png", //marker图标的路径，需将对应图片放置在对应路径下
                    })
                }
                this.$refs.googleMap.addMarker(markers);
            },
            moveToLocation() {
                uni.getLocation({
                    type: 'wgs84',
                    success: (res) => {
                        console.log('longitude=', res.longitude);
                        console.log('latitude=', res.latitude);
                        this.$refs.googleMap.moveToLocation({
                            longitude: res.longitude,
                            latitude: res.latitude,
                            zoom: 15,
                        });
                    }
                });
            },
            clearMarker() { //清除图面上marker
                this.$refs.googleMap.clearMarker();
            },
            onMarkerClick(e) { //marke点击回调事件
                console.log('onMarkerClick', e.detail);
            },
            getCenterLocation() { //获取地图中心点坐标
                this.$refs.googleMap.getCenterLocation((res) => {
                    console.log("getCenterLocation", res);
                });
            },
            onCameraIdleListener(e) {
                console.log('onCameraIdleListener', e.detail);
            }
        }
    }
</script>

2.3 方法说明

以下方法为component组件sanyuan-GMapView的方法

2.3.1 addMarker

let lat = 24.48762088722435;
let lng = 118.17254886031152;
let markers = []
for (let i = 0; i < 10; i++) {
  let offset = i / 60;
  lat = lat + offset;
  lng = lng + offset;
  markers.push({ //除经纬度必填外其余可选
    tag: 2022 + i, //可作为marker的唯一标记，double类型
    latitude: lat, //必须设置经纬度才会显示marker
    longitude: lng,
    title: "Title " + i,
    snippet: "Snippet " + i,
    iconPath: "_www/static/logo.png", //marker图标的路径，需将对应图片放置在对应路径下
  })
}

this.$refs.googleMap.addMarker(markers);

2.3.2 clearMarker

this.$refs.googleMap.clearMarker();

2.3.3 moveToLocation

this.$refs.googleMap.moveToLocation({//经纬度必填，缩放等级zoom可选
    longitude: res.longitude,
    latitude: res.latitude,
    zoom: 15,
});

2.3.4 getCenterLocation

this.$refs.googleMap.getCenterLocation((res) => {
    console.log("getCenterLocation", res);
});

三、插件声明

1. 购买本插件前，请先试用，并充分自测确认满足需求之后再行购买。一经购买，概不退还。
2. 如有使用上的疑问、bug或者要求定制插件，可以QQ（12667877，547947313）联系客服。
3. 本插件支持定制，定制费用另算。
4. 本插件不开源，请在合法范围内使用，若使用本插件做非法开发，本方概不负责。