嗨,我对这个话题很陌生,经过几个小时的尝试,我已经接近目标了,但不是在那里,我想我需要一点点踢。
到目前为止,我能够创建一个样式化的地图并在地图上放置 2 个标记。缩放和其他一些东西对我来说很清楚如何影响。
这是代码:
<html>
<head>
<title> test map </title>
<style type="text/css">
#map {
width: 750px;
height: 500px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', init);
function init()
{
var mapOptions = {
zoom: 2,
panControl: true,
zoomControl: true,
center: new google.maps.LatLng(33.524385, -112.048899),
//
styles: [
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 17}]}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 20}]}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"}, {
"lightness": 17}]}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"}, {
"lightness": 29}, {
"weight": 0.2}]}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 18}]}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 16}]}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 21}]}, {
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"}, {
"color": "#000000"}, {
"lightness": 16}]}, {
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36}, {
"color": "#000000"}, {
"lightness": 40}]}, {
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"}]}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 19}]}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"}, {
"lightness": 20}]}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"}, {
"lightness": 17}, {
"weight": 1.2}]}]
};
var mapElement = document.getElementById('map');
var myMap = new google.maps.Map(mapElement, mapOptions);
var pos = new google.maps.LatLng(33.524385, -12.048899);
var poi_marker = new google.maps.Marker(
{
map: myMap,
draggable: false,
animation: google.maps.Animation.DROP,
position: pos
});
var pos = new google.maps.LatLng(5.524385, -12.048899);
var poi_marker = new google.maps.Marker(
{
map: myMap,
draggable: false,
animation: google.maps.Animation.DROP,
position: pos
});
}
</script>
</head>
<body>
<div id="map"> </div>
</body>
</html>
什么对我有用。我看到我喜欢的风格加上经典标记的 2 个位置。
从上面的代码映射样本
然后我环顾四周,发现您可以使用带有标记的信息框。我想为我创建的每个标记将 HTLM 添加到这些框中。
谷歌代表。给出了这个对我来说很好的例子:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max?hl=en
我想像在 2 个简单的标记位置上那样将其中的几个添加到我的地图中,但老实说,我不知道在哪里放置我在上面的链接中看到的代码。
在过去的 2 小时里尝试了各种方法,现在吃饱了。我做错了什么,因为这应该有效。
如果有人知道的话,糖果上的樱桃会在哪里放置代码以赋予标记我自己的风格。我已经找到了一些例子。所以我会很酷一直定制它。
感谢您的帮助、想法或您贡献的任何东西!