有没有办法点击链接（村庄1 - 使用数据值？）来放大地图上的标记并显示信息框？
我一直在努力让这项工作无法完成。非常感谢任何提供的帮助。谢谢！
HTML
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<a href="#" data-value="">Village 1</a>
<a href="#" data-value="">Village 2</a>
<a href="#" data-value="">Village 3</a>
<a href="#" data-value="">Village 4</a>
<a href="#" data-value="">Village 5</a>
<ul class="com-map-leg">
<span class="cap">Legend (Hover to see description) </span>
<li data-toggle="tooltip" data-placement="top" title="Building the capacity of key stakeholders is essential in order to establish community ownership and informed decision making. Key skills such as community mobilization, negotiation, facilitation, and project management have been provided to village development committees and community based volunteers. Since 2015, 618 training man-hours have been recorded."><span class="rd-cir col-5"></span> Community Capacity Development</li>
<li data-toggle="tooltip" data-placement="top" title="Effectively responding to natural disasters requires effective communication and a viable team ethic. MPRL E&P has responded to 2 large flooding disasters that affected the communities Mann field. A series of assessments were initiated to better understand the needs and concerns of the communities ensuring the right type of relief was provided and effective rehabilitation followed. A total of USD 681,772.06 has been spent on 2 disaster responses and 171 employees volunteered a total of 2245 hours to assist with the relief and recovery. "><span class="rd-cir col-3"></span> Disaster Relief & Management</li>
<li data-toggle="tooltip" data-placement="top" title="Every child deserves the right to an education. Understanding the constraints of public schools in rural areas MPRL E&P has invested in school materials and equipment to aid the effectiveness and quality of education provided in Mann field. A total of 342 students aged 5-16 gained access to classroom furniture. A further total of 10 members of the communities received short-term work providing them with 130,000 MMK each."><span class="rd-cir col-6"></span> Education</li>
<li data-toggle="tooltip" data-placement="top" title="Improving access to clean water is a human right. It can improve the health, economy, and social well being of a community. MPRL E&P invested in 11 communities within Mann field by building water wells and water tanks to ensure a constant access to water supplies. Village development committees were taught to manage the projects including community expectations. MPRL E&P worked alongside the committees and provided technical expertise to ensure safety standards and requirements were met as well as conducted knowledge transfer to ensure basic skills such as management was provided. At least 69% of the communities were satisfied with the project."><span class="rd-cir col-2"></span> Health, Water & Sanitation</li>
<li data-toggle="tooltip" data-placement="top" title="Supporting corporate philanthropy promotes a sense of company pride and loyalty. Encouraging employees to be active in the community is a value conveyed throughout the organization. A variety of projects have been established across Mann field to promote a sense of giving. Since 2001 a total of USD 106,068 has been spent on charity based activities."><span class="rd-cir col-4"></span> Philanthropy</li>
</ul>
</div>
<div class="col-sm-9">
<div id="community-map"></div>
</div>
</div>
</div>
的Javascript
var map;
var ib;
function initMap() {
map = new google.maps.Map(document.getElementById('community-map'), {
zoom: 13,
center: {
lat: 20.235333,
lng: 94.854444
},
scrollwheel: false,
mapTypeId: 'roadmap',
styles: [{
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#e9e9e9"
}, {
"lightness": 17
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}, {
"lightness": 20
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 17
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 29
}, {
"weight": 0.2
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 18
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 16
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}, {
"lightness": 21
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#dedede"
}, {
"lightness": 21
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}, {
"lightness": 16
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"saturation": 36
}, {
"color": "#333333"
}, {
"lightness": 40
}]
}, {
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#f2f2f2"
}, {
"lightness": 19
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#fefefe"
}, {
"lightness": 20
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#fefefe"
}, {
"lightness": 17
}, {
"weight": 1.2
}]
}]
});
// var myLatLng = {lat: -25.363, lng: 131.044};
var AyeMya = {lat: 20.235333, lng: 94.854444}; //village1
var AukKyaung = {lat: 20.224686, lng: 94.864300}; //village2
var ChinTaung = {lat: 20.250997, lng: 94.848039}; //village3
var EainYwar = {lat: 20.198219, lng: 94.844403}; //village4
var KyarKan = {lat: 20.214497, lng: 94.867211}; //village5
var LayEainTan = {lat: 20.230625, lng: 94.861400}; //village6
var LetPanTapin = {lat: 20.216883, lng: 94.866522}; //village7
var LetPaTaw = {lat: 20.232742, lng: 94.859961}; //village8
var MaeBaytKone = {lat: 20.238883, lng: 94.853800}; //village9
var MakyeeChaung = {lat: 20.192483, lng: 94.870936}; //village10
var ManKyoe = {lat: 20.250936, lng: 94.856403}; //village11
var NanU = {lat: 20.228156, lng: 94.863450}; //village12
var PaukKone = {lat: 20.212183, lng: 94.868389}; //village13
var YwarThar = {lat: 20.198972, lng: 94.874247}; //village14
var villageAyeMya = new google.maps.Marker({
position: AyeMya,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7,
fillColor: "#696969",
fillOpacity: 0.8,
strokeWeight: 0
}
});
villageAyeMya.setMap(map);
polygonClickHandler(villageAyeMya, '<div id="iw_container" class="gw_style_iw" >' +
'<div class="iw_title">Auk Kyaung</span></div>' +
'<div class="iw_content">' +
'<ul>' +
'<li><i class="rd-cir col-2"></i>Water pipe extension to village</li>' +
'</ul>' +
'</div>' +
'</div>');
var villageAukKyaung = new google.maps.Marker({
position: AukKyaung,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7,
fillColor: "#696969",
fillOpacity: 0.8,
strokeWeight: 0
}
});
villageAukKyaung.setMap(map);
polygonClickHandler(villageAukKyaung, '<div id="iw_container" class="gw_style_iw" >' +
'<div class="iw_title">Auk Kyaung</span></div>' +
'<div class="iw_content">' +
'<ul>' +
'<li><i class="rd-cir col-5"></i>Provided Training for VDC members</li>' +
'<li><i class="rd-cir col-3"></i>Distribution For Flood Relief (2015)</li>' +
'<li><i class="rd-cir col-6"></i>Provided School furniture</li>' +
'<li><i class="rd-cir col-2"></i>Water pipe extention to village and provide a water tank to school</li>' +
'<li><i class="rd-cir col-4"></i>Dakundaing for Auk Kyaung Pagoda</li>' +
'</ul>' +
'</div>' +
'</div>');
ib = new InfoBox();
}
function polygonClickHandler(polygon, contentString) {
var boxText = document.createElement("div");
boxText.className = 'com-map';
boxText.innerHTML = contentString;
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-100, -200),
zIndex: null,
boxStyle: {
// opacity: 1.0,
// width: "200px"
},
// closeBoxMargin: "10px 0px 2px -200px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
// var ib = new InfoBox(myOptions);
polygon.addListener('mouseover', function(evt) {
ib.setOptions(myOptions);
ib.setPosition(evt.latLng);
ib.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
答案 0 :(得分：1)
从HTML激活鼠标悬停事件处理程序的一个选项：
var map;
var ib;
var villageAukKyaung;
var villageAyeMya;
function initMap() {
map = new google.maps.Map(document.getElementById('community-map'), {
zoom: 13,
center: {
lat: 20.235333,
lng: 94.854444
},
scrollwheel: false,
mapTypeId: 'roadmap',
});
// var myLatLng = {lat: -25.363, lng: 131.044};
var AyeMya = {
lat: 20.235333,
lng: 94.854444
}; //village1
var AukKyaung = {
lat: 20.224686,
lng: 94.864300
}; //village2
villageAyeMya = new google.maps.Marker({
position: AyeMya,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7,
fillColor: "#696969",
fillOpacity: 0.8,
strokeWeight: 0
}
});
villageAyeMya.setMap(map);
polygonClickHandler(villageAyeMya, '<div id="iw_container" class="gw_style_iw" >' +
'<div class="iw_title">Aye Mya</span></div>' +
'<div class="iw_content">' +
'<ul>' +
'<li><i class="rd-cir col-2"></i>Water pipe extension to village</li>' +
'</ul>' +
'</div>' +
'</div>');
villageAukKyaung = new google.maps.Marker({
position: AukKyaung,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7,
fillColor: "#696969",
fillOpacity: 0.8,
strokeWeight: 0
}
});
villageAukKyaung.setMap(map);
polygonClickHandler(villageAukKyaung, '<div id="iw_container" class="gw_style_iw" >' +
'<div class="iw_title">Auk Kyaung</span></div>' +
'<div class="iw_content">' +
'<ul>' +
'<li><i class="rd-cir col-5"></i>Provided Training for VDC members</li>' +
'<li><i class="rd-cir col-3"></i>Distribution For Flood Relief (2015)</li>' +
'<li><i class="rd-cir col-6"></i>Provided School furniture</li>' +
'<li><i class="rd-cir col-2"></i>Water pipe extention to village and provide a water tank to school</li>' +
'<li><i class="rd-cir col-4"></i>Dakundaing for Auk Kyaung Pagoda</li>' +
'</ul>' +
'</div>' +
'</div>');
ib = new InfoBox();
}
function polygonClickHandler(polygon, contentString) {
var boxText = document.createElement("div");
boxText.className = 'com-map';
boxText.innerHTML = contentString;
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-100, -200),
zIndex: null,
boxStyle: {},
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
polygon.addListener('mouseover', function(evt) {
ib.setOptions(myOptions);
ib.setPosition(evt.latLng);
ib.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initMap);代码段
html,
body,
#community-map,
.col-sm-9,
.container-fluid,
.row {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.com-map {
text-align: center;
max-width: 180px;
height: 180px;
border-radius: 50%;
background-color: rgba(218, 218, 218, 0.8);
padding: 20px 10px;
color: @pri-grey;
font-size: 12px;
.iw_title {
margin-top: 0px;
}
a {
color: #fff;
margin-top: 10px;
display: block;
}
a:hover {
color: @pri-grey;
}
ul {
list-style-type: none;
margin-left: 0;
padding-left: 0;
li {
margin-bottom: 5px;
}
}
}<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<a href="#" data-value="" onclick="google.maps.event.trigger(villageAyeMya,'mouseover', {latLng: new google.maps.LatLng(20.235333, 94.854444)});">Village 1</a>
<a href="#" data-value="" onclick="google.maps.event.trigger(villageAukKyaung,'mouseover', {latLng: new google.maps.LatLng(20.224686,94.864300)});">Village 2</a>
<ul class="com-map-leg">
<span class="cap">Legend (Hover to see description)</span>
<li data-toggle="tooltip" data-placement="top" title="Building the capacity of key stakeholders is essential in order to establish community ownership and informed decision making. Key skills such as community mobilization, negotiation, facilitation, and project management have been provided to village development committees and community based volunteers. Since 2015, 618 training man-hours have been recorded."><span class="rd-cir col-5"></span> Community Capacity Development</li>
<li data-toggle="tooltip" data-placement="top" title="Effectively responding to natural disasters requires effective communication and a viable team ethic. MPRL E&P has responded to 2 large flooding disasters that affected the communities Mann field. A series of assessments were initiated to better understand the needs and concerns of the communities ensuring the right type of relief was provided and effective rehabilitation followed. A total of USD 681,772.06 has been spent on 2 disaster responses and 171 employees volunteered a total of 2245 hours to assist with the relief and recovery. "><span class="rd-cir col-3"></span> Disaster Relief & Management</li>
<li data-toggle="tooltip" data-placement="top" title="Every child deserves the right to an education. Understanding the constraints of public schools in rural areas MPRL E&P has invested in school materials and equipment to aid the effectiveness and quality of education provided in Mann field. A total of 342 students aged 5-16 gained access to classroom furniture. A further total of 10 members of the communities received short-term work providing them with 130,000 MMK each."><span class="rd-cir col-6"></span> Education</li>
<li data-toggle="tooltip" data-placement="top" title="Improving access to clean water is a human right. It can improve the health, economy, and social well being of a community. MPRL E&P invested in 11 communities within Mann field by building water wells and water tanks to ensure a constant access to water supplies. Village development committees were taught to manage the projects including community expectations. MPRL E&P worked alongside the committees and provided technical expertise to ensure safety standards and requirements were met as well as conducted knowledge transfer to ensure basic skills such as management was provided. At least 69% of the communities were satisfied with the project."><span class="rd-cir col-2"></span> Health, Water & Sanitation</li>
<li data-toggle="tooltip" data-placement="top" title="Supporting corporate philanthropy promotes a sense of company pride and loyalty. Encouraging employees to be active in the community is a value conveyed throughout the organization. A variety of projects have been established across Mann field to promote a sense of giving. Since 2001 a total of USD 106,068 has been spent on charity based activities."><span class="rd-cir col-4"></span> Philanthropy</li>
</ul>
</div>
<div class="col-sm-9">
<div id="community-map"></div>
</div>
</div>
</div>import "dart-ext:odbc_ext";
答案 1 :(得分：0)
您可以通过执行以下操作将其绑定到一个函数以增加缩放并打开信息窗口：
var contentString = 'The content that goes into info window';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
function onClick() {
map.setZoom(20);
infowindow.open(map, marker);
}