npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

map-pick-position

v0.0.2

Published

腾讯地图选点

Downloads

4

Readme

功能描述

地图拾取,仅限于地图拾取功能,未方便用户快速定位坐标使用, 不具备其他,例如: 圈区域,画路线等特定功能

地图打标记(pointType)分为如下3类

  • 地图初始化, 根据用户经纬度(模糊定位, 不一定会准确), 打标记 init
  • 通过搜索框搜索, 会获取到 最多 20条记录, 会进行打标记 search
  • 用户在地图上点击, 打标记 click

使用

<template>
    <div>
        <!-- 地图选点组件 -->
        <pick-map-position
            v-if="isShowMapModal"
            :isShowMapModal.sync="isShowMapModal"
            :defaultPosition='defaultPosition'
            @updatePosition="updatePosition"
            appKey='开发者key'
        />
    </div>
</template>

<script>
import PickMapPosition from './xxxx/pick-map-position'

export default {
    components: {
        PickMapPosition
    },

    data() {
        return {
            isShowMapModal: false,
            defaultPosition: {
                lat: 'xxx',
                lng: 'xxx'
            },

            // 用户自己场景下的对象
            formModel: {
                lng: '',
                lat: ''
            }
        }

    },
    methods: {
        updatePosition(data) {
            this.formModel.lng = data.lng
            this.formModel.lat = data.lat
            this.isShowMapModal = false
        }
    }
}
</script>

slot - label

<template>
    <div>
        <!-- 地图选点组件 -->
        <MapPickPostion
            v-if="isShowMapModal"
            :isShowMapModal.sync="isShowMapModal"
            :defaultPosition='defaultPosition'
            @updatePosition="updatePosition"
            appKey='开发者key'
        >
            <template #label='{data}'>
                <div>组件内的数据</div>
            </template>
        </MapPickPostion>
    </div>
</template>

代码结构说明

- index.vue 组件主入口
- events.js 所有的事件注册
- registerPlugins.js 所有的控件注册
- index.less 部分简单的样式

组件属性

| 参数 | 类型 | 默认值 | 描述 | |-------------------|---------|-------|-----------------------------------------------| | mousemovePosition | Boolean | false | 鼠标移动,实时在旁边展示经纬度 | | limitPOI | Boolean | false | 点击的点存在 poi信息,才会提示, 默认false,则 打开的信息弹窗是没有『名称』的 | | appkey | String | | 腾讯地图开发者key | | isShowMapModal | Boolean | false | 是否显示腾讯地图 推荐父组件调用使用 v-if, 避免维护弹窗内部状态 | | defaultPosition | Object | | 打开地图默认的经纬度, 传入一个对象 {lat: 2, lng: 12.22} |

组件方法

| 方法名 | 回调参数 | 描述 | |----------------|----------|------| | updatePosition | lat | 纬度 | | | lng | 经度 | | | province | 省 | | | city | 市 | | | district | 区 | | | addr | 具体位置 | | | adcode | 行政ID |

rollup插件版本说明

  • rollup-plugin-vue vue2.x使用5.x版本 vue3使用6.x版本