谷歌地图标记Javascript

【问题标题】：Google maps markers Javascript谷歌地图标记Javascript
【发布时间】：2018-08-02 18:42:15
【问题描述】：

我一直在努力使用 google maps API。

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

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

<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 部分调用所有这些，它可以工作，但这不是我的解决方案，因为我想在加载地图后添加标记。

【问题讨论】：

    标签： javascript google-maps


    【解决方案1】：

    我在发布的代码中收到一个 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

    代码 sn-p：

    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>

    【讨论】：

      【解决方案2】：

      google.maps.InfoWindow() 不会在页面加载时加载，您可以在设置 google maps API 后设置并在回调函数中定义它，也可以使用$.ready()。 

      <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 = null;  // You'll get ReferenceError: google is not defined as lib is not loaded yet
function initMap() {
    infowindow = new google.maps.InfoWindow(); // set infowindow on call back function
    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
    });

    marker.addListener('click', function () { // You can add click listener to marker directly.
        //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>

      编辑：jsfiddle

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2023-03-15
        • 1970-01-01
        • 2013-10-01
        • 2016-04-08
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode