最近用百度地图api做项目，需要同时在地图显示marker与Polyline，且Polyline需要根据点击来显示或清除，所以遇到了清除指定覆盖物的问题，各种搜索后未能找到完美的解决方法，通过自己思考，摸索了一方法能解决这个问题，发出来给大家分享。好了，进入正题： 清除覆盖物有两个方法：map.removeOverlay()或者 map.clearOverlays()，clearOverlays()方法一次移除所有的覆盖物，removeOverlay()一次移除一个指定覆盖物，显然，我要一次...
本文实例讲述了微信小程序实现打开内置地图功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.wxml布局文件代码 <button type="default" bindtap="openMap">打开地图</button>index.js逻辑文件代码 Page({openMap:function(){wx.getLocation({type: gcj02, // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标success: function(res){// successwx.openLocation({latitude: res.latitude...
前言 本文主要介绍Three.js的开发基础和基本原理，以及如何实现3D全景图。想在web端实现3D全景图的效果，除了全景图片、WebGL外，还需要处理很多细节。据我所知，目前国外3D全景图比较好的是KrPano，国内很多3D全景服务是在使用krpano的工具。 前段时间连续上了一个月班，加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中，坑不少，做了一下总结分享。 Three.js 基于简化WebGL开发复杂度和降低入门难度的目的...
利用百度地图API可以做很多事情，个人感觉最核心也是最基础的就是定位功能了。这里分享一个制作的JS可以实现登录网页后定位： <script type="text/javascript"> var map; var gpsPoint; var baiduPoint; var gpsAddress; var baiduAddress; var x; var y; function getLocation() { //根据IP获取城市 var myCity = new BMap.LocalCity(); myCity.get(getCityByIP); //获取GPS坐标 if (navigator.geolocation) { navigat...
百度地图插件安装CDN全局安装<script src="https://unpkg.com/vue-baidu-map"></script>插件的引入Vue.use(VueBaiduMap.default, {ak: YOUR_APP_KEY, })ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apico... 地图视图BmView 是用于渲染百度地图实例可视化区域的容器 使用 Bmview 渲染一个地图实例： <template id="baidu"> <baidu-map class="map"><bm-view style="position: absolute; top: 60px; botto...
前言 raphael.js是一个很小的javascript库，它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能。此外raphael.js还跨浏览器兼容，而且还兼容老掉牙的IE6啊。raphael.js的官网地址： http://raphaeljs.com/ 因为最近的项目要用到中国地图，我需要的比较轻量级，所以没用echarts，选择的这个地图。 效果图方法如下： 1、安装npm install --save raphael2、直接上代码<template><div id="map"></div>...
微信小程序 本地图片按照屏幕尺寸处理 前言： 个人感觉微信小程序的IDE用起来有时候不太方便，可能是之前用惯了Eclipse的原因吧。微信小程序的开发工具不支持直接将文件拷贝到目录下，所以首先要将图片文件导入到本地目录下，然后编写工具类获取屏幕的宽度和高度，具体步骤如下图。1、本地图片导入步骤一：选择最左侧的菜单中的项目步骤二：选择打开后将图片直接拷贝到新建的image文件夹下图片导入完成后，项目的整体目录结构如下图...
如何拖拽文件到指定位置，具体方法如下 在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上代码 完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #dropBox{ width: 300px; height: 300px; border:1px solid red; font-size: 40px; text-align: center; background: lightyellow; background-repeat: no-repeat; background-size: 100%...
微信小程序 开发MAP（地图）实例详解 在创建MAP（地图）前，请各位小伙伴们认真的去了解微信小程序开发的说明。 https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP（地图）里的属性之后，接下来我们就来创建一个简单的MAP（地图）控件。 第一步：肯定是创建项目、起项目名、项目地址 PS:我这里以index的文件为名 第二步：我们来写 index.wxml 文件的代码 WXML文件代码： <map id="map4select" longitud...
前言：在之前的博客中，有成功引入高德地图，这是以前的地址 vue 调用高德地图。 因为一些需求，需要使用到地图的周边功能。 完整的项目代码请查看 我的github 一 、先看要实现的结果，参考了链家的周边，如图所示。 二 、原理分析 1、引入高德api，这个在之前的博客提到过，vue 调用高德地图。 2、使用地图的周边插件，这是 高德网站的api。 AMap.PlaceSearch //地点搜索服务插件，提供某一特定地区的位置查询服务在插件中的各...
前言 微信小程序地图操作比较简单，api也很少，使用map组件来展示。说到地图，那就先来看基础定位： 定位用到wx.getLocation(OBJECT)函数，代码如下： wx.getLocation({type: wgs84,success: function(res) {var latitude = res.latitudevar longitude = res.longitudevar speed = res.speedvar accuracy = res.accuracy} })定位成功会返回四个参数值，如下： map属性太多，先看一下： 如果用到地图，基本上所有属性都会用到。 下面...
微信小程序 地图map实例详解wxml： class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位 longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" style="width: 100%; height: 300px;margin-top:30px"> js： //获取应用实例 var app = getApp() Page({ data: { latitude: 0,//纬度 longitude: 0,//经度 speed: 0,//速度 accuracy: 16,//位置精...
javascript 开发之百度地图使用到的js函数整理 接项目用到的地图，客户要求用百度地图，没办法只好用百度地图，这里总结一下，写的一些函数，注释比较详细！ //创建和初始化地图函数： function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMarker();//向地图中添加marker } //创建地图函数： function createMap(){ var map = new BMap.Map("container");//在百度地图容...
最近刚开始接触微信小程序，在弄懂其结构以及相关接口之后，准备着手实现一个小程序，功能包括--获取用户当前位置的经纬度，在地图上查看位置，通过地图获取不同位置的经纬度。 微信小程序的主体部分包括：新增页面需要在app.json进行配置："pages":["pages/index/index","pages/location/location","pages/logs/logs"]通过在视图层调用bindtap与逻辑层中的方法匹配--实现页面跳转： 视图层<view class="location" bindtap="locati...
一. vue-amap，一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了，按照其文档，就能够安装下来。 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件externals: {AMap: AMap}2.引入sdk引入有两种方式，一种是页面直接引入代码如下: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 还有一种是异步加载 <script src="ht...