标记点谷歌地图自定义脚本

本文关键字：自定义 脚本 谷歌地图 | 更新日期: 2023-09-27 18:11:50

我有我的自定义脚本映射到我的网页，但它没有点标记准确的发布:

<script>
/* Map */
(function () {
    "use strict";
    if (document.getElementById("map")) {
        var locations = [
            ['<div class="map-info-box"><ul class="contact-info-list"><li><span><i class="fa fa-home fa-fw"></i></span> Mimar Sinan Mh., Konak/İzmir, Türkiye</li><li><span><i class="fa fa-phone fa-fw"></i></span> +90 0 (232) 324 11 83</li></ul></div>', 38.396652, 27.090560, 9]
        ];
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: new google.maps.LatLng(29.0961599, -110.96087460000001),
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [{ "featureType": "all", "elementType": "all", "stylers": [{ "saturation": -100 }, { "gamma": 0.5 }] }]
        });
        var infowindow = new google.maps.InfoWindow();

        var marker, i;
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                animation: google.maps.Animation.DROP,
                icon: 'images/pin.png',
            });
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }
}());

所以我需要添加标记点比如默认嵌入地图http://www.map-embed.com/:

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<div style="overflow:hidden;height:500px;width:600px;">
<div id="gmap_canvas" style="height:500px;width:600px;"></div>
<style>#gmap_canvas img{max-width:none!important;background:none!important}    </style>
<a class="google-map-code" href="http://www.themecircle.net" id="get-map-data">www.themecircle.net</a>
</div>
<script type="text/javascript"> function init_map(){var myOptions = {zoom:13,center:new     google.maps.LatLng(29.0961599,-110.96087460000001),
mapTypeId: google.maps.MapTypeId.ROADMAP};map = new    google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
     marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(29.0961599, -110.96087460000001)});
      infowindow = new google.maps.InfoWindow({content:"<b>Minerals</b><br/>Reyes #100<br/>83190 Hermosillo" });
    google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});
    infowindow.open(map,marker);}
    google.maps.event.addDomListener(window, 'load', init_map);</script>

如何使我的标记看起来像默认映射?非常感谢您的回答

标记点谷歌地图自定义脚本

我认为您需要将标记声明放在initMap()函数中，以便在加载地图时在特定坐标处放置默认标记。下面是来自Google官方文档的HTML + Javascript代码。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
  </body>
</html>

要了解更多详细信息，请参阅本文档。

你需要这样使用它，它适合我。

在你想要显示地图的HTML页面上添加这个div 

<div class="google-map-canvas" id="map-canvas"></div>

并添加此脚本…

function initialize() {
    // Change the latitude and longitude to your location. You can also get the coordinates here: http://itouchmap.com/latlong.html
    var myLatlng = new google.maps.LatLng(25.548710, 82.084777);
    var mapOptions = {
        zoom: 17,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    var infowindow = new google.maps.InfoWindow({
        content:
            '<div class="map-wrap">' +
                // Company name
                '<div class="b-title">' + 'Company Name' + '</div>' +
                // Company street
                '<p>' + 'Company Street' + '</p>' +
                // Company city and state
                '<p>' + 'Company City and State' + '</p>' +
                // Clearfix with border
                '<div class="clrfx map-div">' + '</div>' +
                // Row 1
                '<div class="row">' +
                    // Phone
                    '<div class="b-info cell w-49">' + '<span class="entypo-phone">' + '</span>' + '+91-879-902-1616' + '</div>' +
                    // Email
                    '<div class="b-info cell w-49">' + '<span class="entypo-paper-plane">' + '</span>' + 'example@example.com' + '</div>' +
                '</div>' +
                // Row 2
                '<div class="row">' +
                    // Mobile
                    '<div class="b-info cell w-49">' + '<span class="entypo-mobile">' + '</span>' + '+91-879-902-1616' + '</div>' +
                    // Website
                    '<div class="b-info cell w-49">' + '<span class="entypo-monitor">' + '</span>' + 'www.example.com' + '</div>' +
                '</div>' +
                // Bottom margin clearfix
                '<div class="clrfx mt-10">' + '</div>' +
            '</div>'
    });
    makeInfoWindowEvent(map, infowindow, marker);
}
function makeInfoWindowEvent(map, infowindow, marker) {
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
相关文章：