精华内容
下载资源
问答
  • html前端使用高德地图入门教程,并在地图上标记位置
    万次阅读 多人点赞
    2019-04-09 17:29:17

     

    准备工作

       注册Key

    1. 首先,注册开发者账号,成为高德开放平台开发者

    2. 登陆之后,在进入「应用管理」 页面「创建新应用」

    3. 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

    4. 记住这个Key,等会要用,以后可能也会用,一定要记住。 

     

     页面上的准备

    1. 新建一个DIV,作为地图的容器(这一步和使用其他插件一样,必须新建一个挂载点)。
    2. 给这个新建的div设置好宽高(这里提醒一下,可以使用弹性布局,没有影响)。
    3. 在body后面引入高德地图的js。
    4. 最后,异步初始化高德地图插件,一定要异步,使用window.onLoad。(去获取标记点的经纬度)

        【注】 高德地图Api入门指南 

    <!-- 二、设置宽和高-->
    <head>
        <style>
    	    #container{
    		    width: 500px;
    		    height: 500px;
    	    }
        </style>
    </head>
    
    <body>
        <!-- 一、新建一个容器 -->
        <div id="container" ></div>
    </body>
    
    <!--三、引入高德地图的js-->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>
    
    <!--四、异步初始化高德地图插件-->
    <script>
    	//初始化地图插件
    	window.onload = function(){
    	    var map = new AMap.Map("container", {
                zoom: 15, //设置地图显示的缩放级别
                center: [116.44927, 39.9584] //设置地图中心点坐标
             });
    
             // 创建一个 Marker 实例:(标记点)
            var marker = new AMap.Marker({
               position: new AMap.LngLat(116.44927, 39.9584), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
               title: "位置标题"
            });
    
           // 将创建的点标记添加到已有的地图实例:
           map.add(marker);
    	}
    </script>

     

    好了,现在你的页面上已经出现了高德地图

    更多相关内容
  • 创建地图-百度地图生成器 一、打开百度地图生成器的网址 ... 可以看出官方给出了两个步骤:...name接下来咱们一起看一下从创建真实代码中是如何使用的。 二、创建地图 (一)定位中心点 定位中心点:这个功能就是执...

    创建地图-百度地图生成器

    一、打开百度地图生成器的网址

    网址:http://api.map.baidu.com/lbsapi/creatmap/

    在这里插入图片描述
    可以看出官方给出了两个步骤:
    第一步:创建地图
    第二步:获取代码
    特别的简单。动动鼠标,点点地图就可以做到了少写几百行代码的目的。name接下来咱们一起看一下从创建到在真实代码中是如何使用的。

    二、创建地图

    (一)定位中心点

    定位中心点:这个功能就是执行了下面两个操作
    var map = new BMap.Map("map");//在百度地图容器中创建一个地图
    var point = new BMap.Point(117.19564,36.682652);//定义一个中心点坐标
    

    可以选择当前的城市,也可以输入一个比较详细的地点,也可以用鼠标拖动地图来选择合适的位置。

    注意:地图的级别可以由滚动鼠标来决定
    在这里插入图片描述

    (二)设置地图

    可以设置地图的尺寸,也可以调整地图上的控件的位置以及默认显示的状态等。很方便,可以根据自己的需求来设定。

    在这里插入图片描述

    (三)添加标注

    在线创建的标注支持三种方式,如下面三个图

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    咱们来添加一个坐标测试下
    在这里插入图片描述
    输入一些描述
    在这里插入图片描述
    点击后:
    在这里插入图片描述

    也可以添加多个

    在这里插入图片描述

    预览

    在这里插入图片描述
    预览时的图片可能存在问题,先忽略吧
    在这里插入图片描述

    三、获取代码

    点击获取代码
    在这里插入图片描述
    复制下来弹出的代码
    在这里插入图片描述

    在ide中跑起来这个代码

    把代码复制到ide创建的html中

    在这里插入图片描述

    如果没有这个key的童鞋可以看这篇:
    https://blog.csdn.net/qq_17623363/article/details/103234119
    很详细,去注册一下就好了。

    测试

    然后就可以成功的看到结果了:
    在这里插入图片描述

    展开全文
  • 如何谷歌地图自定义范围You don’t need any special software to create a custom map for yourself or others. Google Maps is all you need, allowing you to add your own pinpoints, shapes, and directions ...
    如何在谷歌地图自定义范围

    如何在谷歌地图自定义范围

    Google Maps Logo

    You don’t need any special software to create a custom map for yourself or others. Google Maps is all you need, allowing you to add your own pinpoints, shapes, and directions to a custom map. Here’s how.

    您不需要任何特殊软件即可为自己或他人创建自定义地图。 您只需要Google地图,即可将自己的精确度,形状和方向添加到自定义地图。 这是如何做。

    You’ll need to use Google Maps on your desktop to do this. If you’re having problems with a blank Google Maps screen, you’ll also need to clear your site data.

    您需要在桌面上使用Google地图。 如果您在空白的Google Maps屏幕上遇到问题,则还需要清除站点数据。

    在Google地图中创建自定义地图 (Creating a Custom Map in Google Maps)

    A custom map in Google Maps doesn’t allow you to create a new landscape—you’re stuck with planet Earth. What it does allow you to do, however, is add your own landmarks, routes, and locations.

    Google地图中的自定义地图不允许您创建新的景观,因为您被地球困住了。 但是,它允许您做的是添加自己的地标,路线和位置。

    You can also draw your own shapes onto the existing map to add detail to the existing map. While you can view a custom map in the Google Maps app for Android and iOS, you can only create it using the web version of Google Maps on your desktop.

    您还可以在现有地图上绘制自己的形状以向现有地图添加细节。 虽然您可以在适用于Android和iOS的Google Maps应用中查看自定义地图,但只能使用台式机上的网络版Google Maps创建该地图。

    To start, head to the Google Maps website, and sign in using your Google account. Once you’re signed in, press the hamburger menu icon in the top-left.

    首先,请访问Google Maps网站,然后使用您的Google帐户登录。 登录后,按左上角的汉堡菜单图标。

    Click the Hamburger Menu Icon in Google Maps

    In the options menu, click the “Your Places” option.

    在选项菜单中,单击“您的位置”选项。

    Press the Your Places option in Google Maps

    In the “Your Places” menu that appears on the left, click the “Maps” tab. At the bottom of the menu, select the “Create Map” button.

    在左侧显示的“您的位置”菜单中,单击“地图”标签。 在菜单底部,选择“创建地图”按钮。

    Click Create Map to begin creating a custom Google Maps map

    The map creation window will appear in a new tab. To name it, select the “Untitled map” text at the top of the menu on the left.

    地图创建窗口将出现在新选项卡中。 要命名,请在左侧菜单顶部选择“无标题地图”文本。

    Click Untitled map to begin renaming your custom Google Maps map

    In the “Edit map title and description” menu, add a name and description for your map and then click “Save” to save it.

    在“编辑地图标题和描述”菜单中,为地图添加名称和描述,然后单击“保存”进行保存。

    Add a name and description for your custom Google Maps map, then press Save

    自定义地图图层 (Custom Map Layers)

    Your custom map is made up of layers, with the “Base Map” layer (the main Google Maps view) at the bottom.

    您的自定义地图由图层组成,底部是“基础地图”图层(主Google地图视图)。

    You can customize the appearance of the “Base Map” layer by selecting the options arrow next to “Base Map” and choosing a different map theme.

    您可以通过选择“基础地图”旁边的选项箭头并选择其他地图主题来自定义“基础地图”图层的外观。

    Choosing a custom base map layer style in Google Maps

    When you create a new custom map in Google Maps, a new “Untitled Layer” is added by default.

    当您在Google Maps中创建新的自定义地图时,默认情况下会添加新的“无标题图层”。

    You can add as many layers as you want to your custom map, allowing you to separate the different components of your new map from each other, by clicking the “Add layer” button.

    您可以根据需要在自定义地图上添加任意多个图层,通过单击“添加图层”按钮,可以将新地图的不同组件彼此分开。

    Press Add Layer to add a custom layer to a custom Google Maps map

    If you want to rename this layer, select the three-dot menu icon next to the layer and then click “Rename Layer” in the drop-down menu.

    如果要重命名该图层,请选择该图层旁边的三点菜单图标,然后在下拉菜单中单击“重命名图层”。

    To delete it, select “Delete Layer” instead.

    要删除它,请选择“删除图层”。

    Options to rename or delate a custom layer in a custom Google Maps map

    在Google地图中将组件添加到自定义地图 (Adding Components to a Custom Map in Google Maps)

    A custom map in Google Maps can be customized with various different components. You can add marker points, shapes or lines, as well as directions directly onto the map.

    Google Maps中的自定义地图可以使用各种不同的组件进行自定义。 您可以将标记点,形状或线条以及方向直接添加到地图上。

    To start, make sure you’re in the custom map editor by heading to the Google Maps website and selecting the hamburger menu > Your Places > Maps > Create Map.

    首先,请前往Google Maps网站并选择“汉堡”菜单>“您的位置”>“地图”>“创建地图”,以确保您位于自定义地图编辑器中。

    添加标记点 (Adding a Marker Point)

    A custom marker point is a pinpoint that appears on the map. You can use this to add additional descriptions to an area, as well as to point map users to a location or area that isn’t specified on the “Base Map” layer.

    自定义标记点是显示在地图上的精确点。 您可以使用它向区域添加其他描述,以及将地图用户指向“基础地图”图层上未指定的位置或区域。

    To add a new marker point to your map, make sure you’ve located a suitable area on the “Base Map” layer. When you’re ready, select the “Add Marker” button in the menu below the search bar in the custom map editor.

    要将新的标记点添加到地图,请确保已在“基础地图”图层上找到合适的区域。 准备就绪后,在自定义地图编辑器中的搜索栏下方的菜单中选择“添加标记”按钮。

    Press Add Marker to add a custom marker point in the Google Maps map editor

    Using your mouse or trackpad, click on an area of the map. This will bring up the marker editor—add a suitable name and description and then select “Save” to add it to your map.

    使用鼠标或触控板,单击地图上的某个区域。 这将打开标记编辑器-添加合适的名称和描述,然后选择“保存”以将其添加到地图中。

    Add a name and description to your custom marker point, then press Save

    添加线条或形状 (Adding Lines or Shapes)

    You can add custom lines and shapes to your custom map to emphasize certain areas.

    您可以在自定义地图上添加自定义线条和形状,以突出显示某些区域。

    To do this, click the “Draw a Line” option in the menu below the search bar and then select the “Add line or shape” option.

    为此,请在搜索栏下方的菜单中单击“绘制线”选项,然后选择“添加线或形状”选项。

    Press Draw a Line > Add Line or Shape to begin adding a line or shape to your custom Google Maps map

    In a suitable area on the map, draw a line using your mouse or trackpad—use multiple lines to create a joined-up shape.

    在地图上的合适区域中,使用鼠标或触控板绘制一条线-使用多条线创建连接的形状。

    Creating a custom shape in the Google Maps map editor

    Add a custom name and description to your object in the pop-up menu before selecting “Save” to confirm.

    在选择“保存”进行确认之前,请在弹出菜单中为对象添加自定义名称和描述。

    Add a name and description to a custom shape in the Google Maps map editor before pressing Save to save

    创建自定义方向 (Creating Custom Directions)

    A custom map can also be used to share directions from A to B by creating a directions layer.

    通过创建路线图层,自定义地图还可用于共享从A到B的路线。

    To do this, click on the “Add Directions” option in the menu below the search bar to create this layer.

    为此,请在搜索栏下方的菜单中单击“添加路线”选项,以创建该图层。

    Press the Add Directions option to add a new directions layer to a custom Google Maps map

    The directions layer will appear in the menu on the left. Add your departure point to the “A” text box and the arrival point to the “B” text box.

    方向图层将出现在左侧菜单中。 将出发点添加到“ A”文本框中,并将到达点添加到“ B”文本框中。

    Type departure and arrival locations in the custom directions layer in the Google Maps map editor

    Once both the “A” and “B” boxes are filled, the map will update showing the route between your specified locations.

    填满“ A”和“ B”框后,地图将更新,显示您指定位置之间的路线。

    在Google地图中共享自定义地图 (Sharing Custom Maps in Google Maps)

    Once you’ve created your map, you’re free to access it yourself from within Google Maps (hamburger menu > Your Places > Maps) or from the Google My Maps website.

    创建地图后,您可以在Google地图(汉堡菜单>您的位置>地图)中或在Google我的地图网站上随意访问它。

    Only you can view your custom map by default, but you can share it with others. To do this, head to the Google My Maps website, sign in, and then select the “Owned” tab where your custom map should be listed.

    默认情况下,只有您可以查看自定义地图,但可以与他人共享。 为此,请访问Google我的地图网站 ,登录,然后选择应该在其中列出您的自定义地图的“拥有”标签。

    To share it with others, click the “Share Map” button. This will give you options to share your custom map on various social media platforms, through email, or by embedding it on your website.

    要与他人共享,请单击“共享地图”按钮。 这将为您提供选择,以通过电子邮件或将其嵌入到您的网站上,在各种社交媒体平台上共享您的自定义地图。

    Select one of these options to proceed.

    选择以下选项之一继续。

    The social sharing options for a custom Google Maps map

    You can also grab a custom link to your map that will allow you to share it with others directly.

    您还可以抓取指向地图的自定义链接,该链接可让您直接与他人共享。

    In the “Owned” tab of the Google My Maps website, select your map to return to the map editor and then click the “Share” button in the left-hand menu.

    在“ Google我的地图”网站的“拥有”标签中,选择您的地图以返回到地图编辑器,然后单击左侧菜单中的“共享”按钮。

    Press Share to share your custom Google Maps map

    This will bring up the “Link Sharing” options menu. Under the “Who Has Access” section, select the “Change” button.

    这将弹出“链接共享”选项菜单。 在“谁可以访问”部分下,选择“更改”按钮。

    Press Change to change sharing access for your custom Google Maps map

    In the “Link Sharing” options menu, select the level of access for your map. You can restrict access to specific Google account users, allow access to anyone who has the shared link or make your map public instead.

    在“链接共享”选项菜单中,选择地图的访问级别。 您可以将访问权限限制为特定的Google帐户用户,允许具有共享链接的任何人访问,或者将您的地图公开。

    Once you’ve selected your chosen sharing level, click “Save” to save the selection.

    选择共享级别后,单击“保存”以保存选择。

    The link sharing options for a custom Google Maps map

    Your shared settings will be saved at this point, allowing you to invite specific users to view it by email invitation or by sharing the link to your custom map to a wider set of users directly.

    此时将保存您的共享设置,使您可以通过电子邮件邀请或通过将指向您的自定义地图的链接直接共享给更多用户来邀请特定用户查看它。

    翻译自: https://www.howtogeek.com/664890/how-to-create-a-custom-map-in-google-maps/

    如何在谷歌地图自定义范围

    展开全文
  • 项目中越来越多的用到了手机的GRS定位功能,使用百度地图API获取当前位置在地图上标注出来首先应该官网注册key 点击获取密钥,注册获取key。 完整代码如下:<!DOCTYPE html> ...

    在项目中越来越多的用到了手机的GRS定位功能,使用百度地图API获取当前位置并在地图上标注出来首先应该在官网上注册key
    这里写图片描述

    这里写图片描述

    点击获取密钥,注册获取key。
    完整代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key值"></script>
    
    <title>百度地图的定位</title>
    </head>
    <body>
        <div id="allmap" style="width: 100%;height: 500px;"></div>
    
    
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(108.95,34.27);
        map.centerAndZoom(point,12);
    
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){console.log(r.point)
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);//标出所在地
                map.panTo(r.point);//地图中心移动
                //alert('您的位置:'+r.point.lng+','+r.point.lat);
                var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
                var gc = new BMap.Geocoder();
                gc.getLocation(point, function(rs){
                   var addComp = rs.addressComponents; console.log(rs.address);//地址信息
                   alert(rs.address);//弹出所在地址
    
                });
            }else {
                alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true})
    </script>
    
    
    </body>
    </html>

    运行结果是:
    这里写图片描述

    (注:用浏览器定位是不准确的,建议用手机进行测试!)

    ionic中通过插件定位,并显示地图:
    http://blog.csdn.net/zuoyiran520081/article/details/72771654

    展开全文
  • 随机树木位置,要生成地面,不能悬空或低于地面,也不能重叠,不然就尴尬了 (发现王者荣耀游戏开始的防御塔,也是类似效果,其原理就不得而知了) 主要说明还是写注释里,大概思路这样: 1. 首先加载...
  • 温馨提示:运行的代码必须是sever的,不然没有效果,vscode可以下载liverserver去启一个服务,或者使用webpack,也可以部署到服务器也可以 2.展示   2.1:展示官方文档中的前端定位中的demo 上面二维码...
  • 本文就将讲解,给你一个地址,如何用Python进行可视化,只需要两步:将地址转成经纬度根据经纬度在地图上标记点一、将地址转成经纬度首先我们需要将地理位置转成经纬度这种统一格式,方便代码去识别。完成这一个需求...
  • // 创建标注,为要查询的地方对应的经纬度 map.addOverlay(marker); marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用 map....
  • 书接篇博文 ThingsBoard使用笔记(1) 安装 ...给资产添加地址,坐标等属性,准备在地图上显示 3.资产间关联 选择资产【科技大厦】,把另外两个资产【一楼,二楼】添加进来 4.资产与硬件关联...
  • 根据坐标在地图上显示指定点,并给出点的具体地址
  • 本项目中使用一项 web 服务来查找国际空间站 (ISS) 的当前位置在地图上绘制其位置。 最终的效果如图: 本项目来自于树莓派(raspberrypi)官网学习项目。 二、获取国际空间站中宇航员的信息 首先需要用到提供...
  • height: 100%;margin:0;font-family:"微软雅黑";} #allmap{height:500px;width:100%;} 城市名定位 ... // 百度地图API功能 var map = new BMap.Map("allmap");// 创建Map实例 map.centerAndZoom(ne
  • 在地图上绘制之创建标注 官方demo示例和讲解——直戳这里 简介 所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。 覆盖物拥有自己的地理坐标,当拖动或缩放地图时,它们会相应的移动。 覆盖物主要分为:...
  • setTimeout(function(){ //相当于再次点击,第一次有可能会出现标注不中心,但是地图的div高宽已经展示,所以再次点击下,标注一定中心 $("#allmap").show(); theLocation(); },100); } $(function () { $('....
  • vue高德地图获取当前位置(五步实现)

    千次阅读 2021-01-14 11:47:17
    一、安装依赖npm install vue-amap --save二、增加配置 webpack.config.js 配置文件中配置AMapentry: {app: './src/main.js'},externals:{"AMap": "AMap",}index.html中引入高德appkey三、创建文件创建一个名为...
  • 本实例的域名腾讯云购买 点击修改可前往腾讯云购买,购买后会自动配置。 2、微信小程序开发 下载开发者工具 下载安装后为 扫一扫登录后,选择“本地小程序项目”,选择新建项目或打开已有项目 创建后...
  • 先定位自己位置 定位您的位置 您当前位置:     ... // 百度地图API功能  var map = new BMap.Map("allmap");  var point = new BMap.Point(108.95,
  • 这篇文章主要是对百度地图进行定位当前的位置,同时当前位置设置圆形覆盖物,后面会实现附近餐馆查找功能。文章比较基础,包括申请API Key、配置环境、官方文档介绍、使用BDLocationListener实现定位监听方法等,...
  • 这几天写一个项目,有个需求是点击个添加的按钮,然后才能点击地图标记地图上的一个地方,插入标签前,将该地点的信息展示问是否要插入。 有个坑是关于confirm报错的,提示$confirm is no a function。要引入...
  • Android 百度地图定位显示当前位置

    千次阅读 2021-12-02 22:20:30
    配置百度地图 配置百度地图 获取 SHA1 Android Studio 中通过命令行获取,步骤如下: ... 进入D:\Android\jre\bin输入指令keytool -list -v -...此处我已经创建了一个应用,就可以进入下一步了。 配置 Andr.
  • 高德地图api获取当前地理位置

    千次阅读 2019-09-23 14:51:03
    引入 <script language="javascript" src...key=你的key"></script> 高德地图开发平台可以注册账号,创建应用获取key值,注意的是chrome浏览器不支持h5的api Geolocation mapObj = new AMap.Map('i...
  • C#利用SharpMap 创建地图的实例

    热门讨论 2011-11-22 14:49:07
    利用SharpMap 创建地图。可实现地图的放大缩小 和拖放,根据鼠标位置获得经纬度,和缩放比例,可以生成SQL语句,更新某地经纬度。
  • 本文目录一、介绍二、开始使用(一) 注册成为腾讯位置服务开发者(二)创建应用和Key三、地图显示(一)在地图页面引入 JS 库(二)定义显示地图的容器(三)初始化并显示地图四、效果图五、其它 一、介绍 ...
  • Mui 获取当前位置在地图上显示

    万次阅读 2017-01-12 09:18:20
    最近公司急缺人手、就把app前后台开发压给...//获取当前位置 var currentLon,currentLat,map; mui.plusReady(function() { plus.geolocation.getCurrentPosition(translatePoint,function(e){ mui.toast("异常:" + e.
  • 本文介绍使用HTML5 Geolocation API获取当前地理位置,并百度地图上展示的实例
  • power bi 地图 该项目 (The project) This is the first article of a series dedicated to discovering geographic maps in Power BI using Bubble Map and Filled Map. 这是致力于使用Bubble Map和Filled ...
  • 百度地图获取地理位置

    千次阅读 2018-07-17 21:39:38
    百度地图获取地理位置 无需坐标逆解析获取地理位置 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta ...
  • 百度地图在固定位置添加图片

    千次阅读 2018-12-19 13:31:41
    // 创建Map实例 var map = new BMap.Map("allmap"); // 居中放大 map.centerAndZoom(TianAnMen, 12); // 启用滚轮放大缩小 map.enableScrollWheelZoom(); // 西南角和东北角 var SW = new BMap.Point(116...
  • html创建添加地图(超简单)

    千次阅读 2020-12-02 16:47:23
    1.打开百度地图创建平台: 2.根据个人需求改就行了,可加标注。 3.点击获取代码 ,复制下来就可以用了。 4.个人用的是HBulider,复制到里面可直接用了,如果有文字显示问题,把编码改成utf-8就行了。 5.位置什么...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 83,773
精华内容 33,509
关键字:

怎么在地图上创建位置