更新记录

1.3.0（2023-07-03）

本次主要更新： 1.ios 修复 map 组件有些方法回调问题 2.增加 直接使用ref，来设置map组件

1.2.0（2023-02-23）

本次主要更新： 1.增加module组件，

1.1.0（2022-09-01）

本次主要更新： 1.增加andorid版本

平台兼容性

原生插件通用使用流程：

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原生插件配置”->”云端插件“列表中删除该插件重新选择

KJ-MapMultiPoint

海量点、官方nvue高德地图扩展

注意事项

manifest.json -> app模块配置 -> Maps -> 高德地图 勾选

使用

<template>
    <view class="content">
        <map id="map" class="map" ref="map" :scale="map.scale" @regionchange="regionchange" @tap="tap">
        </map>
        <button type="primary" @click="init">初始化</button>
        <button type="primary" @click="initMultiPoint">初始化海量点</button>
        <button type="primary" @click="addMultiPoint2">添加全国点</button>
        <button type="primary" @click="removeMultiPoint2">去除全国点</button>
        <button type="primary" @click="addMultiPoint3">添加10万个点</button>
        <button type="primary" @click="removeMultiPoint3">去除10万个点</button>
        <button type="primary" @click="getAllIdentifier">获取所有identifier</button>
        <button type="primary" @click="removeAllMultiPoint">去除所有海量点</button>
        <button type="primary" @click="removeMultiPoint">根据identifier去除海量点</button>
    </view>
</template>

<script>
    import {
        GetMapData
    } from "@/common/Datas.js"
    var map;
    const img = '/static/logo.png';

    const KJMapMultiPoint = uni.requireNativePlugin('KJ-MapMultiPoint');

    export default {
        data() {
            return {
                map: {
                    id: 1,
                    scale: 2,
                    latitude: 39.865246,
                    longitude: 116.378517
                },
                identifier: null,
                identifier2: null,
                mapCount: 0
            };
        },
        onLoad() {

        },
        onReady() {
            setTimeout(() => {
                this.init();
                this.onMultiPointClick();
            }, 500)
        },
        methods: {
            regionchange(e) {
                console.log('当视野发生改变:' + JSON.stringify(e));
            },
            tap(e) {
                console.log('地图点击:' + JSON.stringify(e));
            },
            init() {
                KJMapMultiPoint.init((res) => {
                    console.log("init:" + JSON.stringify(res))
                    this.initMultiPoint();
                })
            },
            onMultiPointClick() { //监听海量点，点击事件
                KJMapMultiPoint.onMultiPointClick((res) => {
                    console.log('onMultiPointClick' + JSON.stringify(res));
                });
            },
            restore() {
                KJMapMultiPoint.restore();
            },
            initMultiPoint() {
                var datas = GetMapData();
                var data = new Array();
                for (var i = 0; i < datas.length; i++) {
                    var dic = datas[i]
                    data.push({
                        "latitude": dic["lnglat"][1],
                        "longitude": dic["lnglat"][0],
                    })
                }

                var pointItems = new Array();
                for (var i = 0; i < data.length; i++) {
                    var dic = data[i]
                    pointItems.push({
                        "latitude": dic.latitude,
                        "longitude": dic.longitude,
                        "customID": "" + i,
                        "title": "标题" + i
                    })
                }

                var arr = [{
                    "nvue_ref": this.$refs.map.ref,
                    "identifier": new Date().getTime() + "",
                    "pointItems": pointItems,
                    "overlay": {
                        "iconPath": plus.io.convertLocalFileSystemURL("../../static/logo.png"),
                        "pointSize": {
                            "width": 10,
                            "height": 10
                        },
                        "anchor": {
                            "x": 0.5,
                            "y": 0.5
                        }
                    },
                }]
                //初始化也可以创建点位，传数组即可
                KJMapMultiPoint.initMultiPoint(arr, (res) => {
                    console.log("initMultiPoint:" + JSON.stringify(res));
                }, (res) => {
                    console.log("addMultiPoint:" + JSON.stringify(res));
                });
            },
            addMultiPoint(pointItems, identifier, iconName) {
                plus.nativeUI.showWaiting("正在添加...", {
                    back: 'none'
                });
                var dic = {
                    "nvue_ref": this.$refs.map.ref,
                    "identifier": identifier,
                    "pointItems": pointItems,
                    "overlay": {
                        "iconPath": plus.io.convertLocalFileSystemURL("../../static/" + iconName),
                        "pointSize": {
                            "width": 10,
                            "height": 10
                        },
                        "anchor": {
                            "x": 0.5,
                            "y": 0.5
                        }
                    },
                }
                KJMapMultiPoint.addMultiPoint(dic, (res) => {
                    console.log("addMultiPoint:" + JSON.stringify(res));
                    plus.nativeUI.closeWaiting();
                });
            },
            addMultiPoint2() {
                var datas = GetMapData();
                var data = new Array();
                for (var i = 0; i < datas.length; i++) {
                    var dic = datas[i]
                    data.push({
                        "latitude": dic["lnglat"][1],
                        "longitude": dic["lnglat"][0],
                    })
                }

                var pointItems = new Array();
                for (var i = 0; i < data.length; i++) {
                    var dic = data[i]
                    pointItems.push({
                        "latitude": dic.latitude,
                        "longitude": dic.longitude,
                        "customID": "" + i,
                        "title": "标题" + i
                    })
                }
                this.identifier = new Date().getTime() + "";
                this.addMultiPoint(pointItems, this.identifier, "logo.png");
            },
            removeMultiPoint2() {
                var dic = {
                    "nvue_ref": this.$refs.map.ref,
                    "identifier": this.identifier
                }
                KJMapMultiPoint.removeMultiPoint(dic, (res) => {
                    console.log("removeMultiPoint:" + JSON.stringify(res));
                });
            },
            addMultiPoint3() {
                var positions = []
                var latitude = 39.482877
                var longitude = 73.236261
                for (var i = 0; i < 100000; i++) {
                    var newlatitude = latitude + Math.random() * 20;
                    var newlongitude = longitude + Math.random() * 50;
                    positions.push({
                        latitude: newlatitude,
                        longitude: newlongitude,
                    })
                }
                var pointItems = new Array();
                for (var i = 0; i < positions.length; i++) {
                    var dic = positions[i]
                    pointItems.push({
                        "latitude": dic.latitude,
                        "longitude": dic.longitude,
                        "customID": "" + i,
                        "title": "标题" + i
                    })
                }
                this.identifier2 = new Date().getTime() + "";
                this.addMultiPoint(pointItems, this.identifier2, "marker_blue.png");
            },
            removeMultiPoint3() {
                var dic = {
                    "nvue_ref": this.$refs.map.ref,
                    "identifier": this.identifier2
                }
                KJMapMultiPoint.removeMultiPoint(dic, (res) => {
                    console.log("removeMultiPoint:" + JSON.stringify(res));
                });
            },
            getAllIdentifier() {
                var dic = {
                    "nvue_ref": this.$refs.map.ref,
                }
                KJMapMultiPoint.getAllIdentifier(dic, (res) => {
                    console.log("getAllIdentifier:" + JSON.stringify(res));
                });
            },
            removeAllMultiPoint() {
                var dic = {
                    "nvue_ref": this.$refs.map.ref,
                }
                KJMapMultiPoint.removeAllMultiPoint(dic, (res) => {
                    console.log("removeAllMultiPoint:" + JSON.stringify(res));
                });
            },
            removeMultiPoint() {
                var dic = {
                    "nvue_ref": this.$refs.map.ref,
                    "identifier": this.identifier
                }
                KJMapMultiPoint.removeMultiPoint(dic, (res) => {
                    console.log("removeMultiPoint:" + JSON.stringify(res));
                });
            }
        }
    };
</script>

<style>
    .map {
        width: 750rpx;
        height: 500rpx;
    }
</style>