(转)Arcgis for javascript实现百度地图ABCD marker的效果
概述:
在我的博客中,有一篇相关的文章,这段时间,有很多人问我求源码,只是时间过去已长,源代码已找不到,乘着这个9.3放假,又重新实现了下,并相关代码做了优化,在此贴出来,方便大家使用。
相关文章地址:
http://blog.csdn.net/gisshixisheng/article/details/39577817
实现后效果:
为直观期间,先贴出来我做的效果
列表展示和地图展示以及联动
显示信息
实现思路:
1、列表与地图的互动
鼠标经过列表时,修改列表图标,并根据列表返回的值在地图上绘蓝色的marker;鼠标移出,修改列表图标为红色,清空地图marker图层。
关键代码:
- title.on("mouseover",function(){
- var attr = $(this).data("attr");
- $("#icon"+attr.id).css("background","url('images/blue.png')");
- var pt=new Point(attr.x,attr.y,{"wkid":4326});
- var pms = new esri.symbol.PictureMarkerSymbol("images/blue.png",24,26)
- var gImg = new Graphic(pt,pms);
- gLyrHover.add(gImg);
- });
- title.on("mouseout",function(){
- var attr = $(this).data("attr");
- $("#icon"+attr.id).css("background","url('images/red.png')");
- gLyrHover.clear();
- });
2、地图与列表的互动
鼠标经过地图红色的marker时,修改对应列表图标,并将红色 marker的图片换成蓝色的;鼠标移出,修改对应列表图标,并修改marker为红色。
关键代码:
- gLyr.on("mouse-over",function(e){
- map.setMapCursor("pointer");
- var sms = e.graphic.symbol;
- sms.url = "images/blue.png";
- gLyr.redraw();
- $("#icon"+e.graphic.attributes.id).css("background","url('images/blue.png')");
- });
- gLyr.on("mouse-out",function(e){
- map.setMapCursor("default");
- var sms = e.graphic.symbol;
- sms.url = "images/red.png";
- gLyr.redraw();
- $("#icon"+e.graphic.attributes.id).css("background","url('images/red.png')");
- });
3、地图上ABCD的文字是一个单独的图层,不参与互动。
4、数据以JSON形式存在。
- var data = [
- {
- "id":"A","name":"拉萨", "x":91.162998, "y":29.71042,
- "desc":"拉萨是中国西藏自治区的首府,西藏的政治、经济、文化和宗教中心,也是藏传佛教圣地。"
- },
- {
- "id":"B", "name":"西宁","x":101.797303,"y":36.593642,
- "desc":"西宁是青海省的省会,古称西平郡、青唐城,取”西陲安宁“之意,是整个青藏高原最大的城市。"
- },
- {
- "id":"C","name":"兰州","x":103.584297,"y":36.119086,
- "desc":"兰州,甘肃省省会,西北地区重要的工业基地和综合交通枢纽,西部地区重要的中心城市之一,丝绸之路经济带的重要节点城市。"
- },
- {
- "id":"D","name":"成都","x":104.035508,"y":30.714179,
- "desc":"成都,简称蓉,四川省省会,1993年被国务院确定为西南地区的科技、商贸、金融中心和交通、通讯枢纽。"
- }
- ];
完整代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title></title>
- <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
- <style type="text/css">
- html, body, #map {
- height: 100%;
- margin: 0;
- padding: 0;
- font-size: 62.5%;
- font-family:"微软雅黑";
- }
- .search-box{
- z-index: 99;
- background: #fff;
- border: 1px solid #888888;
- border-radius: 5px;
- width: 220px;
- max-height:600px;
- overflow-y: auto;
- position: absolute;
- top: 120px;
- left: 10px;
- }
- .search-box-title{
- padding: 6px 10px;
- text-align: left;
- font-size: 13px;
- font-weight: bold;
- color: #f2f2f2;
- background: #85b0db;
- }
- .search-box-result{
- list-style: none;
- margin-left:-40px;
- margin-top: 0px;
- }
- .search-box-result-item{
- border-bottom: 1px solid #eeeeee;
- padding: 5px 8px;
- }
- .search-name{
- float: right;
- font-weight: bold;
- font-size: 13px;
- margin-top: 3px;
- margin-right: 10px;
- }
- .search-name-title{
- background: #f2f2f2;
- }
- .search-name-title:hover{
- cursor: pointer;
- }
- .search-detail{
- border-top: 1px dashed #eeeeee;
- margin-top: 3px;
- padding: 3px 5px;
- line-height: 18px;
- }
- .search-icon{
- background: url("images/red.png");
- width: 24px;
- height: 26px;
- background-repeat: no-repeat;
- }
- .search-text{
- color: #ffffff;
- font-weight: bold;
- font-size: 16px;
- margin-left:7px ;
- }
- .detail{
- color: #85b0db;
- font-weight: bold;
- text-align: right;
- }
- .detail:hover{
- cursor: pointer;
- }
- </style>
- <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
- <script src="jquery-1.8.3.js"></script>
- <script type="text/javascript">
- var map;
- var data = [
- {
- "id":"A","name":"拉萨", "x":91.162998, "y":29.71042,
- "desc":"拉萨是中国西藏自治区的首府,西藏的政治、经济、文化和宗教中心,也是藏传佛教圣地。"
- },
- {
- "id":"B", "name":"西宁","x":101.797303,"y":36.593642,
- "desc":"西宁是青海省的省会,古称西平郡、青唐城,取”西陲安宁“之意,是整个青藏高原最大的城市。"
- },
- {
- "id":"C","name":"兰州","x":103.584297,"y":36.119086,
- "desc":"兰州,甘肃省省会,西北地区重要的工业基地和综合交通枢纽,西部地区重要的中心城市之一,丝绸之路经济带的重要节点城市。"
- },
- {
- "id":"D","name":"成都","x":104.035508,"y":30.714179,
- "desc":"成都,简称蓉,四川省省会,1993年被国务院确定为西南地区的科技、商贸、金融中心和交通、通讯枢纽。"
- }
- ];
- require([
- "esri/map",
- "esri/layers/ArcGISTiledMapServiceLayer",
- "esri/geometry/Point",
- "esri/layers/GraphicsLayer",
- "esri/graphic",
- "dojo/_base/Color",
- "dojo/domReady!"],
- function(Map,
- Tiled,
- Point,
- GraphicsLayer,
- Graphic,
- Color)
- {
- map = new Map("map",{logo:false});
- var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/china/MapServer",{"id":"tiled"});
- map.addLayer(tiled);
- var mapCenter = new Point(103.847, 36.0473, {"wkid":4326});
- map.centerAndZoom(mapCenter,0);
- var gLyr = new GraphicsLayer({"id":"gLyr"});
- map.addLayer(gLyr);
- var gLyrHover = new GraphicsLayer({"id":"gLyrHover"});
- map.addLayer(gLyrHover);
- var gLyrLbl = new GraphicsLayer({"id":"gLyrLbl"});
- map.addLayer(gLyrLbl);
- map.on("load",function(){
- $("#search").show();
- for(var i=0;i<data.length;i++){
- var li = $("<li />").addClass("search-box-result-item").appendTo($("#result"));
- var name = $("<div />").addClass("search-name").html(data[i].name);
- var icon = $("<div />").addClass("search-icon")
- .attr("id","icon"+data[i].id)
- .append("<div class='search-text'>"+data[i].id+"</div>");
- var title = $("<div />").addClass("search-name-title")
- .append(name).append(icon).appendTo(li)
- .data("attr",data[i]);
- var desc = $("<div />").addClass("search-detail").html(data[i].desc).appendTo(li);
- var more = $("<div />").addClass("detail").appendTo(li).html(">>详细");
- title.on("mouseover",function(){
- var attr = $(this).data("attr");
- $("#icon"+attr.id).css("background","url('images/blue.png')");
- var pt=new Point(attr.x,attr.y,{"wkid":4326});
- var pms = new esri.symbol.PictureMarkerSymbol("images/blue.png",24,26)
- var gImg = new Graphic(pt,pms);
- gLyrHover.add(gImg);
- });
- title.on("mouseout",function(){
- var attr = $(this).data("attr");
- $("#icon"+attr.id).css("background","url('images/red.png')");
- gLyrHover.clear();
- });
- title.on("click",function(){
- var attr = $(this).data("attr");
- showCity(attr);
- });
- var pt=new Point(data[i].x,data[i].y,{"wkid":4326});
- var pms = new esri.symbol.PictureMarkerSymbol("images/red.png",24,26)
- var gImg = new Graphic(pt,pms,data[i]);
- gLyr.add(gImg);
- var font = new esri.symbol.Font();
- font.setSize("10pt");
- font.setFamily("微软雅黑");
- var text = new esri.symbol.TextSymbol(data[i].id);
- text.setOffset(0,-2);
- text.setFont(font);
- text.setColor(new dojo.Color([255,255,255,100]));
- var gLbl = new esri.Graphic(pt,text,data[i]);
- gLyrLbl.add(gLbl);
- }
- gLyr.on("mouse-over",function(e){
- map.setMapCursor("pointer");
- var sms = e.graphic.symbol;
- sms.url = "images/blue.png";
- gLyr.redraw();
- $("#icon"+e.graphic.attributes.id).css("background","url('images/blue.png')");
- });
- gLyr.on("mouse-out",function(e){
- map.setMapCursor("default");
- var sms = e.graphic.symbol;
- sms.url = "images/red.png";
- gLyr.redraw();
- $("#icon"+e.graphic.attributes.id).css("background","url('images/red.png')");
- });
- gLyr.on("click",function(e){
- var attr = e.graphic.attributes;
- showCity(attr);
- });
- });
- function showCity(attr){
- var pt=new Point(attr.x,attr.y,{"wkid":4326});
- map.infoWindow.setTitle(attr.name);
- map.infoWindow.setContent(attr.desc);
- map.infoWindow.resize(200,80);
- map.infoWindow.show(pt);
- map.centerAndZoom(pt,0);
- }
- });
- </script>
- </head>
- <body>
- <div id="search" class="search-box" style="display: none;">
- <div class="search-box-title">查询结果</div>
- <ul class="search-box-result" id="result">
- </ul>
- </div>
- <div id="map">
- </div>
- </body>
- </html>
转载于:https://www.cnblogs.com/telwanggs/p/6972307.html
(转)Arcgis for javascript实现百度地图ABCD marker的效果相关推荐
- Arcgis for javascript实现百度地图ABCD marker的效果
概述: 在我的博客中,有一篇相关的文章,这段时间,有很多人问我求源码,只是时间过去已长,源代码已找不到,乘着这个9.3放假,又重新实现了下,并相关代码做了优化,在此贴出来,方便大家使用. 相关文章地址 ...
- 关于ArcGis for javascript整合百度地图 天地图 高德地图进行搜索
1.ArcGis for javascript整合百度地图搜索 1.1.首先引入百度地图的api 1 <!-- 引入百度地图API --> 2 <script type=" ...
- html插入地图的方法,JavaScript接入百度地图API的方法步骤
一.百度地图API接入 1.搜索百度地图开发平台 2.注册百度账号 3.登陆并申请成为开发者 4.在百度地图开发平台的首页选择控制台,在控制台中创建应用 创建好应用以后就能在控制台我的应用中看到这个应 ...
- javascript调用百度地图api
百度地图提供sdk,javascript api等多种客户端调用方式,通常在网页上用的比较多,也就是javascript api,这里根据自己的使用,简单介绍一下如何快速使用javascript调用百 ...
- web前端JavaScript嵌入百度地图API的方法 最详细
web前端JavaScript嵌入百度地图API最详细的方法 一.申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码. 二.实现首图效果(可以参考开发者指南) 1. 根据Hello Wo ...
- 百度地图添加自定义Marker+显示覆盖层次优先级
转载请注明出处:blog.csdn.net/wll995806658 实际项目中经常会集成地图,今天就只谈谈百度地图添加自定义Marker这一部分,希望对百度地图集成有这部分需求的小伙伴能有一些帮助. ...
- 【JavaScript】百度地图API快速上手
获取秘钥 账号和获取秘钥 很欣赏百度这个免费的feel,而且大家如果只是个人在本地的浏览器端运行网页,做简单的测试,基本是不受限的. 点击"申请秘钥"去申请秘钥: 设置应用 接下来 ...
- Javascript 调用百度地图不显示
2019独角兽企业重金招聘Python工程师标准>>> 调用百度地图的时候不能设置 img{max-width:100%; max-height:100%; border:none; ...
- 百度地图JavascriptApi Marker平滑移动及车头指向行径方向
相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marker移动就像"僵尸跳&q ...
最新文章
- unicode字符显示方框_【硬核】韦东山:字符的编码方式
- Oracle 数据库 - sql语句筛选出符合查询条件的第一条结果实例演示,sql查询结果只显示指定行数的数据方法
- mysql删除七天_自动备份mysql并删除7天前备份
- Angular self study 3 - data binding
- C语言编程模拟超市抹零结账,STL实践项目之用queue模拟超市结账环节
- 6.824 RPC lesson2 2020(二)
- 【转】/usr/bin/python^M: bad interpreter: No such file
- centos下安装JDK8的方法
- linux之strings命令
- 如何让 Pages 文字分为两栏或更多栏?
- 没有找到MSVCR100.dll解决方法
- [线性模型总结] 线性回归+方差分析+协方差分析+混合效应+面板数据模型
- 网站或者api服务器,实现一个 RESTful API 服务器
- LaTeX插入视频示例
- 2020年UI和UE的设计流行趋势揭秘!设计师最爱的是?
- 提升社群转化率?3大步骤、6大技巧详解
- CharacterController 人物移动、跳跃
- 前端切页快速上手系列
- jq jqprint 设置页脚_jQuery 插件 jqprint 实现浏览器页面打印和设置页眉页脚
- ai 如何导出html格式,Adobe Illustrator导出SVG的设置方法