首页 > TAG信息列表 > AMap

uni-app中调用高德地图去设置点和轨迹

盒子部分 <view style="width: 100%; height: 100%" id="busContainer"> </view> 样式部分 .originImg { width: 72rpx; height: 100rpx; img { width: 100%; height: 100%; } } .origin-title { font-size: 23rpx; font-f

Vue集成地图第三方插件

基础 说明 组件集成OpenLayers,Leaflet,高德地图API将地图操作封装为统一出入口,方便程序快速切换地图模式。 安装 npm安装 目前只支持npm安装方式 npm i map-integration 1. 采用leaflet模式 安装leaflet npm install --save leaflet esri-leaflet proj4leaflet 配置全局 l

[LBS学习笔记4]地理特征POI、AOI、路径轨迹

1 简述 今天继续LBS地理信息的学习,目标是写到10篇博客的时候,做出一个地图工具页面用,包含地图空间索引Geohash、S2、H3的可视化展示。 地理特征分为点(POI)、线(路径)、面(AOI),我们用高德地图导航时,其实就用到了这3个特征,简单说一下 首先搜索目的地:三里屯,会搜到一个面数据,就是整个三里屯

WebGIS开始

  1. 开始准备   申请key和安全密钥,https://lbs.amap.com/,在高德API申请安全密钥和key   2. 引入高德API,使用内置类AMap <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten

Vue - Amap高德地图初始化使用以及行政区域聚合功能(script引入方式)

  一、引入高德JSAPI //在项目根目录下的模板index.html中引入下面2个JSAPI <head> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.DistrictSearch,AMap.Scale,AMap.MarkerClusterer"></script

Nginx代理高德API(无法地图选点)

前端高德地图无法地图选点 nginx直接拦截/amap转发(转发地址为当前使用的高德API版本地址) server { listen 80; server_name www.test.com; client_max_body_size 1024M; location / { proxy_set_head

前端系列——vue2+高德地图web端开发(poi搜索两种方式)

前端系列——vue2+高德地图web端开发(poi搜索) 前言基础什么是poi搜索 1. 输入提示结合poi搜索官方代码步骤1.进行plugins插件注册2.data中编写placeSearch变量3.在methods中编写select函数4.在initMap函数中增加poi搜索处理逻辑解释 2.直接进行poi搜索步骤1.在Search.vue

高德地图开放API

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Document</title> <!--

Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制(转载)

高德API:https://lbs.amap.com/api/javascript-api/summary   1.在index.html里面引入高德地图js文件 2.引入后直接可以在vue组件里面使用(创建initMap方法,在mounted 钩子函数中调用) mounted(){ this.initMap() }, initMap(){ let that = this this.map = new A

vue 高德地图API,定位,搜索,拖拽选址(转载)

 index.html,body中引入全局api <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'你的秘钥', } </script> <script type="text/javascript" src="https://webapi.amap.com

高德地图自定义信息窗体 添加marker 点击列表切换marker

绘制地图 initMap() { this.map.mapObject = new AMap.Map("mapContainer", { center: [this.lng, this.lat], zoom: this.zoom, resizeEnable: true, rotateEnable: true,

sync.Once concurrent map iteration and map write map并发读写

  var AMap AMapS var once sync.Once func confCV(r *bizRepo) { // TODO once.Do(func() { b := r.data.confTODOBootstrap.DomainSonypathoid json.Unmarshal(b, &AMap) r.log.Info("once") }) // r.log.Info("once-skip") }     

vue使用高德地图

index.html引入标签 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key"></script> vue.config.js(需自己创建,根目录下) module.exports = { devServer: { port: 57103 // 端口号配置 }, configureWebp

uniApp获取用户位置信息两种方法

1、使用uni.chooseLocation获取用户信息 uni.chooseLocation({ success: (res) => { console.log('位置名称:' + res.name); console.log('详细地址:' + res.address); console.log('纬度:' + res.latitude); co

vue中使用高德地图POI

一、使用AMap-Vue 地址:坐标拾取工具 | AMap-Vue 安装 yarn add @amap/amap-vue # 或 npm install --save @amap/amap-vue 二、引入在main.js import AmapVue from '@amap/amap-vue' AmapVue.config.version = '2.0' // 默认2.0,这里可以不修改 AmapVue.config.key = '申请的key

前端项目使用高德API,创建地图,撒点,自定义标记点样式,点击点位展示信息提示窗体

最近项目开发中遇到了高德地图自定义点的样式,点击展示信息窗体的需求。做个总结! 初始化地图展示点和点击展示信息窗体 我们用的Vue开发的,所以在这儿我用Vue中例子来说! 1、html标签创建地图放置的容器 //要给地图添加宽高属性 <div id="container" class="map" tabindex="0"></d

vue2使用高德地图及高德地图UI

一、引入高德地图和ui库    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.DistrictSearch"></script> AMap.DistrictSearch参数为了搜索某个区域 <script src="//webapi.amap.com/ui/1.1/

flutter集成高德地图遇到的坑

1,按照官方文档通过AMapWidget属性的方式设置"key" ///先将申请的Android端可以和iOS端key设置给AMapApiKey static const AMapApiKey amapApiKeys = AMapApiKey( androidKey: '您申请的Android端key', iosKey: '您申请的iOS端key'); 发现找不到AMapApiKey类 解决:

vue-amap地图组件上的折线以及高德地图经纬度的引入

1.如何在项目中安装组件 首先在你的项目中打开控制台运行下面的代码 npm install vue-amap --save 然后在项目中的src文件夹里创建一个文件夹plugins,里面创建一个index.vue的文件,用来装vue-amap主键的方法 这个index.vue里面这样写: import Vue from 'vue' import VueAMap from '

react项目中引用amap

在调用amap的 Geocoder Api 时,一直不能从AMap对象下找到Geocoder 。 结果在网上看到一个博客说的是,在index中引入链接时,需要在链接上配置plugin=AMap.Geocoder, 才能够在AMap调用Geocoder Api <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key='

在vue中使用高德地图,获取定位

第一步:在index.html中引入标签 <script src = 'https://webapi.amap.com/maps?v=2.0&key=高德的密钥'></script> 第二步:在vue.config.js中进行相应的配置 module.exports = { configureWebpack: { externals: { AMap: 'AMap' // 高德地图配

处理vue3.x在高德地图1.x版本无法正常使用的问题

码云仓库(开源插件) 缩放或者放大地图就会报错,报错信息如下: 官方解决方法:升级2.x版本,但是2.x版本卡的跟PPT一样,暂时不能使用 经测试得出解决方案: // 高德地图1.x版本在vue3的巨坑,不能声明成vue响应式对象 let map= null; const initMap = async () => { const AMap = await

高德地图绘制纯文本、绘制maker及给其绑定事件方法、绘制区域方法小结

我们常需要利用高德地图在地图图层上面绘制文本、maker等内容,有必要小结一下; 情形一:绘制纯文本 封装方法如下: addText( textData, style = { "font-size": "12px", color: "#fff", backgroundColor: "transparent", border: "

跳转高德地图 网页版

changeMap() { var self = this; AMap.plugin(["AMap.PlaceSearch"], function () { //构造地点查询类 var placeSearch = new AMap.PlaceSearch({ pageSize: 1, // 单页显示结果条数 pageIndex: 1, // 页码 }); //关键

vue中使用高德地图

1. npm install vue-amap --save   2. 再main.js中   import VueAMap from 'vue-amap';   Vue.use(VueAMap);    // 初始化vue-amap VueAMap.initAMapApiLoader({ // 高德的key key: 'YOUR_KEY', // 插件集合 plugin: ['AMap.Autocomplete', '