Ionic2系列——在Ionic2中使用高德地图

之前讲过了如何在Ionic2中使用第三方库,因为第三方库必须针对TypeScript提供相应的声明文件——即d.ts文件,才能被TypeScript正确识别并编译.好在大多数的第三方库已经有了定义文件,可直接通过以下命令安装: npm install @types/theLibraryName --save 这样就可以解决大多数第三方库的引入问题,如上一篇博客中提到的ECharts组件. 那么如果某个第三方库没有对应的d.ts怎么办呢?除了自己手写d.ts之外,TypeScript也提供了一种比…

Vue-Cli 3.0 中配置高德地图

vue 中使用高德地图有两种方式一.vue-amap 组件官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存在些问题,所以就放弃了,可能是我的使用方式不对.我所遇到的问题: 1. 安装之后使用,始终提示跨域问题. 2. 页面刷新之后地图出不来,第一次进入页面时没问题.因为这两个问题所以放弃了这个组件的使用.我想可能是我哪个地方代码有问题. 二.直接引用高德地图 SDK 因为第一种方式尝试失败了,所以我选择…

Vue组件篇——Vue3.0中使用高德地图

VUE-CLI 3.0 中配置高德地图在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值高德开放平台:https://lbs.amap.com/ 2.在Vue-Cli中public下的index.html加入script 标签 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你申请的key…

reactjs中使用高德地图计算两个经纬度之间的距离

第一步下载依赖 npm install --save react-amap 第二步,在组件中使用 import React, { Component } from 'react' import { Link } from 'react-router-dom' import { Map, Marker } from 'react-amap'; export default class Page1 extends Component { constructor(){ super(); this.to…

react中使用高德地图的原生API

干货,无话 1.react-create-app,创建新react项目 2.npm install react-amap,引入高德地图的封装 3.编写组件index.js import React from "react"; import ReactDOM from "react-dom"; import Map from "./Map3"; let mapData = { city: "北京", mapCenter:[116…

vue-cli2.X中引入高德地图，将其设为全局对象

平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可,在vue-cli 2.X构建的项目中,需要用如下方式引入高德地图: 首先在高德地图开放平台中注册开发者账号并获取key,传送门:https://lbs.amap.com/api/javascript-api/guide/abc/prepare 接下来在cli项目根目录下的index.html中的<header>标签中用script标签引入 <script type="text/javascript…

在vue中使用高德地图vue-amap

1.安装 vue-amap我安装指定版本0.5.10的版本 npm i --save vue-amap@0.5.10 2.main.js中的配置 key申请地址教程:https://lbs.amap.com/api/javascript-api/guide/abc/prepare // 高德离线地图 import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ // 高德key key: 'd6eabb…

在vue中使用高德地图开发，以及AMap的引入？

百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap", 'AMap': 'AMap' }, 其次新建一个AMap.js 引入 export default function MapLoader () { // <-- 原作者这里使用的是module.exports return new Promise((resolve, reject) =&g…

Ionic2系列——在Ionic2中使用ECharts

在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话TypeScript是认不出来的,无法编译通过.下面以百度的ECharts图表为例,演示一下使用第三方库的用法. 1.安装ECharts 首先需要使用npm安装ECharts,输入以下命令: npm install echarts --save 安装完毕后可以看到node_modules目录下多了e…

android：在APP中显示高德地图SDK

一.搭建环境参考资料:http://lbs.amap.com/api/android-sdk/guide/create-project/android-studio-create-project 1)新建一个工程: 2)到高德开放平台申请key, 其中获取调试版sha1可以参考:http://lbs.amap.com/api/android-sdk/guide/create-project/get-key 但是发布版的SHA1则要参考:http://blog.cs…

vue项目中使用高德地图（根据坐标定位点）

前言项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码正文 <script> var map,marker; export default { data(){ return{ arriveCoor:[108.947025,34.2613255],//坐标点 arrive:"",//位置信息 } }, mounted() { mapDraw(this.arriveCoor), mapCoor(this.arriveCoor) }, methods:{ ma…

高德地图车机版API演示程序

高德地图车机版API演示程序做车载的应该和这个程序打交道打的比较多吧,这里是我今天写的一个实现了他的API的一个演示程序首先我们来看下他的官网. http://lbs.amap.com/api/amapauto/#id004 相对于其他的api来说,这个api已经相对挺完善的,如果想使用这个车机版地图,你需要去下载一些资源包,放在对应的位置然后联网激活,这些就不详细的说明了概述高德地图车机版(amap auto)第三方调用API是为整车厂.前后装主机厂.系统方案商.开发者等,提供的在自己…

VUE组件之高德地图地址选择

注:本文基于上一篇文章[ Vue-Cli 3.0 中配置高德地图] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2. 如果没有传入坐标点,则定位到当前所在位置 3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动标记来调整定位点 5. 标记拖动后,右侧要显示拖动后的经纬度和地址 6. 点击确定按钮,返回最后的坐标点和地名给父组件三. 组件实现具体代码 <template> <div cla…

Android 高德地图 java.lang.UnsatisfiedlinkError Native method not found: com.autonavi.amap.mapcore.MapCore.nativeNewInstance:(Ljava/lang/String;)

在Android项目中引用高德地图,程序运行时出现上述问题,如果引用了Map3D的jar包,则需要在引入Jar文件的同时引入so文件,在高德地图的demo中,找到so文件: 然后将其复制到jniLibs中而jar文件则可以直接添加进Libs文件夹中即可. 更多信息可以参考以下文章: 1. http://www.androidchina.net/3380.html Android Studio工程放在jniLibs/ABI目录中(当然也可以通过在build.gradle文件中的设置jniLibs…

高德地图 JavaScript API 开发系列教程（一）

高德地图 API 提供包括 Web API 即 JavaScript API,Android API,定位API,IOS API,WP API,Win8 API等,本系列教程主要针对高德 JavaScript API,希望与开发者们共同进步. 地图JavaScript API 是由 JavaScript 语言编写的应用程序接口,通常是嵌入到HTML中使用.HTML 配合 CSS 主要控制网页布局和样式,地图JavaScript API 则是占据网站的一部分构建具有地图各种功能且由用户控制交互效果…

Ionic2系列——Ionic 2 Guide 官方文档中文版

最近一直没更新博客,业余时间都在翻译Ionic2的文档.之前本来是想写一个入门,后来觉得干脆把官方文档翻译一下算了,因为官方文档就是最好的入门教程.后来越翻译越觉得这个事情确实比较费精力,不知道什么时候能完成,就先把完成的部分放出来,避免其他人再重复劳动了. 地址:https://www.gitbook.com/book/yanxiaodi/ionic2-guide/details 这个文档不是严格的翻译官方文档,开始几章是自己写的.到组件那章基本上就是翻译了,有时候也会加一点自己踩过的坑.我在…

高德地图 JavaScript API 开发系列教程（二）

上节简单介绍高德地图JavaScript API及网页中基本地图展示.有了地图后我们可以用来做什么?有人说离我最近的超市在哪里,我怎么去?别急,这些功能我们后面都会慢慢实现.今天为大家详细讲解如何在地图上留下标记,你可以在地图任意位置添加一个点,也可以把你的位置标记上去.在地图上做一个标记,标记做在哪里,用什么东西做标记是你来决定的.高德JavaScript API提供了点的三个属性{position, icon, map}分别记录点的位置,点的样子,将点放到地图.下面看看如何在地图上做标记吧-…

百度地图和高德地图结合在web中的使用（二）

百度地图在web中的使用(二) 背景:在做一个关于地理位置字段时,初始位置使用百度地图获取时失败,获取的位置信息不准确,奈何产品说友商好使的啊,F12看后是采用的高德,所以在这采用高德地图获取初始位置,其他的还是用百度地图注册高德,创建实例,获取key值引入js 高德地图获取获取当前位置: //获取当前位置 function getCurrentLocation(){ var gdmap, geolocation; //加载地图,调用浏览器定位服务 gdmap = new AMap.Map(…

Android编程高德地图中如何重写定位按键的触发事件（com.amap.api.maps2d.LocationSource）点击定位后不仅定位在地图中心点上而且可以设置地图的缩放大小和提示

在利用高德地图来编写自己的APP的时候,发现了一种对定位按键的重写方法,那就是利用 com.amap.api.maps2d.LocationSource 接口来重写. 什么是定位按键呢,下图中右上角那个就是. import com.amap.api.maps2d.AMap; private AMap aMap;//地图控制器对象 //aMap 为地图控制器对象aMap.getUiSettings().setMyLocationButtonEnabled(true);//地图的定位标志是否可…

Android 编程 AMapLocationClientOption 类中的 setMockEnable （高德地图 com.amap.api.location.AMapLocationClientOption 中的类）

setMockEnable 高德地图中 AMapLocationClientOption 中有一个方法是设置APP是否接受模拟定位的设置,就是方法 setMockEnable //设置是否允许模拟位置,默认为false,不允许模拟位置mLocationOption.setMockEnable(false); 根据文档上的意思,就是说这个方法如果设置为false,或者默认情况下,都是不允许该 APP 进行模拟位置获得的, 如果设置为 true ,则是可以接受模拟定位的. 本人使用的是华为荣耀8手机…

Android 编程 AMapLocationClientOption 类中的 setNeedAddress 方法用处（高德地图 com.amap.api.location.AMapLocationClientOption 中的类）

最近在用高德地图来写Android App, 其中有一些方法是不太理解的,这里写一下对高德地图 com.amap.api.location.AMapLocationClientOption 中的类 AMapLocationClientOption 中的 setNeedAddress 方法用处. public AMapLocationClientOption mLocationOption = null; //设置是否返回地址信息(默认返回地址信息)mLocationOptio…

Android编程高德地图 AMapLocationClientOption 类中 setWifiActiveScan过时

高德地图中定位包中有以下方法: AMapLocationClientOption 类中 setWifiActiveScan 过时 isWifiActiveScan public boolean isWifiActiveScan() 已过时. 是否主动刷新WIFI 默认值:true 主动刷新模式为仅设备定位(Device_Sensors)时无效返回: true:主动刷新 false:被动刷新从以下版本开始: 2.0.0 setWifiActiveScan public AMap…

Bing Maps进阶系列八：在Bing Maps中集成OpenStreetMap地图

Bing Maps进阶系列八:在Bing Maps中集成OpenStreetMap地图 OSM(OpenStreetMap-开放街道地图)服务就是一种发布自己地图数据图片为服务的一种实现类型,开放街道地图成立动机在于希望能创造并且提供可以被自由地使用的地理资料(像街道地图)给每个想使用的人,就像自由软体所赋予使用者的自由一样,本篇将介绍如何在Bing Maps Silverlight Control开发中去使用OSM发布的地图服务. 要在Bing Maps Silverlight Control…