如何事件監聽並以編程方式突出顯示我的印度地圖的特定區域？
[英]How to event listen and programatically highlight specific regions of my India map?
問題描述
我希望印度地圖和帶有區域文本的列表相互收聽，以便當鼠標指針懸停在區域上方時，相應的區域名稱會帶有下划線，同樣，如果我將鼠標懸停在區域名稱上以左邊那么地圖上的相應區域應該用粉紅色突出顯示。 你能幫助我嗎？ 我可以添加代碼來監聽懸停事件，但我不確定如何以編程方式突出顯示區域？ 我可以監聽點擊區域和點擊區域名稱，但是如何在選擇文本時以編程方式突出顯示相應的區域？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="keywords"
content="Houses Apartments, Vacation homes, Offices, Land, Flatmates,Paying Guest, Other real estate, Cars, Motorcycles, Accessories parts, Trucks, Other vehicles, Home Garden, Clothing, For Kids (Toys Clothes), Jewelry Watches, Hobbies, Sports Bicycles, Movies, Books Magazines, Pets, Tickets, Art Collectibles, Music Instruments, Computers Accessories, TV, Audio, Video, Cameras, Cellphones gadgets, Video games consoles, Job offers, Resumes, Services, Classes, Professional,Office equipment, Other, ">
<meta name="description"
content="Find jobs, cars, houses, mobile phones and properties for sale in your region conveniently. Find the best deal among {{count}} free ads online!">
<title>Free classifieds in India - Koolbusiness.com</title>
<link href="/static/css/koolindex_in.css?0.238133053892" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js?0.238133053892"></script>
</head>
<body>
{% include "kooltopbar.html" %}
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Province'],
['Goa'],
['Gujarat'],
['Andhra Pradesh'],
['Arunachal Pradesh'],
['Assam'],
['Bihar'],
['Chhattisgarh'],
['Goa'],
['Gujarat'],
['Haryana'],
['Himachal Pradesh'],
['Jammu and Kashmir'],
['Jharkhand'],
['Karnataka'],
['Kerala'],
['Madhya Pradesh'],
['Maharashtra'],
['Manipur'],
['Meghalaya'],
['Mizoram'],
['Nagaland'],
['Orissa'],
['Punjab'],
['Rajasthan'],
['Sikkim'],
['Tamil Nadu'],
['Tripura'],
['Uttaranchal'],
['Uttar Pradesh'],
['West Bengal'],
['Delhi'],
['Lakshadweep'],
['Daman and Diu'],
['Dadra and Nagar Haveli'],
['Chandigarh'],
['Pondicherry'],
['Andaman and Nicobar Islands']
]);
var options = {
region:'IN',
backgroundColor: '#81d4fa',
datalessRegionColor: '#ffc801',
width:468,
height:278,
resolution: 'provinces',
};
var container = document.getElementById('mapcontainer');
var chart = new google.visualization.GeoChart(container);
function myClickHandler(){
var selection = chart.getSelection();
var message = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
// if (item.row != null && item.column != null) {
message += '{row:' + item.row + ',column:' + item.column + '}';
//} else
if (item.row != null) {
message += '{row:' + item.row + '}';
//} else if (item.column != null) {
// message += '{column:' + item.column + '}';
}
}
if (message == '') {
message = 'nothing';
}
//alert('You selected ' + message);
if (item.row==2) {
window.location = "/andhra_pradesh/";
}
if (item.row==3) {
window.location = "/arunachal_pradesh/";
}
if (item.row==4) {
window.location = "/assam/";
}
if (item.row==6) {
window.location = "/chhattisgarh/";
}
if (item.row==7) {
window.location = "/goa/";
}
if (item.row==8) {
window.location = "/gujarat/";
}
if (item.row==9) {
window.location = "/haryana/";
}
if (item.row==10) {
window.location = "/himachal_pradesh/";
}
if (item.row==11) {
window.location = "/jammu_kashmir/";
}
if (item.row==12) {
window.location = "/jharkhand/";
}
if (item.row==13) {
window.location = "/karnataka/";
}
if (item.row==14) {
window.location = "/kerala/";
}
if (item.row==15) {
window.location = "/madhya_pradesh/";
}
if (item.row==16) {
window.location = "/maharashtra/";
}
if (item.row==17) {
window.location = "/manipur/";
}
if (item.row==18) {
window.location = "/meghalaya/";
}
if (item.row==19) {
window.location = "/mizoram/";
}
if (item.row==20) {
window.location = "/nagaland/";
}
if (item.row==21) {
window.location = "/orissa/";
}
if (item.row==22) {
window.location = "/punjab/";
}
if (item.row==23) {
window.location = "/rajasthan/";
}
if (item.row==24) {
window.location = "/sikkim/";
}
if (item.row==25) {
window.location = "/tamil_nadu/";
}
if (item.row==25) {
window.location = "/tripura/";
}
if (item.row==28) {
window.location = "/uttar_pradesh/";
}
if (item.row==29) {
window.location = "/west_bengal/";
}
if (item.row==36) {
window.location = "/andaman_nicobar_islands/";
}
}
google.visualization.events.addListener(chart, 'select', myClickHandler);
chart.draw(data, options);
}
google.load('visualization', '1', {packages: ['geochart'], callback: drawMap});
</script>
<div id="wrapper">
<!--[if lt IE 7]>
<div class="alert-outer alert-error">
<a href="#" class="alert-closer" title="close this alert" onclick="removeIeNotification(this); return false;">×</a>
<div class="alert-inner">
<span><strong>You are using an outdated version of Internet Explorer.</strong> For a faster, safer browsing experience, upgrade today!</span>
</div>
</div>
![endif]-->
<header>
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &
selling in india</h1>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="9119838994"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</header>
<![endif]-->
<div style="width: 100%; overflow: hidden;">
<div style="width: 768px; float: left;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- front leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="4543980997"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> </div>
<div id="post3" style="margin-left: 735px;"> <a href="/ai" id="ad2">Post your ad for free</a> </div>
</div>
<div class="main">
<div class="column_left">
<div class="box">
<ul>
<li>KoolBusiness is easy, free, and kool.</li>
<li>Buy and sell <a href="/india/cars-for_sale">cars</a>, check our <a href="/india/real_estate">real
estate</a>
section, find <a href="/india/jobs">jobs</a>, and much more.
</li>
<li>Check our <strong><a href="/india">{{count}} ads online</a></strong> and find what you are looking for
in
your region or in all India.
</li>
</ul>
</div>
<div id="regions">
<div class="region_links_one">
<ul class="regions_one">
<li><a id="region_8" class="region" href="http://www.koolbusiness.com/andhra_pradesh/">Andhra
Pradesh</a></li>
<li><a id="region_9" class="region" href="http://www.koolbusiness.com/arunachal_pradesh/">Arunachal
Pradesh</a></li>
<li><a id="region_10" class="region"
href="http://www.koolbusiness.com/assam/">Assam</a>
</li>
<li><a id="region_11" class="region"
href="http://www.koolbusiness.com/bihar/">Bihar</a>
</li>
<li><a id="region_12" class="region"
href="http://www.koolbusiness.com/chhattisgarh/">Chhattisgarh</a></li>
<li><a id="region_13" class="region"
href="http://www.koolbusiness.com/goa/">Goa</a></li>
<li><a id="region_14" class="region" href="http://www.koolbusiness.com/gujarat/">Gujarat</a>
</li>
<li><a id="region_15" class="region" href="http://www.koolbusiness.com/haryana/">Haryana</a>
</li>
<li><a id="region_16" class="region" href="http://www.koolbusiness.com/himachal_pradesh/">Himachal
Pradesh</a></li>
<li><a id="region_17" class="region" href="http://www.koolbusiness.com/jammu_kashmir/">Jammu
&
Kashmir</a></li>
<li><a id="region_18" class="region" href="http://www.koolbusiness.com/jharkhand/">Jharkhand</a>
</li>
<li><a id="region_19" class="region" href="http://www.koolbusiness.com/karnataka/">Karnataka</a>
</li>
<li><a id="region_20" class="region" href="http://www.koolbusiness.com/kerala/">Kerala</a>
</li>
<li><a id="region_21" class="region" href="http://www.koolbusiness.com/madhya_pradesh/">Madhya
Pradesh</a></li>
</ul>
<ul class="regions_two">
<li><a id="region_22" class="region"
href="http://www.koolbusiness.com/maharashtra/">Maharashtra</a></li>
<li><a id="region_23" class="region" href="http://www.koolbusiness.com/manipur/">Manipur</a>
</li>
<li><a id="region_24" class="region" href="http://www.koolbusiness.com/meghalaya/">Meghalaya</a>
</li>
<li><a id="region_25" class="region" href="http://www.koolbusiness.com/mizoram/">Mizoram</a>
</li>
<li><a id="region_26" class="region" href="http://www.koolbusiness.com/nagaland/">Nagaland</a>
</li>
<li><a id="region_27" class="region" href="http://www.koolbusiness.com/orissa/">Orissa</a>
</li>
<li><a id="region_28" class="region" href="http://www.koolbusiness.com/punjab/">Punjab</a>
</li>
<li><a id="region_29" class="region" href="http://www.koolbusiness.com/rajasthan/">Rajasthan</a>
</li>
<li><a id="region_30" class="region" href="http://www.koolbusiness.com/sikkim/">Sikkim</a>
</li>
<li><a id="region_31" class="region" href="http://www.koolbusiness.com/tamil_nadu/">Tamil
Nadu</a></li>
<li><a id="region_32" class="region" href="http://www.koolbusiness.com/tripura/">Tripura</a>
</li>
<li><a id="region_34" class="region"
href="http://www.koolbusiness.com/uttaranchal/">Uttaranchal</a></li>
<li><a id="region_33" class="region" href="http://www.koolbusiness.com/uttar_pradesh/">Uttar
Pradesh</a></li>
<li><a id="region_35" class="region" href="http://www.koolbusiness.com/west_bengal/">West
Bengal</a></li>
</ul>
</div>
<div class="region_links_two">
<!-- ads here -->
<h2>Union territories</h2>
<ul class="regions_one">
<li><a class="region" href="http://www.koolbusiness.com/delhi/">Delhi</a></li>
<li><a class="region" href="http://www.koolbusiness.com/lakshadweep/">Lakshadweep</a></li>
<li><a class="region" href="http://www.koolbusiness.com/daman_diu/">Daman & Diu</a>
</li>
<li><a class="region" href="http://www.koolbusiness.com/dadra_nagar_haveli/">Dadra & Nagar
Haveli</a>
</li>
</ul>
<ul class="regions_two">
<li><a class="region" href="http://www.koolbusiness.com/chandigarh/">Chandigarh</a></li>
<li><a class="region" href="http://www.koolbusiness.com/pondicherry/">Pondicherry</a></li>
<li><a class="region" href="http://www.koolbusiness.com/andaman_nicobar_islands/">Andaman &
Nicobar
Islands</a></li>
</ul>
</div>
</div>
</div>
<div id="my_wrapper">
<div id="mapcontainer"></div>
<div id="gads" style="clear:both">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- frontpagebelowmap -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="3839303791"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<footer class="nohistory columns">
<p class="first">A good deal is just around the corner!</p>
<p>KoolBusiness is the right choice for safe buying and selling in India: a free classifieds website where you
can buy and sell almost everything.</p>
<p><a href="/ai">Post an ad for free</a> or browse through our categories. You will find thousands of free
classifieds for cars, houses, mobile phones and gadgets, computers, pets and dozens of items and services in
your state or union territory.</p>
<p>
<strong>KoolBusiness does not charge any fee and does not require registration.</strong> Every
ad is checked so we can give you the highest quality possible for the ads on our site. That’s why
KoolBusiness is the most convenient, easiest to use and most complete free ads site in India.</p>
<div id="world_sites">
</div>
</footer>
</div>
</body>
</html>
1 個解決方案
解決方案1
2 已采納 2015-04-07 04:43:24
我已經使用 kinetic JS & JSON 數據構建了類似的東西。 方法非常簡單，您必須在 Adobe Illustrator 中由設計師在 SVG 中跟蹤您的印度地圖，完成后您需要通過呈現 Canvas 元素的 Kinetics JS 解析該 SVG。
我還在 PHP 中創建了一個簡單的解析器，它讀取 SVG 數據並將其轉換為 javascript 對象。
http://codepen.io/anon/pen/ByemRJ
var TerritoryPathData = {
U05A001: {
path: 'M178.619,101.544c-0.39-0.55-1.205-0.61-1.555-1.3 c-0.33-0.651,0.001-1.798-0.173-2.519c-0.596-2.448-2.815-4.989-4.059-6.996c-0.784-1.264-0.606-2.619-1.729-3.664 c-1.431-1.333-4.058-1.276-3.687-3.819c0.192-1.328,1.622-2.811,2.375-3.813c1.005-1.339,0.985-2.45,1.694-3.712 c0.101-0.18,0.139-0.695,0.222-0.938c1.298-0.076,3.113,0.382,3.88-0.752c0.577-0.851,0.165-3.419,0.111-4.466 c-2.078,0.217-6.329-3.901-7.261-5.625c-0.395-0.731-0.137-1.464-0.435-2.128c-0.635-1.415-0.585-0.781-1.845-1.201 c-1.692-0.564-2.109-1.096-3.374-2.463c-2.49-2.692-5.928-3.239-8.94-5.171c-1.626-1.044-4.494-6.443-2.453-8.172 c0.445-0.376,1.56-0.033,2.128-0.178c0.914-0.234,1.244-0.407,1.979-0.961c1.577-1.189,1.5-1.851,1.497-3.867 c-0.001-1.643,0.035-3.193,0.193-4.832c0.226-2.326,1.55-1.68,2.472-3.514c0.265-0.525,0.072-1.515,0.232-2.082 c0.208-0.738,0.675-1.197,0.975-1.92c0.512-1.234,0.867-2.911,1.191-4.215c0.466-1.868,0.616-2.173,2.043-3.519 c1.273-1.2,1.608-2.639,2.548-3.862c0.082-0.107,0.164-0.572,0.228-0.738c4.289-0.738,9.563,0.701,13.676-0.614 c2.455-0.785,2.125-2.803,2.125-5.214c0-0.891-0.314-2.458-0.013-3.283c0.333-0.916,1.474-1.778,1.977-2.67 c1.862-0.29,3.561,0.323,4.605,1.903c0.813,1.231,0.707,2.62,1.541,3.862c2.178,3.247,6.219,2.019,9.665,2.505
看看我的作品， http://ibnlive.in.com/delhi-assembly-election-results-2013-live/
我遵循了這個基本教程http://dev.filkor.org/2013/04/14/create-an-interactive-map-using-javascript-and-html-5-canvas/並根據我的項目破解了這些東西要求。
如果輸入是 Ramesh-123-india，我如何修剪字符串...我的願望 output 應該只是“印度”
[英]How can I trim a string if input is Ramesh-123-india ...my desire output should be only "india""
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.