web集成高德地图

1、使用高德地图API需到官网添加一个Key,http://lbs.amap.com/dev/key/app

2、页面头引入


<div id="addressMap"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=申请的key值"></script>

3、js里面代码如下:

// 新建高德地图对象
    var map = new AMap.Map("addressMap", {               // 填写ID
        center: [114.1827800000, 22.3060300000],         // 经纬度
        zoom: 17         // 放大系数
    });

    // 增加高德地图插件
    AMap.plugin(
        ["AMap.ToolBar", "AMap.Geolocation"],
        function () {
            //异步加载插件
            var toolbar = new AMap.ToolBar();
            map.addControl(toolbar);
            var geolocation = new AMap.Geolocation();
            map.addControl(geolocation);
            var marker = new AMap.Marker({
                position: [114.1827800000, 22.3060300000],
                title: ‘某地方‘,
                topWhenClick: true,
                visible: true,
                animation: ‘AMAP_ANIMATION_BOUNCE‘,
                clickable: true,
                label: {content: ‘<span style="color:rgb(0,0,0);">某地方</span>‘}
            });
            map.add(marker);
        }
    );

具体API请到官网查看: http://lbs.amap.com/api/javascript-api/summary

原文地址:https://www.cnblogs.com/peter-web/p/9204460.html

时间: 2024-10-14 02:53:46

web集成高德地图的相关文章

iOS 集成高德地图无法定位问题

1.最近的一个项目需要地图定位,.之前使用高德地图可以定位,最近的这个项目,又一次需要集成时,却无法定位.郁闷一上午.后来仔细检查,发现问题所在原因: 之前集成高德地图我是手动配置的,这一次我选择了自动配置,使用cocopods命令方式,集成的.最终发现原因是: 需在info.plist中追加NSLocationWhenInUseUsageDescription或NSLocationAlwaysUsageDescription字段 OK,解决无法定位问题

jsp页面集成 高德地图

高德地图页面HTML代码 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="initial-scale=

【原创】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.

(转)深入理解最强桌面地图控件GMAP.NET ---高德地图

前一篇介绍了GMAP.NET的理论基础,这篇介绍如何集成高德地图.高德地图自从为IOS6提供地图后,目前已经被大众所熟知了. 在我集成国内地图的经验来看,也是最符合墨卡托投影法的. 前面的相关文章链接: 深入理解最强桌面地图控件GMAP.NET --- 原理篇 深入理解最强桌面地图控件GMAP.NET --- SOSO地图 深入理解最强桌面地图控件GMAP.NET --- 百度地图 深入理解最强桌面地图控件GMAP.NET --- 初用 深入理解最强桌面地图控件GMAP.NET --- 初识 如

Android笔记:百度地图与高德地图坐标转换问题

Android笔记:百度地图与高德地图坐标转换问题 安卓项目使用了百度地图的定位SDK,web端使用的也是百度地图, 后来发现界面显示百度地图不如高德效果好,web改用高德地图,原本的百度地图坐标是可以直接使用的,由于高德和百度地图的坐标系不一致 要如何转换呢. 补充了下坐标系知识后发现高德使用的坐标系是“gcj02”也就是大家所说的“火星坐标”, 百度使用的是“BD09”因为是百度所用大家习惯称之为“百度坐标”  ,如何将bd09转为gcj02呢,突然想到在百度的定位sdk里有这样一段说明(来

2017高德地图API WEB开发(key申请,地图搭建)简约教程

前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去"高德地图开发平台" 通过"百度搜索 "或者"谷歌搜索 " 高德地图然后会有一个高德开发平台|高德地图apl 2.登录高德开发平台 这是高德开发平台的官网,然后点击登录,没有注册就好 3.进入控制台创建新应用 进入控制台之后选择"应用管理"然后点

iOS判断并使用百度地图 高德地图 导航 (使用URI,不集成sdk)

[objc] view plaincopy  1. BOOL hasBaiduMap = NO;   2.         BOOL hasGaodeMap = NO;   3.            4.         if ([[UIApplication sharedApplication]canOpenURL:[NSURL URLWithString:@"baidumap://map/"]]){   5.             hasBaiduMap = YES;   6.

高德地图和canvas画图结合应用的一些感想(一)

之前朋友委托有个创业项目,想让我帮忙,正好那段时间有点闲,半推半就中就答应下来了. 入了团队才发现,该项目前后端分离,后端工程师已就位主要实现接口,IOS端工程师也已就位,还差一个web前端工程师.背脊一凉,我之前虽然写过一些js和css,虽有点功底但是离前端工程师还是有距离的啊.在和朋友说明情况后,朋友也是胆大,让我试试,主要他实在找不到人了(也有可能目前前端工程师报价都太贵了,创业嘛,能节约就节约,能理解...),没办法,走一步算一步吧. 其他管理页面都还好,主要Dashboard需要在地图

高德地图api实现地址和经纬度的转换(python)

利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo/ 1.利用python第三方库requests实现 Requests库文档地址:http://www.python-requests.org/en/master/ 1 #!/usr/bin/env python3 2 #-*- coding:utf-8 -*- 3 ''' 4 利用高德地图api实