javascript - 谷歌地图标记Javascript

标签 javascript google-maps

我一直在努力使用 Google map API。

我想要的是在加载 map 后添加新标记。

我可以添加标记，但信息窗口没有启动。

<html>
<heads>
<style>
html, body, #map {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#infowindow{
  padding: 10px;
}
</style>
<script>

var map;
var myLatLng = {lat: 51.197263, lng: 4.399279};
var myZoom = 8;
var geocoder;
var infowindow = new google.maps.InfoWindow();
function initMap() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            myLatLng = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            myZoom = 15;
            createmap(myLatLng);
            addMeToMap("F0FF00", "Uw locatie", myLatLng);
        }, function (error) {
            if (document.getElementById("GeoLat").value != "" && document.getElementById("GeoLng").value != "") {
                myLatLng = {
                    lat: parseFloat(document.getElementById("GeoLat").value),
                    lng: parseFloat(document.getElementById("GeoLng").value)
                };
                myZoom = 15;
            };
            createmap(myLatLng);
            }
        );
    } else {
        createmap(myLatLng);
    };
};

function createmap(pos) {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: myZoom,
        center: pos
    });
    addToMap("00FF00", "Test", "1", "", "51.243158", "3.520092");
    addToMap("00FF00", "Test", "2", "", "51.344158", "3.620192");
    addToMap("00FF00", "Test", "3", "", "51.145158", "3.720292");
    addToMap("00FF00", "Test", "4", "", "51.546158", "3.420392");
    addToMap("00FF00", "Test", "5", "", "51.447158", "3.320492");
    addToMap("00FF00", "Test", "6", "", "51.748158", "3.220592");
    addToMap("00FF00", "Test", "7", "", "51.649158", "3.120692");
    addToMap("00FF00", "Test", "8", "", "51.950158", "3.020792");
    addToMap("00FF00", "Test", "9", "", "51.271158", "3.110892");
    addToMap("00FF00", "Test", "10", "", "51.282158", "3.220992");
    addToMap("00FF00", "Test", "11", "", "51.213158", "3.331092");
    addToMap("00FF00", "Test", "12", "", "51.244158", "3.441192");
    addToMap("00FF00", "Test", "13", "", "51.235158", "3.551292");
    addToMap("00FF00", "Test", "14", "", "51.336158", "3.661392");
    addToMap("00FF00", "Test", "15", "", "52.243158", "4.520092");
    addToMap("00FF00", "Test", "16", "", "52.344158", "4.620192");
    addToMap("00FF00", "Test", "17", "", "52.145158", "4.720292");
    addToMap("00FF00", "Test", "18", "", "52.546158", "2.420392");
    addToMap("00FF00", "Test", "19", "", "52.447158", "2.320492");
    addToMap("00FF00", "Test", "20", "", "52.748158", "2.220592");
    addToMap("00FF00", "Test", "21", "", "52.649158", "5.120692");
    addToMap("00FF00", "Test", "22", "", "52.950158", "5.020792");
    addToMap("00FF00", "Test", "23", "", "52.271158", "5.110892");
    addToMap("00FF00", "Test", "24", "", "52.282158", "7.220992");
    addToMap("00FF00", "Test", "25", "", "52.213158", "7.331092");
    addToMap("00FF00", "Test", "26", "", "52.244158", "7.441192");
    addToMap("00FF00", "Test", "27", "", "52.235158", "1.551292");
    addToMap("00FF00", "Test", "28", "", "52.336158", "1.661392");
};

function addToMap(Color, Title, Description, InfoPage, Lat, Lng) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: {
            lat: parseFloat(Lat),
            lng: parseFloat(Lng)
        },
        map: map,
        icon: pinImage,
        title: Title
    });

    google.maps.event.addListener(marker, 'click', function () {
        //infowindow.close(); // Close previously opened infowindow
        infowindow.setContent("<div style='padding: 10px' id='infowindow'>" + Title + "</div>");
        infowindow.open(map, marker);
    });

};

function addMeToMap(Color, Title, Pos) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: Pos,
        map: map,
        icon: pinImage,
        title: Title
    });
};

</script>

</head>

<body>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>

</body>

</html>

这实际上是添加了引脚，但点击功能不起作用。

小旁注:如果我在 initMap 部分中调用所有这些，它可以工作，但这不是我的解决方案，因为我想在加载 map 后添加标记。

最佳答案

我在发布的代码中遇到了 JavaScript 错误:Uncaught ReferenceError: google is not Defined 在此行:

var infowindow = new google.maps.InfoWindow();

由于您是异步加载 Google Maps Javascript API v3，因此对 API 对象的所有引用必须位于回调函数 (initMap) 内或之后使用 API 已加载并已运行。

将 infowindow 变量的初始化移至 initMap 函数内:

var infowindow;
function initMap() {
    infowindow = new google.maps.InfoWindow();
    // ... rest of initMap function

proof of concept fiddle

screenshot of resulting map

代码片段:

var map;
var myLatLng = {
  lat: 51.197263,
  lng: 4.399279
};
var myZoom = 8;
var geocoder;
var infowindow;

function initMap() {
  infowindow = new google.maps.InfoWindow();
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      myLatLng = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      myZoom = 15;
      createmap(myLatLng);
      addMeToMap("F0FF00", "Uw locatie", myLatLng);
    }, function(error) {
      if (document.getElementById("GeoLat").value != "" && document.getElementById("GeoLng").value != "") {
        myLatLng = {
          lat: parseFloat(document.getElementById("GeoLat").value),
          lng: parseFloat(document.getElementById("GeoLng").value)
        };
        myZoom = 15;
      };
      createmap(myLatLng);
    });
  } else {
    createmap(myLatLng);
  };
};

function createmap(pos) {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: myZoom,
    center: pos
  });
  addToMap("00FF00", "Test", "1", "", "51.243158", "3.520092");
  addToMap("00FF00", "Test", "2", "", "51.344158", "3.620192");
  addToMap("00FF00", "Test", "3", "", "51.145158", "3.720292");
  addToMap("00FF00", "Test", "4", "", "51.546158", "3.420392");
  addToMap("00FF00", "Test", "5", "", "51.447158", "3.320492");
  addToMap("00FF00", "Test", "6", "", "51.748158", "3.220592");
  addToMap("00FF00", "Test", "7", "", "51.649158", "3.120692");
  addToMap("00FF00", "Test", "8", "", "51.950158", "3.020792");
  addToMap("00FF00", "Test", "9", "", "51.271158", "3.110892");
  addToMap("00FF00", "Test", "10", "", "51.282158", "3.220992");
  addToMap("00FF00", "Test", "11", "", "51.213158", "3.331092");
  addToMap("00FF00", "Test", "12", "", "51.244158", "3.441192");
  addToMap("00FF00", "Test", "13", "", "51.235158", "3.551292");
  addToMap("00FF00", "Test", "14", "", "51.336158", "3.661392");
  addToMap("00FF00", "Test", "15", "", "52.243158", "4.520092");
  addToMap("00FF00", "Test", "16", "", "52.344158", "4.620192");
  addToMap("00FF00", "Test", "17", "", "52.145158", "4.720292");
  addToMap("00FF00", "Test", "18", "", "52.546158", "2.420392");
  addToMap("00FF00", "Test", "19", "", "52.447158", "2.320492");
  addToMap("00FF00", "Test", "20", "", "52.748158", "2.220592");
  addToMap("00FF00", "Test", "21", "", "52.649158", "5.120692");
  addToMap("00FF00", "Test", "22", "", "52.950158", "5.020792");
  addToMap("00FF00", "Test", "23", "", "52.271158", "5.110892");
  addToMap("00FF00", "Test", "24", "", "52.282158", "7.220992");
  addToMap("00FF00", "Test", "25", "", "52.213158", "7.331092");
  addToMap("00FF00", "Test", "26", "", "52.244158", "7.441192");
  addToMap("00FF00", "Test", "27", "", "52.235158", "1.551292");
  addToMap("00FF00", "Test", "28", "", "52.336158", "1.661392");
  map.fitBounds(bounds);
};

var bounds;

function addToMap(Color, Title, Description, InfoPage, Lat, Lng) {
  var pinColor = Color;
  var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));

  var marker = new google.maps.Marker({
    position: {
      lat: parseFloat(Lat),
      lng: parseFloat(Lng)
    },
    map: map,
    icon: pinImage,
    title: Title
  });
  if (!bounds) bounds = new google.maps.LatLngBounds();
  bounds.extend(marker.getPosition());
  google.maps.event.addListener(marker, 'click', function() {
    //infowindow.close(); // Close previously opened infowindow
    infowindow.setContent("<div style='padding: 10px' id='infowindow'>" + Title + "</div>");
    infowindow.open(map, marker);
  });

};

function addMeToMap(Color, Title, Pos) {
  var pinColor = Color;
  var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));

  var marker = new google.maps.Marker({
    position: Pos,
    map: map,
    icon: pinImage,
    title: Title
  });
};
html,
body,
#map {
  height: 95%;
  margin: 0px;
  padding: 0px;
}

#infowindow {
  padding: 10px;
}
<input type="button" onclick="addToMap('FF0000','M1','Marker 1','',map.getCenter().lat(),map.getCenter().lng());" value="red marker" /><input type="button" onclick="addToMap('0000FF','M2','Marker 2','',map.getCenter().lat(),map.getCenter().lng());" value="blue marker"
/>
<input id="GeoLat" /><input id="GeoLng" />
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>

关于javascript - 谷歌地图标记Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51637399/

上一篇：javascript - Firebase 云消息传递 : event is not defined

下一篇：javascript - 'process.env.NODE_ENV' 替换为字符串或进程对象，可在运行时在 create-react-app 中使用

相关文章：

javascript - redirect_uri 不属于应用程序

javascript - Angular.JS ng-repeat 分解字符串

javascript - 谷歌地图 - 定义边界和信息窗口的事件操作区域

javascript - 信息框内的文本区域焦点/事件传播问题

angular - ionic 4 google-maps 5 beta "TypeError: Cannot read property ' BaseClass' of null"

javascript - jQuery Mobile 测试版 : can no longer use $ ('[data-role=header]' )?

javascript - 输入类型数字的 ng-pattern

java - 我怎样才能专注于谷歌地图的某个部分

javascript - 我可以从 Google map (v3) 中删除网格线吗？

javascript - 使用普通 JavaScript 的 HTML 模板

©2024 IT工具网  联系我们