高德地图 JS API - 根据经纬度获取周边建筑地标

像我们经常用的微信或微博,发表动态时都有选择位置的功能,根据当前的定位获取附近的地标.利用高德地图我们就可以实现这样的功能. 1. 具体代码: // 高德地图查询周边 function aMapSearchNearBy(centerPoint, city) { AMap.service(["AMap.PlaceSearch"], function() { var placeSearch = new AMap.PlaceSearch({ pageSize: 10, // 每页10条 pa…

高德地图 js api 使用

使用高德地图js api 制作网页上的地图应用. 1.先申请一个开发者用的 key . 2. 在页面中引入高德提供的地图js <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key"></script> 完成以上两步就可以在页面中加载高德地图了. 注意设置地图容器的大小: <!DOCTYPE HTML> <html> <head> <meta…

高德地图 JS API - 根据地名实现标记定位

德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位,主要依赖高德地图的:地理编码与逆地理编码.下面来看具体的实现代码: 1. HTML (地图容器) <div class="map-container" id="container"></div> 2. JAVASCRIPT function m…

高德地图JS API 开发小结

项目中有一块功能要用到高德地图,所以,想把编码小结一下. 首先是地图的初始化 var map = new AMap.Map("mapDiv", { zoom: 17,//设置地图的缩放比例 center: [112.57, 37.87],//地图中心 resizeEnable: true //是否监控地图容器尺寸变化 …

高德地图JS API获取经纬度，根据经纬度获取城市

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>输入提示后查询,点击获取坐标</title> <style type="text/css"> #mapContainer{ position: absolu…

高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)

-*- 父页面js function mapFocus(){ //console.log("-*-"); var longitude = mini.get("jd").getValue(); // 经度 var latitude = mini.get("wd").getValue(); // 纬度 var url = "<%=basePath %>project/construction/Map.jsp"; //…

高德地图JavaScript API开发研究

高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API 提供了大量的实用工具和富有特色的插件功能,并提供了搜索和路线规划等服务. 1.首先 2.然后 3.最后就是看官方文档开发高德地图API使用介绍:http://lbs.amap.com/api/javascript-api/guide-2/map_show/ 直接上代码: <!DOCTYPE htm…

在谷歌地图上绘制行政区域轮廓【结合高德地图的API】

实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百度地图的API来绘制行政区域,不太准确,很不推荐.(1)百度地图查询行政区域本身不准确,有的地方本来应该属于该区,被划分到其他区了(2)即使要用百度api,也要注意转换坐标,因为百度,谷歌坐标系不同.贴段转换代码 var x_pi = Math.PI * 3000.0 / 180.0; //将 BD…

腾讯地图JS API实现带方向箭头的线路Polyline

最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图JS API不支持线路画方向.于是否就利用地图的Marker类配合旋转来实现这个功能. 实现原理因为是利用Marker来实现Polyline带方向箭头功能,所以要根据线路不同局部的具体走向来旋转Marker的Icon,从而实现该功能. 另外,我们需要知道: Marker的旋转方向是跟时针方向保持一…

高德地图Javascript API设置域名白名单

在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的Key值,高德开放平台提供了设置应用Key值调用域名白名单的功能,非白名单的域名调用直接报错,这样就做到了限制他人盗用你的高德地图Javascript API的Key值. (1)首先登陆高德开放平台,进入管理页面后,在应用管理里面选择我的应用. (2)选择对应的设置后,在域名白名单处填写对应的域名信息…

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

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

高德地图 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 则是占据网站的一部分构建具有地图各种功能且由用户控制交互效果…

web端高德地图javascript API的调用

[转载https://www.cnblogs.com/zimuzimu/p/6202244.html]web端高德地图javascript API的调用关于第三放地图的使用,腾讯.百度.高德具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lbs.amap.com/api/javascript-api/summary/ 使用方法 1.注册成为高德地图开发者,创建应用后申请key. 2.引…

关于百度地图js api的getCurrentPosition定位不准确的解决方法

很久之前帮大叔解决了一个gps坐标转换为百度地图坐标的问题.今天大叔又给我讲百度地图定位不准.我查了一下api,用了官方给出的这样一组函数. //创建查询对象 var geolocation = new BMap.Geolocation(); //调用getCurrentPosition函数 geolocation.getCurrentPosition(function (position) { //如果查询成功 if (this.getStatu() == 'BMAP_STATU_SUCCES…

百度api:根据经纬度获取地理位置信息

调用百度api,根据经度和纬度获取地理位置信息,返回Json. C#代码: using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Net.Http; public class LocationService { //百度api private static string url = @"http://api.map.baidu.com/geocoder/v2/?location={0}&…

【原创】web端高德地图javascript API的调用

关于第三放地图的使用,腾讯.百度.高德具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lbs.amap.com/api/javascript-api/summary/ 使用方法 1.注册成为高德地图开发者,创建应用后申请key. 2.引入高德地图API <script type="text/javascript" src="http://webapi.amap.…

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…

使用高德地图JS获取当前位置和经纬度

先看效果,我做的是这样的,可以按地图位置来返回当前你点的位置(图一,二),也可以根据输入框的自动搜索(图三,四) HTML的代码: <div> <input type="text" id="keyword" name="keyword" value="" onkeydown='keydown(event)'/> <div id="result1" name="resu…

调用高德地图web api 规划路线

实现地图输出,出发地与目的地路线,效果如下具体代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-sc…

百度地图和高德地图的API视频教程

学习地址: http://www.houdunren.com/houdunren18_lesson_152?vid=10228 素材地址: https://gitee.com/houdunwang/video 第二课:学习笔记: 一.js引入百度地图 http://lbsyun.baidu.com/index.php?title=jspopular/guide/show 登陆上面的网址创建一个浏览器端应用获取自己的密钥 <script type="text/javascrip…

高德地图定位api以及导航和定位位置的偏差

在高德地图应用api，和api展出的标记小的应用程序

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>自己定义点标记图标</title> <link rel="stylesheet" type="text/css" href="htt…

Android端高德地图点击得到经纬度

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_select_point&q…

百度地图JS API不能使用position:fixed

用于放置百度地图的dom元素及其任何一级父元素设置position:fixed属性时,js会报如下错误: Uncaught TypeError: Cannot read property 'offsetLeft' of null 解决办法:对地图使用position:absolut模拟fixed样式. 若要实现地图背景固定,前面列表滚动的样式,对前面列表使用overfollw-y:scroll.对其设置下面样式可以隐藏滚动条: ::-webkit-scrollbar { width:; back…

百度地图 JS API开发Demo01

百度地图DEMO <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>百度地图Demo…

百度地图 js api 实现 line 居中显示

项目中有个需求需要在百度地图的中心显示画的线,以前用过mapPanto这个方法,传入坐标就可以将地图平移到这个坐标,不过不知道如何获取线的中心点,看了别人的代码,有以下两个函数可以实现这个功能 getbounds 返回地图可视区域,以地理坐标表示. 通过这个方法可以获取 line的四个角点坐标 setViewport(view:Array<Point>|Viewport[, viewportOptions: ViewportOptions]) 根据提供的地理区域或坐标设置地图视野,调整后的…

C#百度api 根据经纬度获取地址

public string GetAddress(string lat, string lng) { try { string res = ""; string url = @"http://api.map.baidu.com/geocoder/v2/?ak=ZndyfXErtTiZQwfgNgQ7yqb7ALKdk4DA&location=" + lat + "," + lng + "&output=xml"…

在高德地图上用svg.js绘制简单图形

这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层支持canvas.svg.甚至dom,这里我用的是svg,多说无益,上代码. 一.高德地图以下的步骤在官方文档中都有,而且官方文档比较齐全. 首先需要去高德API官网申请自己的key,此步略过. 拿到key后在页面中引入地图所用的js js <script type="text/javasc…

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…

高德地图 API 计算两个城市之间的距离

1. 目前在项目中,遇到一个需求不会做,就是要计算两个城市之间的距离,而这两个城市的输入是可变的,如果要使用数据库来先存储两地之间的距离,调用的时候再来调用,那么存数据的时候,要哭的,因为光是省级区域,目前就是34个省级行政区,两个城市之间的距离,就是取任意两地之间的距离,那么按照排列组合的分析,就要有 34*33 = 1122 种排列组合方式,每个省有若干个城市,那这工作量就大了,所以需要寻找一种更为方便的方法来求两个城市之间的距离2. 先看下需求:两个城市之间的距离,在数学中,两点之间的距离…

【高德地图 JS API - 根据经纬度获取周边建筑地标】的更多相关文章