添加右键菜单，首先我们要监听鼠标右键点击的操作，我们知道鼠标右键事件名是 contextmenu，当鼠标在 html 元素之上，点击鼠标右键，便会触发 contextmenu 事件，在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可。那么在 openlayers 中，在地图中添加这个事件，我们从哪里下手呢？首先我们得了解 openlayers 的初始化页面的过程。 openlayers 初始化页面过程openlayers 也是一个前端库，那么它肯定离不开 html 的运用，...
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标_javascript技巧前言近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GPS数据以及地图匹配.主要问题和解决方法本地保存文件跨浏览器支持由于安全的原因,JavaScript本地保存文件的方式通常都只有IE支持的ActiveXObject/Open...
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S vue-amap然后在 main.jsimport VueAMap from vue-amap; //注意不要和 AMap原始名称覆盖 Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({// 高德的keykey: you key,// 插件集合plugin: [AMap.Autocomplete, AMap.PlaceSearch, AM...
前言 今天在做新需求的时候发现个很尬的问题：我们项目的小程序是直接输入账号密码进行登录的，不是平常的获得用户授权登录的模式，所以当我使用wx.getLocation一直拉不下来授权一直进fail不去success的时候我开始慌了 我以为是由于这个登录模式不同导致，然后我就开始疯狂骚扰我的小伙伴，问是不是这种登录模式会拉不到用户授权（在这里感谢我的小伙伴们没打死我，反而认真给我解惑），后来我清了下开发者工具缓存就能拉下...
一、在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件，想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件： 1. 小程序是企业主体，微信 web-view 组件不对个人类型的小程序开放。 2. 您需要有一个自己的域名，在嵌入网页的时候需要在微信后台验证域名（只有自己域名下的网页才能被正确地显示哦，不能随便找一个公开链接）。二、具体实现步骤 1、域名验证： 由于微信平台...
1.map组件的高度如果想要铺满屏幕，要是使用height:100vh样式 2.获取位置要在app.json中标明权限 3.先使用wx.getLocation获取自己的位置，然后再回调中使用setData方法，赋予数据给前台页面展示标注点 index.js //index.js //获取应用实例 const app = getApp() Page({data: {},onLoad: function () {var self=this;this.mapCtx = wx.createMapContext(myMap);wx.getLocation({type: gcj02,success(res) {self.setData({latitude :...
前言 项目中需要根据坐标定位，将自己的实现过程写下来，废话不多说，上代码 正文 <script> var map,marker; export default {data(){return{arriveCoor:[108.947025,34.2613255],//坐标点arrive:"",//位置信息}},mounted() { mapDraw(this.arriveCoor),mapCoor(this.arriveCoor)},methods:{mapDraw(arriveCoor){map = new AMap.Map(map-location, { //map-location是嵌地图div的idresizeEnable: true, //是否监控地图容器尺寸变...
环境搭建注册，获取APPID（没有这个不能真鸡调试）下载微信web开发者工具（挺多bug，将就用）打开微信web开发者工具，扫码登录，新建小程序，输入APPID，勾选创建quick start项目。工程结构可以看到工程根目录中有个app.js，这里可以定义全局变量，通过getApp()获取。 项目中有了一些示例，已经有了获取用户信息的方法等。 开发地图定位，选择位置功能 我们直接修改index页面来做这个功能。 准备 新建imgs目录，加入2个图标（ic_lo...
如何获取用户当前地址，这个就要先用到小程序的定位功能:定位官方文档第一步获取当前定位在js当中写运行项目之后会有个这样的弹窗：这是因为开发者需要说明获取用户地理位置的用途。解决方法：在app.json中增加permission属性。这样就可以获取到用户的地理坐标了。第二步讲当前定位转换程地址信息这个功能需要用到腾讯地图SDK：官方文档官方文档上使用SDK的步骤写的挺详细的，还带上了各种链接：第4步的安全域名设置在你自己的小程...
前言 最近项目中做到相关网约车小程序。需要使用到地图中的路线规划，对3种地图进行了分析。这里稍微做一下总结： 百度地图 百度坐标 （BD-09）腾讯地图 火星坐标(GCJ-02)高德地图 火星坐标(GCJ-02)微信小程序中使用的是腾讯地图作为底图。因此如果使用百度地图时，需要注意坐标的转换。此类坐标的转换函数在网上都有，这里不做过多解释 准备工作： 1、在做小程序 ---- 路线规划之前，需要准备小程序APPID 以及相应使用地图的KEY值...
背景在小程序中使用map组件，可以调用腾讯地图的API，将一些固定的点标记到地图界面上，点的经纬度获取是通过android端百度地图API获取的，所以此时将这个位置点信息直接设置上去会出现偏差，而且偏差还比较大 小程序设置位置点关于如何在map组件上设置位置点，详细请查看腾讯官方文档 首先看一下map组件： <map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="contro...
百度地图的经纬度放到腾讯地图里面解析地址，导致位置信息显示不正确，所以利用腾讯地图提供的API进行转换。 如果没有开发密钥（key），就到腾讯地图官方文档进行申请和下载qqmap-wx-jssdk.js腾讯地图官方文档 申请步骤填写信息wxml代码<map id=map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" show-location bindmarkertap=map_details scale="16" bindtap=open_map_details></map>js代码// 引入SD...
注：本文基于上一篇文章【Vue-Cli 3.0 中配置高德地图 】 ，采用直接引入高德 SDK 的方式来使用高德地图api 一、效果图二、组件要实现的功能 1. 如果有传入坐标点，则定位到坐标点 2. 如果没有传入坐标点，则定位到当前所在位置 3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动 标记 来调整定位点 5. 标记 拖动后，右侧要显示拖动后的经纬度和地址 6. 点击确定按钮，返回最后的坐标点和地名给父组件 三、 组件实现具体代码<t...
vue 中使用高德地图有两种方式 一、vue-amap 组件 官网： https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的，但是尝试之后存在些问题，所以就放弃了，可能是我的使用方式不对。我所遇到的问题： 1. 安装之后使用，始终提示跨域问题。 2. 页面刷新之后地图出不来，第一次进入页面时没问题。因为这两个问题所以放弃了这个组件的使用。我想可能是我哪个地方代码有问题。 二、直接引用高德地图 SDK 因为...
如果博客是使用Hexo管理的，sitemap可以使用插件来生成。但对于一个内容管理网站，后端可能是express、koa之类的框架，这时sitemap就需要自己来生成了 什么是sitemapSitemap可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的Sitemap形式，就是XML文件，在其中列出网站中的网址以及关于每个网址的其他元数据（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等），以便搜索引擎可以更加智能...