基于Arcgis for javascript實(shí)現(xiàn)百度地圖ABCD marker的效果
更新時(shí)間：2015年09月12日 14:49:06 作者：LZU-GIS
本篇文章由腳本之家小編給大家分享的基于Arcgis for javascript實(shí)現(xiàn)百度地圖ABCD marker的效果，需要的朋友一起學(xué)習(xí)吧
先給大家展示實(shí)現(xiàn)后效果：
為直觀期間，先貼出來(lái)我做的效果
列表展示和地圖展示以及聯(lián)動(dòng)
顯示信息
實(shí)現(xiàn)思路：
1、列表與地圖的互動(dòng)
鼠標(biāo)經(jīng)過(guò)列表時(shí)，修改列表圖標(biāo)，并根據(jù)列表返回的值在地圖上繪藍(lán)色的marker；鼠標(biāo)移出，修改列表圖標(biāo)為紅色，清空地圖marker圖層。
關(guān)鍵代碼：
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、地圖與列表的互動(dòng)
鼠標(biāo)經(jīng)過(guò)地圖紅色的marker時(shí)，修改對(duì)應(yīng)列表圖標(biāo)，并將紅色 marker的圖片換成藍(lán)色的；鼠標(biāo)移出，修改對(duì)應(yīng)列表圖標(biāo)，并修改marker為紅色。
關(guān)鍵代碼：
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的文字是一個(gè)單獨(dú)的圖層，不參與互動(dòng)。
4、數(shù)據(jù)以JSON形式存在。
var data = [
{
"id":"A","name":"拉薩", "x":91.162998, "y":29.71042,
"desc":"拉薩是中國(guó)西藏自治區(qū)的首府，西藏的政治、經(jīng)濟(jì)、文化和宗教中心，也是藏傳佛教圣地。"
},
{
"id":"B", "name":"西寧","x":101.797303,"y":36.593642,
"desc":"西寧是青海省的省會(huì)，古稱西平郡、青唐城，取”西陲安寧“之意，是整個(gè)青藏高原最大的城市。"
},
{
"id":"C","name":"蘭州","x":103.584297,"y":36.119086,
"desc":"蘭州，甘肅省省會(huì)，西北地區(qū)重要的工業(yè)基地和綜合交通樞紐，西部地區(qū)重要的中心城市之一，絲綢之路經(jīng)濟(jì)帶的重要節(jié)點(diǎn)城市。"
},
{
"id":"D","name":"成都","x":104.035508,"y":30.714179,
"desc":"成都，簡(jiǎn)稱蓉，四川省省會(huì)，1993年被國(guó)務(wù)院確定為西南地區(qū)的科技、商貿(mào)、金融中心和交通、通訊樞紐。"
}
];
完整代碼：
<!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":"拉薩是中國(guó)西藏自治區(qū)的首府，西藏的政治、經(jīng)濟(jì)、文化和宗教中心，也是藏傳佛教圣地。"
},
{
"id":"B", "name":"西寧","x":101.797303,"y":36.593642,
"desc":"西寧是青海省的省會(huì)，古稱西平郡、青唐城，取”西陲安寧“之意，是整個(gè)青藏高原最大的城市。"
},
{
"id":"C","name":"蘭州","x":103.584297,"y":36.119086,
"desc":"蘭州，甘肅省省會(huì)，西北地區(qū)重要的工業(yè)基地和綜合交通樞紐，西部地區(qū)重要的中心城市之一，絲綢之路經(jīng)濟(jì)帶的重要節(jié)點(diǎn)城市。"
},
{
"id":"D","name":"成都","x":104.035508,"y":30.714179,
"desc":"成都，簡(jiǎn)稱蓉，四川省省會(huì)，1993年被國(guó)務(wù)院確定為西南地區(qū)的科技、商貿(mào)、金融中心和交通、通訊樞紐。"
}
];
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(">>詳細(xì)");
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">查詢結(jié)果</div>
<ul class="search-box-result" id="result">
</ul>
</div>
<div id="map">
</div>
</body>
</html>
以上內(nèi)容就是腳本之家小編給大家分享的基于Arcgis for javascript實(shí)現(xiàn)百度地圖ABCD marker的效果，希望大家喜歡。
相關(guān)文章
JavaScript實(shí)現(xiàn)動(dòng)態(tài)刪除列表框值的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)刪除列表框值的方法,涉及javascript針對(duì)select列表框的遍歷與刪除操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
javascript中的綁定與解綁函數(shù)應(yīng)用示例
本文為大家詳細(xì)介紹下javascript中綁定與解綁函數(shù)在Ie及Mozilla中的應(yīng)用，感興趣的各位可以參考下哈，希望對(duì)大家有所幫助2013-06-06
Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript拖拽、碰撞、重力及彈性運(yùn)動(dòng)實(shí)例分析
這篇文章主要介紹了JavaScript拖拽、碰撞、重力及彈性運(yùn)動(dòng)實(shí)現(xiàn)方法,涉及JavaScript數(shù)學(xué)運(yùn)算結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)運(yùn)動(dòng)效果的相關(guān)技巧,需要的朋友可以參考下2016-01-01
JavaScript中的一些實(shí)用小技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中的一些實(shí)用小技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript中加var和不加var的區(qū)別 你真的懂嗎
var 語(yǔ)句用于聲明變量，本文給大家介紹javascript 中加’var‘和不加'var'的區(qū)別，涉及到j(luò)avascript var相關(guān)知識(shí)，對(duì)javascript var相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
Javascript 獲取鼠標(biāo)當(dāng)前的位置實(shí)現(xiàn)方法
這篇文章主要介紹了Javascript 獲取鼠標(biāo)當(dāng)前的位置實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-10-10
對(duì)象是組成JavaScript的基本單元。本章將從JavaScript語(yǔ)言中最重要的幾個(gè)部分開(kāi)始介紹：引用，函數(shù)重載，作用域，閉包和上下文。有了這些知識(shí)后，面向?qū)ο箝_(kāi)發(fā)就將變得簡(jiǎn)單。2009-09-09
javascript中關(guān)于執(zhí)行環(huán)境的雜談
如你所知,javascript里執(zhí)行環(huán)境是作為一個(gè)最核心的概念存在的。相信廣大FE筒子們對(duì)于這個(gè)概念不會(huì)陌生，它定義了變量或函數(shù)有權(quán)訪問(wèn)其他數(shù)據(jù)范圍以及其行為。2011-08-08
解決select2在bootstrap modal中不能正常使用的問(wèn)題
今天小編就為大家分享一篇解決select2在bootstrap modal中不能正常使用的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08