地图标注

如果地图中没有描述显示内容的元素，则这种地图用处不大。地图需要标注和图例等文本。上述提及的标注属于名为 LabelLayer 的图层类型。该类型允许控制标注的每个方面，例如标注可视性、标注位置、标注样式和标注内容。使用标注的 MapXtreme 2005 类包括 LabelSource、LabelProperties 和 LabelModifiers。 其它文本元素也可以用在地图中帮助传递正确的消息。图例是以编码方式描述图元的制图元素。例如，图例可以描述边界（例如学校地区）、直线（例如电力线路网络）或点（公司办事处位置）。图例也包含标题，用于描述地图表示的全部内容。 MapXtreme 2005 中，图例连同地图标题和比例栏都是 Adornments 类的一部分。 Adornments 位于 MapInfo.Mapping 命名空间中。 来源： https://www.cnblogs.com/abcdwxc/archive/2008/02/18/1072445.html

1. 循环遍历创建标注（如果标注过多会造成浏览器卡顿状态，可以采用创建海量标注方式） 　　function getNearbySite(lng, lat) { $.ajax({ url: ``, method: 'get', data: { }, success: function (res) { // console.log(res) //获取站点x,y res.stations.forEach((ele, index) => { var obj = {} obj.x = ele.longitude obj.y = ele.latitude pointArr.push(obj) var points = new BMap.Point(pointArr[index].x, pointArr[index].y);//创建坐标点 markerFun(points, index, ele.type); }) }, dataType: 'json' }) } 　　function markerFun(points, i, type) { var label var icon = new BMap.Icon("./images/map_04.png",new BMap.Size(30,30)); //自定义标注 var markers = new BMap.Marker(points, {

这两天一直在研究百度地图开放平台的各种好玩的东西，闲暇之余自己动手体验了一番，果然是妙趣横生，而且还可以自定义理想中的地图，不得不说，百度地图的开放平台为我们的应用提供了很多的便利，之前我们已经学习了地图的基础应用和相关的控件的使用，今天，我们继续深入学习，百度地图API给我们提供的覆盖物。 一、地图覆盖物概述： 所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。 地图API提供了如下几种覆盖物： Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。 Marker：标注表示地图上的点，可自定义标注的图标。 Label：表示地图上的文本标注，您可以自定义标注的文本内容。 Polyline：表示地图上的折线。 Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。 Circle: 表示地图上的圆。 InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。 可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow。 二、标注： 标注表示地图上的点

JS 百度地图-右键菜单 /*-----------------标注右键删除-------------------------*/ var markerMenu = new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('删除标注 ', function () { map.removeOverlay(marker); })) marker.addContextMenu(markerMenu); 来源： https://www.cnblogs.com/nelsonlei/p/12200468.html

原因是：原来的icon地址不存在了。 找到生成的代码中的icon地址：http://app.baidu.com/map/images/us_mk_icon.png 替换成这个地址即可：http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png 生成地图代码如下 <style type="text/css"> .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap} .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script> <!--百度地图容器--> <div style="width:100%;height:400px;border:#ccc

调用步骤 申请百度地图密钥 在index.html中添加百度地图JavaScript API接口 在webpack.base.conf.js配置文件中配置BMap 创建vue文件map.vue,然后各种引用 。。。。 一、申请百度地图密钥 JavaScript API v1.4以及以前的版本无序申请秘钥（ak），自v1.5版本开始需要先申请秘钥（ak），才可以使用，如需获取更高的配额，需要申请 认证企业用户。 链接： 百度地图API 链接地址: 在这里我遇到一个坑： 选择服务器端跟选择浏览器端密钥有所区别，大家按照自己的需求选，要是没选择正确后面会说你的百度密钥未授权使用地图API，那只需要重新申请一个密钥就是了，白名单我是直接填 （用来练习而已）。 * 二、在index.html中添加百度地图JavaScript API接口 <script type="text/javascript" src="http://api.map.baidu.com/api?ak=yourkey&v=2.0&services=false"></script> 二、在webpack.base.conf.js配置文件中配置BMap module.exports = { entry: { app: './src/main.js' }, // 下面才是我们所要配置的 externals: { 'BMap':

这次的主要目的是在百度地图中引用自定义的覆盖物，路径是再asset/images/文件夹下，直接引用出错。需要先导入再引用。 在<script></script>代码中增加如下： 1 import gisGreen from '../assets/images/GIS_Green2.png'; 2 export default {…… 3 methods:{ 4 ……, 5 handler ({BMap, map}) { 6 var point = new BMap.Point(120.66, 31.20); 7 map.centerAndZoom(point, 13); 8 var myIcon = new BMap.Icon(gisGreen, new BMap.Size(20, 32)); 9 var marker = new BMap.Marker(point, {icon: myIcon}); // 创建标注 10 map.addOverlay(marker); // 将标注添加到地图中 11 }, 12 } 13 } 14 来源： https://www.cnblogs.com/qianyou304/p/11805285.html

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gis_zzu/article/details/91890465 一、引入依赖的库文件 import React, { Component } from 'react'; import Map from '../../component/map/map'; // 数据源 import { Vector as VectorSource } from 'ol/source'; // 图层 import { Vector} from 'ol/layer'; // 要素 import Feature from 'ol/Feature'; // import {Point} from 'ol/geom'; // 坐标系转化 import {fromLonLat} from 'ol/proj'; // 样式 import {Icon,Style} from 'ol/style'; // mark标注图片 import markImage from '../../assets/Marker.png' 二、加载地图组件 render() { return ( <div > {/* <img src={bg}></img> */} <button onClick={this.addMarker}

腾讯位置服务地图SDK 是一套提供多种地理位置服务的应用程序接口。通过调用该接口，开发者可以在自己的应用中加入地图相关的功能（如地图展示、标注、绘制图形等），轻松访问腾讯地图服务和数据，构建功能丰富、交互性强、符合各种行业场景的地图类应用程序。 以下内容转载自工程师 Nero8421 的文章《 地图中添加沿线文字标注 》 作者： Nero8421 链接： https://www.cnblogs.com/Allen... 来源：博客园 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 　　最近需要实现导航功能，其中路线规划和导航场景如下图所示： 上面的截图中，路线上面都绘制出了路名，方便用户查看自己选择的路线都经过了哪些道路。这里用到的地图的能力即为 沿线文字标注 腾讯地图 Android SDK v4.2.7 已经开放了实现此功能的能力。 主要涉及接口如下： 接口名称 功能概述 PolylineOptions.text(Text text) 置沿 polyline 展示的文字 PolylineOptions.Text.Builder(SegmentText segmentText PolylineOptions.Text 构造器 PolylineOptions.Text.Builder.addSegmentText(SegmentText segmentText