时间戳

首页 > 解决方案 > 在 JavaScript 代码中间插入一个变量

javascript - 在 JavaScript 代码中间插入一个变量

问题描述

我有一个选择当前位置的代码，我设置了 2 个 cookie 来存储纬度和经度以供以后使用，然后我有第二个代码从存储的 cookie 中在地图上显示这个位置。

我试图在谷歌上获取一些信息，但没有成功。在代码中插入变量的方法不正确，我找不到合适的解决方案

在线坐标：{lat:37.128285,lng:-8.539157}，在纬度和经度的地方我想放置我的变量我尝试做这样的事情，但似乎我的语法不正确

center:{lat:}+ lati +{,lng:} + longi

我也尝试过这样但出现错误

中心：{lat:lati,lng:longi}

InvalidValueError：setCenter：不是具有有限坐标的 LatLng 或 LatLngLiteral：在属性 lat：不是数字

这是我获取当前位置的代码

<html>
    <body>

    <p>Click to get your current coordinates.</p>

    <button id="clickButton" onclick="getLocation()">Get Your Current Location and after refresh this page...</button>

    <p id="demo"></p>

    <script>
    setInterval(function(){ 
    //this code runs every second
    document.getElementById('clickButton').click(); 
    }, 1000);

    var x = document.getElementById("demo");

    function getLocation() {
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
    }
    }

    function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
    document.cookie = "Long = " + position.coords.longitude;
    document.cookie = "Lat = " + position.coords.latitude;
  
    document.cookie = "Longitude = " + position.coords.Longitude;
    }
    </script>

    </body>
    </html>

这是我在地图上显示标记的代码 在此代码中，我尝试使用我的 cookie 值设置 2 个变量，然后在我的代码上实现，但不是以正确的方式上线 coords:{lat:${lati},lng:${longi}},

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Google Map</title>
    <style>
    #map{
      height:400px;
      width:100%;
    }
    </style>
    </head>
    <body>
    <h1>My Google Map</h1>
    <div id="map"></div>
    <script>
    var lati = getCookie("lat");
    var longi = getCookie("long");
    function initMap(){
      // Map options
      var options = {
        zoom:8,
        center:{lat:37.128285,lng:-8.539157}
      }
      
      // New map
      var map = new google.maps.Map(document.getElementById('map'), options);

      // Listen for click on map
      google.maps.event.addListener(map, 'click', function(event){
        // Add marker
        addMarker({coords:event.latLng});
      });

      /*
      // Add marker
      var marker = new google.maps.Marker({
        position:{lat:42.4668,lng:-70.9495},
        map:map,
        icon:'C:\Users\MDLABS\Desktop\nice taxy drivers traker\Taxi-icon.png'
      });

      var infoWindow = new google.maps.InfoWindow({
        content:'<h1>Lynn MA</h1>'
      });

      marker.addListener('click', function(){
        infoWindow.open(map, marker);
      });
      */

      // Array of markers
      var markers = [
        {
          coords:{lat:${lati},lng:${longi}},
          iconImage:'https://www.nicetaxi.eu/Taxi-icon.png',
          content:'<h1>driver 1</h1>'
        },
        {
          coords:{lat:37.128285,lng:-8.539157},
          content:'<h1>driver 2</h1>'
        },
        {
          coords:{lat:37.128285,lng:-8.539159}
        }
      ];

      // Loop through markers
      for(var i = 0;i < markers.length;i++){
        // Add marker
        addMarker(markers[i]);
      }

      // Add Marker Function
      function addMarker(props){
        var marker = new google.maps.Marker({
          position:props.coords,
          map:map,
          //icon:props.iconImage
        });

        // Check for customicon
        if(props.iconImage){
          // Set icon image
          marker.setIcon(props.iconImage);
        }

        // Check content
        if(props.content){
          var infoWindow = new google.maps.InfoWindow({
            content:props.content
          });

          marker.addListener('click', function(){
            infoWindow.open(map, marker);
          });
        }
      }
    }
    function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBg8mazOCFsHlsOfTClG9Cugb1ddBPfldU&callback=initMap">
    </script>
    </body>
    </html>

标签： javascript

解决方案

我找到了使它工作的解决方案。这是解决它的最终工作代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>My Google Map</title>
        <style>
            #map {
                height: 400px;
                width: 100%;
            }
        </style>
    </head>
    <body>
    <h1>My Google Map</h1>
    <div id="map"></div>
    <script>
        var lati = parseFloat(getCookie("Lat"));
        var longi = parseFloat(getCookie("Long"));
    
        function initMap() {
            // Map options
            var options =
                {
                    zoom: 8,
                    center: {lat: lati, lng: longi}
                }
    
            // New map
            var map = new google.maps.Map(document.getElementById('map'), options);
    
            // Listen for click on map
            google.maps.event.addListener(map, 'click', function (event) {
                // Add marker
                addMarker({coords: event.latLng});
            });
    
            /*
            // Add marker
            var marker = new google.maps.Marker({
              position:{lat:42.4668,lng:-70.9495},
              map:map,
              icon:'C:\Users\MDLABS\Desktop\nice taxy drivers traker\Taxi-icon.png'
            });
    
            var infoWindow = new google.maps.InfoWindow({
              content:'<h1>Lynn MA</h1>'
            });
    
            marker.addListener('click', function(){
              infoWindow.open(map, marker);
            });
            */
    
            // Array of markers
            var markers = [
                {
                    coords: {lat: 37.128285, lng: -8.539157},
                    iconImage: 'https://www.nicetaxi.eu/Taxi-icon.png',
                    content: '<h1>driver 1</h1>'
                }
            ];
    
            // Loop through markers
            for (var i = 0; i < markers.length; i++) {
                // Add marker
                addMarker(markers[i]);
            }
    
            // Add Marker Function
            function addMarker(props) {
                var marker = new google.maps.Marker({
                    position: props.coords,
                    map: map,
                    //icon:props.iconImage
                });
    
                // Check for customicon
                if (props.iconImage) {
                    // Set icon image
                    marker.setIcon(props.iconImage);
                }
    
                // Check content
                if (props.content) {
                    var infoWindow = new google.maps.InfoWindow({
                        content: props.content
                    });
    
                    marker.addListener('click', function () {
                        infoWindow.open(map, marker);
                    });
                }
            }
        }
    
        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXX&callback=initMap">
    </script>
    </body>
    </html>

推荐阅读