如何在Google地图中添加标记 [英] How to add marker in Google map
本文介绍了如何在Google地图中添加标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下代码工作正常，但无法在此添加标记...
我尝试过：
< pre><！DOCTYPE html>
< html>
< head>
< style type =text / css>
html，body，＃map_canvas {margin：0;填充：0;身高：100％}
< / style>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
var map;
var grayStyles =
[
{
elementType：geometry，
stylers：[
{
颜色：＃f5f5f5
}
]
}，
{
elementType：labels.icon，
风格：[
{
能见度：关闭
}
]
}，
{
elementType：标签.text.fill，
the stylers：[
{
color：＃616161
}
]
}，
{
elementType：labels.text.stroke，
stylers：[
{
color：＃f5f5f5
}
]
}，
{
featureType：administrative.land_parcel，
elementType：labels.text.fill，
风格：[
{
color：＃c0c0c0
}，
{
visibility：off
}
]
}，
{
featureType：poi，
elementType：geometry，
风格：[
{
color：#eeeeee
}
]
}，
{
featureType ：poi，
stylers：[
{visibility：off}
]
}，
{
featureType：poi.park，
elementType：geometry，
stylers：[
{
color：＃e5e5e5
}
]
}，
{
featureType：poi.park，
elementType：geometry.fill，
stylers：[
{
visibility：off
}
]
}，
{
featureType ：poi.park，
elementType：geometry.stroke，
stylers：[
{
visibility：off
}
]
}，
{
featureType：poi.park，
elementType：labels.icon，
风格：[
{
能见度：关闭
}
]
}，
{
featureType ：poi.park，
the stylers：[
{visibility：off}
]
}，
{
featureType：poi.park，
elementType：labels.text.stroke，
stylers：[
{
color：＃9e9e9e
}，
{
能见度：关闭
}
]
}，
{
featureType ：road，
elementType：geometry，
stylers：[
{
color：＃fffffff
}
]
}，
{
featureType：road.arterial，
elementType：labels.text.fill，
风格：[
{
颜色：＃757575
}
]
}，
{
featureType： road.highway，
elementType：几何，
风格：[
{
color：＃dadada
}
]
}，
{
featureType：road.highway，
elementType：labels.icon，
风格：[
{
能见度：关闭
}
]
}，
{
featureType： road.highway，
elementType：labels.text.fill，
stylers：[
{
color：＃616161
}，
{
能见度：关闭
}
]
}，
{
featureType： road.highway，
elementType：labels.text.stroke，
stylers：[
{
visibility：off
}
]
}，
{
featureType：road.local，
elementType：labels.text.fill，
风格：[
{
color：＃9e9e9e
}
]
}，
{
featureType ：transit.line，
elementType：geometry，
stylers：[
{
color：＃e5e5e5
}
]
}，
{
featureType：transit.station，
elementType：g eometry，
stylers：[
{
color：#eeeeee
}
]
}，
{
featureType：water，
elementType：geometry，
stylers：[
{
color：＃c9c9c9
}
]
}，
{
featureType：water，
elementType：labels.text.fill，
风格：[
{
color：＃9e9e9e
}
]
}
];
var mapOptions = {
center：new google.maps.LatLng（41.327670,19.8029607），
zoom：15，
styles：grayStyles，
mapTypeControl：false，
disableDefaultUI：true，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
函数initialize（）{
map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map_canvas>< / div>
< / body>
< / html>
解决方案
将带有标记的Google地图添加到您的网站 | Maps JavaScript API | Google Developers [ ^
Below code is working fine but unable to add marker on this ...
What I have tried:
<pre><!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var grayStyles =
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#c0c0c0"
},
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"stylers": [
{ "visibility": "off" }
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#9e9e9e"
},
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
},
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
];
var mapOptions = {
center: new google.maps.LatLng(41.327670, 19.8029607),
zoom: 15,
styles: grayStyles,
mapTypeControl: false,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html> 解决方案
Adding a Google Map with a Marker to Your Website | Maps JavaScript API | Google Developers[^]
这篇关于如何在Google地图中添加标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
