Javascript JS Gmaps API，如何从开放和中心标记的a href值序列化数据？_Javascript_Jquery_Google Maps

Javascript JS Gmaps API，如何从开放和中心标记的a href值序列化数据？

javascript jquery google-maps

Javascript JS Gmaps API，如何从开放和中心标记的a href值序列化数据？,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,如何从a href值序列化数据我根据Stack中的两个示例创建了一个代码，这两个示例的混合得到：通过单击a href平移到新位置使用循环“for”生成标记我会理解如何序列化a href值以自动生成标记，从而避免编写两次地理位置代码有什么想法吗？谢谢 <html> <a name="locations"></a> <ul> <li><a class="location_class" data-location_

如何从a href值序列化数据

我根据Stack中的两个示例创建了一个代码，这两个示例的混合得到：

通过单击a href平移到新位置
使用循环“for”生成标记

我会理解如何序列化a href值以自动生成标记，从而避免编写两次地理位置代码

有什么想法吗？谢谢

<html>
<a name="locations"></a>
<ul>
    <li><a class="location_class" data-location_phi="41.3947901,2.1487679">Barcelona</a></li>
    <li><a class="location_class" data-location_phi="41.1258048,1.2385834">Tarragona</a></li>
</ul>
<div id="testmap"></div>
</html>

<script>
var locations = [
  ['loan 1', 41.3947901,2.1487679, 'address 1', 'some1'],
  ['loan 2', 41.1258048,1.2385834, 'address 2', 'some2']
  ];

function pan_func(latlon) {
    var coords = latlon.split(",");
    var panPoint = new google.maps.LatLng(coords[0], coords[1]);
    map.panTo(panPoint);
}

function setMarkers(map,locations){
    var marker, i;

    for (i = 0; i < locations.length; i++) {

        var loan = locations[i][0];
        var lat = locations[i][1];
        var longi = locations[i][2];
        var add =  locations[i][3];
        var add_phi =  locations[i][4];
        var latlngset = new google.maps.LatLng(lat, longi);

        marker = new google.maps.Marker({  
            map: map,
            title: loan,
            position: latlngset
        });
        var content = "<h3>Loan Number: " + loan +  '</h3>' + "Address: " + add + add_phi; 
        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker,'click', phi_test(marker,content,infowindow)); 

    }

    function phi_test (marker,content,infowindow){ 
        return function() {
            infowindow.setContent(content);
            infowindow.open(map,marker);
            map.panTo(marker.getPosition());
         };
     }
}

var map;

function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(41.3947901,2.1487679),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('testmap'), mapOptions);

    $('.location_class').on('click', function () {
        pan_func($(this).data('location_phi'));
    });
    setMarkers(map,locations);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>


完成
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<a href="#" onclick="myClick(0);">Barcelona</a><br>
<a href="#" onclick="myClick(1);">Tarragona</a>
<div id="googlemap" style="width: 100%; height: 500px;"></div>

<script>
// SERIALIZE MARKERS
var markers = [];
    function initialize() {

            var mapOptions = {
                zoom: 10,
                center: new google.maps.LatLng(41.3947901, 2.1487679),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);


            var locations = [
                ['Barcelona', 41.3947901, 2.1487679, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'],
                ['Tarragona', 41.1258048, 1.2385834, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
            ];


            var marker, i;
            var infowindow = new google.maps.InfoWindow();


            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
            });


            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,
                    icon: locations[i][3]
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                        // OPEN MARKERS
                        map.panTo(marker.getPosition());
                    };
                })(marker, i));

                markers.push(marker);
            }

        }
        google.maps.event.addDomListener(window, 'load', initialize);
        // CLEAN EVENT ACTION TO GET THE ID OF CURRENT MARKER AND TRIGGER POSTIION AND OPEN INFOWINDOW
        function myClick(id){
            google.maps.event.trigger(markers[id], 'click');
        }
</script>




//序列化标记
var标记=[]；
函数初始化（）{
变量映射选项={
缩放：10，
中心：新google.maps.LatLng（41.3947901,2.1487679），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googlemap”）、mapOptions）；
变量位置=[
[“巴塞罗那”，41.3947901，2.1487679，'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'],
[Tarragona'，41.1258048，1.2385834，'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
];
var标记，i；
var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
对于（i=0；i


作者来源：我建议将坐标和地址信息存储在数据属性中，从而在结果中获得更灵活的代码：还需要一个标记吗？-再加一个


JS
google.maps.event.addDomListener（窗口“加载”，初始化）；
函数初始化（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（41.3947901,2.1487679），
mapTypeId:google.maps.mapTypeId.ROADMAP
}
设定标记(
新的google.maps.Map（document.getElementById（'testmap'）、mapOptions）
);
}
函数设置标记（map）{
//查找具有“数据位置_phi”属性的链接，
//包含标记放置所需的坐标的
var a=document.querySelectorAll（“[data-location_phi]”）；
对于（变量i=0；i

这个解决方案好多了，很好！非常感谢。不确定是否完全理解您的问题，但如果您正在寻找一种方法，根据某些标记的类名或其他内容对其进行不同的自定义，则可以创建从MapMarker继承的CustomMapMarker类，并在其中添加一些Whists。看看这个，我明白了。检查。如果需要任何解释，请随意询问。好吧，根据我的意见，使用类而不是硬编码的国家坐标是更好的。检查新方法panToSiblings（）和hideInfo（）。我已经注释掉的改动不多了。太棒了，迪米特里，这正是我需要的。您阐述和解释代码的方式非常出色。非常感谢这次大师班。在巴塞罗那，有一杯免费啤酒等着你。
<html>
    <ul>
        <li>
            <a href="#" class="location_class" data-location_phi="41.3947901,2.1487679" data-loan="loan 1" data-add="address 1" data-add_phi="some1">Barcelona</a>
        </li>
        <li>
            <a href="#" class="location_class" data-location_phi="41.1258048,1.2385834" data-loan="loan 2" data-add="address 2" data-add_phi="some2">Tarragona</a>
        </li>
        <li>
            <a href="#" class="location_class" data-location_phi="46.4841143,30.7388449" data-loan="" data-add="address 3" data-add_phi="">Odessa</a>
        </li>
    </ul>
    <div id="testmap"></div>
</html>

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(41.3947901, 2.1487679),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    setMarkers(
        new google.maps.Map(document.getElementById('testmap'), mapOptions)
    );
}

function setMarkers(map) {
    // Find links with "data-location_phi" attribute,
    // that contains coordinates required for marker placement
    var a = document.querySelectorAll('[data-location_phi]');
    for (var i = 0; i < a.length; i++) {
        // Create an instance of MapMarker class for every location link
        new MapMarker(map, a[i]);
    }
}

function MapMarker(map, a) {
    this.a = a;
    this.map = map;
    this.dataset = {};
    this.fillDataSet();
    // Since we don't validate data in attributes it may cause some exceptions
    try {
        var loc = this.dataset.location_phi.split(',');
        this.latLng = new google.maps.LatLng(loc[0], loc[1]);
        this.marker = new google.maps.Marker({
            map: this.map,
            title: this.dataset.loan,
            position: this.latLng
        });
        // Bind event listeners
        this.bind();
    }
    catch (e) {
        console.log(e);
    }
}

MapMarker.prototype.fillDataSet = function () {
    var self = this;
    Array.prototype.slice.call(self.a.attributes).forEach(function (attr) {
        if (attr.name.substr(0, 5) == 'data-') {
            self.dataset[attr.name.substr(5)] = attr.value;
        }
    });
}

MapMarker.prototype.panTo = function () {
    this.map.panTo(this.latLng);
}

MapMarker.prototype.showInfo = function () {
    var infowindow = new google.maps.InfoWindow();
    var content = '<h3>Loan Number: ' + this.dataset.loan + '</h3>' +
                  'Address: ' + this.dataset.add + this.dataset.add_phi;
    infowindow.setContent(content);
    infowindow.open(this.map, this.marker);
}

MapMarker.prototype.bind = function () {
    var self = this;
    // Click on the link
    self.a.addEventListener('click', function (e) {
        e.preventDefault();
        self.panTo();
    });
    // Click on the marker
    google.maps.event.addListener(
        self.marker,
        'click',
        function () {
            self.showInfo();
            self.panTo();
        }
    );
}