Fatal编程技术网
  • javascript/
  • Javascript 如何在谷歌地图中添加svg代码

Javascript 如何在谷歌地图中添加svg代码

javascript jquery google-maps google-maps-api-3 svg

Javascript 如何在谷歌地图中添加svg代码,javascript,jquery,google-maps,google-maps-api-3,svg,Javascript,Jquery,Google Maps,Google Maps Api 3,Svg,我有一个闪烁的SVG代码： 我试图将这个SVG代码添加到Google地图中的特定指针上，这样特定的标记就不会闪烁 我是Google maps API的新手，如何将SVG代码添加到Google maps代码中： 这是谷歌地图的代码： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <

我有一个闪烁的SVG代码：

我试图将这个SVG代码添加到Google地图中的特定指针上，这样特定的标记就不会闪烁 我是Google maps API的新手，如何将SVG代码添加到Google maps代码中：

这是谷歌地图的代码：

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    </head> 
<body>
  <div id="map" style="width: 1000px; height: 600px;"></div>

  <script type="text/javascript">
    var locations = [
                            ['STHOWBGA01_ATIF_RNID_L015',24.31026,93.56268],
                            ['GWTRGOK004_BILF_RNOD_L023',23.70692,91.27397],
                            ['GWTRBLWBN1_BILF_RNOD_L038',24.0179,91.4529],
                            ['SJOWKHL007_ATIF_RNOD_L012',25.35197,92.3723],
                            ['TTINNMSAI4_VIOF_RNID_L011',27.66616,95.87926],
                            ['SIMWUKHRL5_VIOF_RNID_L061',25.12267,94.36558],
                            ['SDIMZLUKI3_BILF_RNOD_L035',25.63658,93.64943]

            ];

    var lat_center = 24.31026,
        long_center = 93.56268;

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(lat_center, long_center),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i, text;

    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

      });

      text = locations[i][0];

      if(locations[i][1] === lat_center && locations[i][2] === long_center) {

          marker.setAnimation(google.maps.Animation.DROP);

        marker.setIcon('https://maps.gstatic.com/intl/en_ALL/mapfiles/markers2/boost-marker-mapview.png');
      }

      google.maps.event.addListener(marker, 'mouseover', (function(marker, text) {
        return function() {
          infowindow.setContent(text);
          infowindow.open(map, marker);
        }
      })(marker, text));
    }

  </script>
</body>
</html>


谷歌地图多个标记
变量位置=[
[STHOWBGA01_ATIF_RNID_L015'，24.31026,93.56268]，
[GWTRGOK004_BILF_RNOD_L023'，23.70692,91.27397]，
[GWTRBLWBN1_BILF_RNOD_L038'，24.0179,91.4529]，
[SJOWKHL007_ATIF_RNOD_L012'，25.35197,92.3723]，
[TTINNMSAI4_VIOF_RNID_L011'，27.66616,95.87926]，
[SIMWUKHRL5_VIOF_RNID_L061'，25.12267,94.36558]，
['SDIMZLUKI3_BILF_RNOD_L035'，25.63658,93.64943]
];
var lat_中心=24.31026，
长_中心=93.56268；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新的google.maps.LatLng（lat_中心，long_中心），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i，文本；
对于（i=0；i
我通过了带有链接png图像的特定中心标记：

我不想使用png图像链接，而是想从上面提供的JSFIDLE中传递SVG代码： 有谁能帮忙吗

谢谢

新代码

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 
<link rel="stylesheet" type="text/css" href="css/search.css" /> 
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<style>
b{
color:red;
}

</style>

<script type="text/javascript">


$(document).ready(function(){

                        <?php
                                    include_once('connection.php');
                                    $con=SQL_CONNECT();

                                    $COMMAND="select unique(SITEID) from LATLONG";
                                    $stid = oci_parse($con, $COMMAND);
                                    $res=oci_execute($stid);
                                    echo "var availableTags = [ ";
                                    while ($row = oci_fetch_array($stid))
                                    {
                                       echo '"'.$row['SITEID'].'",';
                                    }
                                    echo "]";
                                    oci_close($con);

                            ?>



        $('#site').autocomplete({
        source: availableTags,
        open: function (e, ui) {
            var acData = $(this).data('autocomplete');
            acData
                .menu
                .element
                .find('a')
                .each(function () {
                    var me = $(this);
                    var keywords = acData.term.split(' ').join('|');
                    me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<b>$1</b>'));
                });
        }
    });


        //  $( "#datepicker" ).datepicker();


        $("#butn").click(function(){
                var sitename=$("#site").val();

                if(sitename.length==0)
                {
                alert("please enter text");
                }
                else
                {   

                        $("#fetch").load('one_marker.php',{sitename:sitename},function(res){

                });
                }
        });


});

</script>
</head>

<body id='tableb'>
<table  align="center" id='tables'>
<tr><td>ENTER TEXT: </td><td><input type="text" id="site" name="sitename"  placeholder="Sitename"><div id="site_error"></div></td></tr>
<tr><td></td><td><input style="cursor:pointer" type="button" id="butn" value="submit"/></td></tr>
</table>
<div id="content" style="display:none;"></div>

<div id="fetch"></div>

</body>
</html>


b{
颜色：红色；
}
$（文档）.ready（函数（）{
$（“#站点”）。自动完成({
资料来源：availableTags，
打开：功能（e、ui）{
var acData=$（this.data（'autocomplete'）；
acData
.菜单
.元素
.find（'a'））
.每个（功能）{
var me=$（此）；
var关键字=acData.term.split（“”）.join（“|”）；
html（me.text（）.replace（新的RegExp（“（“+keywords+”）”），“$1”）；
});
}
});
//$（“#日期选择器”）.datepicker（）；
$（“#butn”）。单击（函数（）{
var sitename=$（“#site”）.val（）；
如果（sitename.length==0）
{
警报（“请输入文本”）；
}
其他的
{   
$（“#fetch”）.load（'one_marker.php'，{sitename:sitename}，函数（res）{
});
}
});
});
输入文本：
我从自动完成中获得的变量将通过ajax调用传递：blink\u php.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 
<link rel="stylesheet" type="text/css" href="css/search.css" /> 
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<style>
b{
color:red;
}

</style>

<script type="text/javascript">


$(document).ready(function(){

                        <?php
                                    include_once('connection.php');
                                    $con=SQL_CONNECT();

                                    $COMMAND="select unique(SITEID) from LATLONG";
                                    $stid = oci_parse($con, $COMMAND);
                                    $res=oci_execute($stid);
                                    echo "var availableTags = [ ";
                                    while ($row = oci_fetch_array($stid))
                                    {
                                       echo '"'.$row['SITEID'].'",';
                                    }
                                    echo "]";
                                    oci_close($con);

                            ?>



        $('#site').autocomplete({
        source: availableTags,
        open: function (e, ui) {
            var acData = $(this).data('autocomplete');
            acData
                .menu
                .element
                .find('a')
                .each(function () {
                    var me = $(this);
                    var keywords = acData.term.split(' ').join('|');
                    me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<b>$1</b>'));
                });
        }
    });


        //  $( "#datepicker" ).datepicker();


        $("#butn").click(function(){
                var sitename=$("#site").val();

                if(sitename.length==0)
                {
                alert("please enter text");
                }
                else
                {   

                        $("#fetch").load('one_marker.php',{sitename:sitename},function(res){

                });
                }
        });


});

</script>
</head>

<body id='tableb'>
<table  align="center" id='tables'>
<tr><td>ENTER TEXT: </td><td><input type="text" id="site" name="sitename"  placeholder="Sitename"><div id="site_error"></div></td></tr>
<tr><td></td><td><input style="cursor:pointer" type="button" id="butn" value="submit"/></td></tr>
</table>
<div id="content" style="display:none;"></div>

<div id="fetch"></div>

</body>
</html>
请查看本页：

<?php 
    include_once('connection.php');

        $conn=SQL_CONNECT();

        $sitename=$_POST['sitename'];

        $stid = oci_parse($conn, "SELECT * FROM latlong where SITEID like '%$sitename%'");

        $res=oci_execute($stid);    

            while($data = oci_fetch_array($stid))
            {  ?>

                    <div id="lati_center" style="display: none;">
                                    <?php 
                                        echo htmlspecialchars($data['LAT']);
                                    ?>
                                </div>

                    <div id="longi_center" style="display: none;">
                                    <?php 
                                        echo htmlspecialchars($data['LON']);
                                    ?>
                                </div>

        <?php           
        }
    oci_close($conn);
?> 

<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 

  <style>

  #map {
  margin:20px auto;
}
.reddot{

    width:66px;
    height:66px;
    position:absolute
}
.locater{
  position: absolute;
  top: 18px;
  left: 17px;
}
.mark{
    fill: none;
    stroke: #FF9100;
    stroke-width: 1px;
    cursor: pointer;
    z-index: 1000;
}


</style>

  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    </head> 
<body>
  <div id="map" style="width: 1000px; height: 600px;"></div>

  <script type="text/javascript">
    var locations = [
                            <?php
                                            include_once('connection.php');

                                                    $con=SQL_CONNECT();

                                                    $COMMAND="select * from LATLONG";

                                                    $stid = oci_parse($con, $COMMAND);

                                                    $res=oci_execute($stid);

                                                    $len = "select count(*) from latlong";

                                                    $len_c = oci_parse($con, $len);
                                                    $res_c=oci_execute($len_c);

                                                    $i=0;

                                                    while ($data = oci_fetch_array($stid))
                                                    {       
                                                        if($i==$len - 1)
                                                        {   
                                                            echo "['<b>".$data['SITEID']."</b><br>".$data['ADDRESS']."</br>',".$data['LAT'].",".$data['LON']."]" ;

                                                        }else{

                                                            echo "['<b>".$data['SITEID']."</b><br>".$data['ADDRESS']."</br>',".$data['LAT'].",".$data['LON']."]," ;
                                                        }
                                                        $i++;   
                                                    }
                                                    oci_close($con);

                                            ?>


    ];

  var div_lat = document.getElementById("lati_center");

            var lat_center = div_lat.textContent;

      var div_lon = document.getElementById("longi_center");

            var long_center = div_lon.textContent;


            alert(div_lat+","+div_lon)


    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: new google.maps.LatLng(lat_center, long_center),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i, text;

    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

      });

      text = locations[i][0];

      if(locations[i][1] === lat_center && locations[i][2] === long_center) {
       // marker.setAnimation(google.maps.Animation.DROP);
        marker.setIcon('https://maps.gstatic.com/intl/en_ALL/mapfiles/markers2/boost-marker-mapview.png');

        map.Overlay= new google.maps.OverlayView();

        map.Overlay.center_ = new google.maps.LatLng(lat_center, long_center);
        map.Overlay.reddot_ =  '<div id="reddot" class="reddot" style="position:relative;"><svg class="marker" height="66" width="66"><circle cy="33" cx="33" class="mark" r="25"><set id="show" attributeName="visibility" attributeType="CSS" to="visible" begin="0s; hide.end" dur="1s" fill="freeze"/><set id="hide" attributeName="visibility" attributeType="CSS" to="hidden" begin="show.end" dur="1s" fill="freeze"/></circle><img src="" class="locater"></svg></div>';

        map.Overlay.draw = function () {
            var pixelposition = this.getProjection().fromLatLngToDivPixel(this.center_);
            jQuery('#reddot').css({top:(pixelposition.y-50), left:(pixelposition.x-33)});

        };

        map.Overlay.onAdd=function() {
          var self=this;
          jQuery(self.getPanes().markerLayer).append(self.reddot_);
        };

        map.Overlay.setMap(map);

      }

      google.maps.event.addListener(marker, 'mouseover', (function(marker, text) {
        return function() {
          infowindow.setContent(text);
          infowindow.open(map, marker);
        }
      })(marker, text));
    }

  </script>
</body>


谷歌地图多个标记
#地图{
保证金：20px自动；
}
雷多先生{
宽度：66px；
高度：66px；
位置：绝对位置
}
洛卡特先生{
位置：绝对位置；
顶部：18px；
左：17px；
}
.马克{
填充：无；
行程：#FF9100；
笔画宽度：1px；
光标：指针；
z指数：1000；
}
变量位置=[
];
var div_lat=document.getElementById（“lati_中心”）；
var lat_center=div_lat.textContent；
var div_lon=document.getElementById（“longi_中心”）；
var long_center=div_lon.textContent；
警报（垂直方向+”，“+垂直方向）
var map=new google.maps.map（document.getElementById（'map'）{
缩放：17，
中心：新的google.maps.LatLng（lat_中心，long_中心），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i，文本；
对于（i=0；i
不能将SVG元素用作标记图标。您可以使用元素模拟google.maps.Marker的行为

例如：

    map.Overlay= new google.maps.OverlayView();

    map.Overlay.center_ = new google.maps.LatLng(lat_center, long_center);
    map.Overlay.reddot_ =  '<div id="reddot" class="reddot" style="position:relative;"><svg class="marker" height="66" width="66"><circle cy="33" cx="33" class="mark" r="25"><set id="show" attributeName="visibility" attributeType="CSS" to="visible" begin="0s; hide.end" dur="1s" fill="freeze"/><set id="hide" attributeName="visibility" attributeType="CSS" to="hidden" begin="show.end" dur="1s" fill="freeze"/></circle><img src="http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png" class="locater"></svg></div>';

    map.Overlay.draw = function () {
        var pixelposition = this.getProjection().fromLatLngToDivPixel(this.center_);
        jQuery('#reddot').css({top:(pixelposition.y-50), left:(pixelposition.x-33)});

    };

    map.Overlay.onAdd=function() {
      var self=this;
      jQuery(self.getPanes().markerLayer).append(self.reddot_);
    };

    map.Overlay.setMap(map);