如何从我的硬编码标记中获取值？我想获得价值“ Ulas，Davao City ”的价值，然后将其放在div上。谁知道怎么做？感谢
我可以在此处查看我的测试网站：http://wlocate.procreativelab.com/
var markers = [
{
"title": 'SM City Davao',
"lat": '7.0531937',
"lng": '125.5817208',
"description": 'SM City Davao : We got it all for you!',
"icon": 'icon-truck.png'
},
{
"title": 'San Pedro College Ulas',
"lat": ' 7.0562176',
"lng": '125.5394492',
"description": 'Ulas, Davao City.',
"icon": 'icon-car.png'
},
{
"title": 'University of Mindanao Matina',
"lat": '7.0717202',
"lng": '125.5925354',
"description": 'UM Matina.',
"icon": 'icon-car.png',
}
];
window.onload = function () {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
zoomControl: false,
scaleControl: true,
panControl: false,
streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
//Create and open InfoWindow.
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: 'icon-car.png'
});
//Attach click event to the marker.
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
google.maps.event.addDomListener(window, 'resize', LoadMap);
google.maps.event.addDomListener(window, 'load', LoadMap)
}
}@charset "utf-8";
/* CSS Document */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
html, body {
overflow-y:hidden;
-ms-scroll-limit: 0 0 0 0;
}
body{
margin: 0 auto;
height: 100%;
width: 100%;
overflow: hidden;
}
.logo {
background: url(../images/logo2.png) no-repeat;
min-height: 37px;
width: 300px;
margin-top: 30px;
margin-left: 40px;
}
/* NAVIGATION */
nav {
margin: 0 auto;
padding: 5px 0;
margin-top: -50px;
}
nav ul {
list-style: none;
text-align: right;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* SHIFT */
nav.shift ul li a {
position:relative;
z-index: 1;
}
nav.shift ul li a:hover {
color: #91640F;
}
nav.shift ul li a:after {
display: block;
position: absolute;
top: 0;
left: 100;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 1px;
content: '.';
color: transparent;
background: #F1C40F;
visibility: none;
opacity: 0;
z-index: -1;
}
nav.shift ul li a:hover:after {
opacity: 1;
visibility: visible;
height: 100%;
}
.container {
width: 100%;
background-color:black;
height: 100px
}
.footer{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0;
left:0;
background: -webkit-linear-gradient(#282828, #010101); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#282828, #010101); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#282828, #010101); /* For Firefox 3.6 to 15 */
background: linear-gradient(#282828, #010101); /* Standard syntax */
}
.legends{
position:relative;
}
.legends2{
min-height: 20px;
margin-top: 7px;
border:#666 1px solid;
border-radius: 5px;
position:absolute;
z-index: 1;
overflow:hidden;
right:0;
margin-right:100px;
padding: 2px;
}
.legends3{
min-height: 20px;
margin-top: 7px;
border:#666 1px solid;
border-radius: 5px;
position:absolute;
z-index: 1;
overflow:hidden;
right:0;
margin-right: 75px;
padding: 2px;
}
.legends4{
min-height: 20px;
margin-top: 7px;
border-radius: 5px;
position:absolute;
z-index: 1;
overflow:hidden;
right:0;
margin-right: 5px;
padding: 2px;
}
.slidingDiv {
height:22px;
padding-right: 3px;
}
.show_hide {
display:none;
}
.slidingDiv2 {
height:22px;
margin-top: -22px;
margin-left: 5px;
padding-left: 10px;
padding-right: 5px;
}
.show_hide2 {
display:none;
padding: 2px 2px 2px 2px;
}
.slidingDiv3 {
height:22px;
margin-top: -22px;
margin-left: 5px;
padding-left: 20px;
padding-right: 5px;
font:Arial, Helvetica, sans-serif;
color:#fff;
}
.show_hide3 {
display:none;
padding: 2px 2px 2px 2px;
margin-right: 10px;
}
.side{
min-height: 200px;
min-width: 300px;
position:absolute;
z-index: 1;
overflow:hidden;
right:0;
}
.clear{
clear:both;
}
.accordion {
width: 300px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
margin: auto;
}
.accordion .item .heading {
height: 40px;
margin-top: -10px;
line-height: 50px;
font-size: 17px;
cursor: pointer;
color: #fff;
padding-left: 15px;
background: #000 url('arrow.png') no-repeat;
opacity: 0.9;
background-position: right 20px top -95px;
border-bottom: 1px solid #ec8484;
box-sizing: border-box;
}
.accordion .item.open .heading,
.accordion .item:last-child .heading { border: 0; }
.accordion .item.open .heading { background-position: right 20px top -5px; }
.accordion .item .content {
display: none;
padding: 15px;
background: #000;
opacity: 0.9;
font-size: 14px;
}
.search{
width: 250px;
border: #2f2f2f 1px solid;
height: 30px;
background-color:#000;
margin-left: 15px;
}
img.searchimg{
padding-top: 5px;
padding-left: 2px;
}
.drop{
position:absolute;
margin-top: -20px;
margin-left: 23px;
font-size: 12px;
}
/* your custom CSS \*/
@-moz-keyframes pulsate {
from {
-moz-transform: scale(0.25);
opacity: 1.0;
}
95% {
-moz-transform: scale(1.3);
opacity: 0;
}
to {
-moz-transform: scale(0.3);
opacity: 0;
}
}
@-webkit-keyframes pulsate {
from {
-webkit-transform: scale(0.25);
opacity: 1.0;
}
95% {
-webkit-transform: scale(1.3);
opacity: 0;
}
to {
-webkit-transform: scale(0.3);
opacity: 0;
}
}
/* get the container that's just outside the marker image,
which just happens to have our Marker title in it */
#dvMap div.gmnoprint[title="I might be here"] {
-moz-animation: pulsate 1.5s ease-in-out infinite;
-webkit-animation: pulsate 1.5s ease-in-out infinite;
border:1pt solid #fff;
/* make a circle */
-moz-border-radius:51px;
-webkit-border-radius:51px;
border-radius:51px;
/* multiply the shadows, inside and outside the circle */
-moz-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
-webkit-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
/* set the ring's new dimension and re-center it */
height:51px!important;
margin:-18px 0 0 -18px;
width:51px!important;
}
/* hide the superfluous marker image since it would expand and shrink with its containing element */
/* #map_canvas div[style*="987654"][title] img {*/
#dvMap div.gmnoprint[title="I might be here"] img {
display:none;
}
/* compensate for iPhone and Android devices with high DPI, add iPad media query */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
#dvMap div.gmnoprint[title="I might be here"] {
margin:-10px 0 0 -10px;
}
}<!DOCTYPE html>
<html>
<head>
<title>WLocate Sample Site</title>
<style>
#dvMap {
position:relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow-y: hidden;
max-width: 100%;
}
#dvMap iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>