前言 在做基于LBS的应用中，时常会和地图打交道，最直接的解决方案，当然是去对应的地图官网找文档，然后一步步来玩。对于简单场景而言，体验应该还好，但对于一些状态多，变化频繁的复杂场景而言，不仅要时刻维护本地数据状态和地图状态同步，还要查找设置各种状态的地图API，实在是让人头疼的事情。 设计vue-amap的初衷，也就是为了让开发者，在编写地图应用时，能从查找众多地图API和繁琐的地图状态同步中解脱出来。 那么vue-am...
最近工作中需要H5上传显示图片的功能，如图：直接上代码： html部分 <div class="works-wrap"> <div class="figure-box" id="figure_box"></div> <div class="add-btn"> <input type="file" id="imgUploadBtn" /> <a href="javascript:void(0);" rel="external nofollow" ><i></i>添加作品</a></div> </div> </div> 我这边用css将input[type=file] 设置成了opticy:0; 这样可以看起来更像原生的上传。 var addWork = { add: functi...
Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中...
今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif:再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml--> <button style="margin:30rpx;" bindtap="chooseimage">获取图片</button> <image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/> 2.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { tempFilePaths: }, onLoad: function () { }, chooseimag...
缘由： 由于项目需要实现一个根据省市区+详细地址的路径进行查询地址的功能。 所用技术：百度地图API+jQuery 实现步骤： 1.省市区三级联动（ps：已经忘记这个小插件的出处的） 引入area.js /* * 全国三级城市联动 js版 */ function Dsy(){this.Items = {}; } Dsy.prototype.add = function(id,iArray){this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){if(typeof(this.Items[id]) == "undefined") return false;re...
最近做了一个项目，这个项目中需要实现的一个功能是：用户自定义头像（用户在本地选择一张图片，在本地将图片裁剪成满足系统要求尺寸的大小）。这个功能的需求是：头像最初剪切为一个正方形。如果选择的图片小于规定的头像要求尺寸，那么这整张图片都会作为头像。如果大于规定的尺寸，那么用户可以选择要裁剪的区域。用户点击确定按钮，就将裁剪得到的图片数据发送到服务器，在后端将图片数据保存成一个文件。 要完成上述功能，涉及...
相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marker移动就像“僵尸跳”一样，一蹦一蹦的给客户看分分钟鄙视你到不能自已。另外如果用的是有指向性图标ICON的时候，更会引来吐槽~诶诶诶，你这小车车怎么在这个立交桥转弯的时候车头向着后面呢？怎么搞得嘛你！会不会弄啊你！ 所以今天参照百度大大提供的路书开源...
利用node接收到的ip数组组装url后对百度地图api发送请求并返回请求结果数组给前端 1. 前端代码部分（jquery） 重要步骤： 1> 引用百度地图 2> 实例化百度地图，添加相关缩放控件，设置主图 3> 重写http请求，设置contentType并对请求数据作转化为json对象处理 4> 发送请求数据，将请求结果转化成可处理对象 5> 根据响应结果的经纬度进行定位，添加默认覆盖物和iplabel <script type="text/javascript" src="http://api.map.baidu.c...
微信小程序 使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案，拿来给大家分享一下！使用起来非常简单，就是一些功能还有待完善。官方文档：http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤： 申请开发者密钥（key）：申请密匙下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0安全域名设置，需要在微信公众平台添加域名地址https://apis.map.qq.com小程序示例// 引入S...
JavaScript API v2.0介绍 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用，包含了构建地图基本功能的各种接口，提供了诸如本地搜索、路线规划等数据服务。 该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。 JavaScript API首家支持Https，如需要申请Https服务，请您认证企业信息，成为企业认...
本文给大家分享百度地图api之百度地图退拽标记点获取经纬度的实现方法，具体代码如下所示：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html, #allmap { width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; } #l-map { height: 500px; w...
微信小程序 高德地图SDK： 简介 微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述、POI和实时天气数据。功能介绍账号与Key的申请 注册成为高德开发者需要分三步：第一步，注册高德开发者；第二步，去控制台创建应用；第三步，获取Key。1注册高德开发者 2创建应用 3获取API key 获取API Key入门指南 最后更新时间: 2017年1月9日本指南是使用微信小程序SDK的快速入门指南。第 1 步：下载并安装微信小程序开发工具按照微信小...
这个需求的效果类似下面的截图，主要还是利用百度地图中自定义控件的功能，挺简单的。文档地址在这 http://lbsyun.baidu.com/index.php?title=jspopular效果图：代码 <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html{width: 100%;height: 100%;margin:0;font-fami...
微信小程序 地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber 中心经度latitudeNumber 中心纬度scaleNumber1缩放级别markersArray 标记点coversArray 覆盖物 标记点 标记点用于在地图上显示标记的位置，不能自定义图标和样式属性说明类型必填备注latitude纬度Number是浮点数，范围 -90 ~ 90longitude经度Number是浮点数，范围 -180 ~ 180name标注点名String是 desc标注点详细描述String否 覆盖物 覆盖物用于在地图...
话不多说，随小编一起看看实例代码吧 <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></s...